Authentication with Vue

#1

Is this something that is supported? I am just reading through the documentation trying to figure out how to get that working.

#2

Yes, that’s supported. You can do it like in the react SDK by using requireLogin:

<ThinBackend requireLogin>

Or by calling loginWithRedirect() from a button:

import { loginWithRedirect } from 'thin-backend';

function LoginButton() {
    const isLoading = useState(false);

    async function doLogin() {
        setLoading(true);
        await loginWithRedirect();
        setLoading(false);
    }

    return <button onClick={doLogin} disabled={isLoading}>Login</button>
}
#3

Awesome, thanks! Last thing here with logout it seems that the session does not get deleted. When deleting localStorage from the browser manually they re-appear. Upon checking the network tab the request for /DeleteSession either fails with a NS_BINDING_ABORTED or just a transfer of 0B. Could this be due to running on localhost?

#4

The request to /DeleteSession is triggered here: thin-backend/auth.js at master · digitallyinduced/thin-backend · GitHub

Could there be something in your app preventing that form submission from going through (e.g. are you calling window.location.reload() directly after the call to logout()?)?

In case the code of your project is open source on github, maybe you can share a link so I can try to reproduce the problem?

#5

Sure thing. book-moves is the project. I am adding authentication to the auth branch. You can find the call here. And it’s usage here.

#6

Thanks. I can reproduce the issue.

It looks like it’s caused by the default behaviour of the logout link:

                  <a
                    href="/"
                    @click="doLogout"
                    :class="[
                      active ? 'bg-gray-100' : '',
                      'block px-4 py-2 text-sm text-gray-700',
                    ]"
                    >Sign out</a
                  >

Basically it will try to log out, but then the page goes to / as this is the url specified by the link.

To fix this we need to call event.preventDefault() in the click handler:

const doLogout = async (event) => {
  event.preventDefault();
  await logout();
}

This fixed the issue locally for me.

1 Like
#7

Working locally for me too. Thank you for the help. Everything is working as expected.