Vue3 - Pinia + Auth0 - isAuthenticated always false

Help
,
1

I’m developing a vue3 app using pinia as state manager and auth0 as authprovider.

In my vue router, I’ve the following code to manage the authentication:

router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
    const authStore = useAuthStore();
    const isLogged = authStore.isLogged();
    if (!isLogged) await handleNotLogged(to, from, next);
    else await handleLogged(to, from, next);
});

async function handleNotLogged(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
    const authStore = useAuthStore();
    if (to?.query?.code && to?.query?.state) {
        next({ name: '/logged/home' });
    } else {
        await authStore.login();
    }
}
async function handleLogged(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {next()}

here is my authStore.ts

import { defineStore } from 'pinia';
import { User } from '@models/user';
import { useStorage } from '@vueuse/core';
import { RouteLocation } from 'vue-router';
import { createAuth0 } from '@auth0/auth0-vue';
const authService = createAuth0({
    domain: import.meta.env.VITE_APP_AUTH_URL,
    client_id: import.meta.env.VITE_APP_AUTH_CLIENT_ID,
    redirect_uri: `${window.location.origin}`,
});

const defaultUserData = {} as User;
const defaultLastRoute = { path: '/' } as RouteLocation;
export const useAuthStore = defineStore('AuthStore', {
    state: () => ({
        userData: useStorage('userData', defaultUserData, localStorage),
        lastRoute: useStorage('lastRoute', defaultLastRoute, localStorage),
        authService,
    }),
    actions: {
        isLogged(): boolean {
            try {
                return this.authService.isAuthenticated;
            } catch (error) {
                return false;
            }
        },
        async login(): Promise<boolean> {
            try {
                await this.authService.loginWithRedirect();
                return true;
            } catch (error) {
                console.error(error);
                return false;
            }
        },
        async logout(): Promise<boolean> {
            try {
                await this.authService.logout();
                return true;
            } catch (error) {
                console.error(error);
                return false;
            }
        },
    },
});

And also my main.ts

import App from './App.vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { registerPlugins } from '@plugins';
import { useAuthStore } from '@store/auth';
import router from '@router';
import vuetify from './plugins/vuetify';

async function main() {
    const app = createApp(App);
    registerPlugins();
    const pinia = createPinia();
    app.use(pinia);
    const authStore = useAuthStore();
    const { authService } = authStore;
    app.use(authService);
    app.use(router);
    app.use(vuetify).mount('#app');
}
main();

The problem is that everytime the beforeEach is triggered, the auth0 isAuthenticated returns false. Even when i’ve just succesfully logged.

I’ve searched for some answers, and some said that ewhen there is a code and state in query params we should call the auth0.handleRedirectCallback but there’s a note in the method saying

Note: The Auth0-Vue SDK handles this for you, unless you set skipRedirectCallback to true. In that case, be sure to explicitly call handleRedirectCallback yourself.

PS: The application in auth0 is configured as Single Page Application

2

Have you tried using beforeEnter: authGuard from import { authGuard } from “@auth0/auth0-vue”;
That is how I protect routes in my Vue 3 app. I am using Universal Login.

3

No, because I want to guard it according some rules that were defined to me.

4

I don’t know if this is the issue in your case, but when using the built in authGuard the @auth0/auth0-vue library docs section on protecting a route indicate that you need to register the router BEFORE the Auth0 module in main.ts, i.e.

// what you have now
const app = createApp(App)
app.use(authService)
app.use(router)

// what you might want instead
const app = createApp(App)
app.use(router) // <== PUT THIS BEFORE AUTH
app.use(authService)

Hope this helps!

5

Thank you for sharing that @morphatic !

6

It still returning is authenticated as false. =/

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.