Auth0 and Vue 3, route to different view AFTER log in, depending on what role user has

Question

Im using auth0 for my application, where im trying to, depending on what role the logged in user have, route to a view, instead of having it on one view. So lets say i have roles X,Y and Z. If my user logs in with the role X, i want to be redirected to "/Xhome", and same for the other roles. Is it possible to do it like this? Since im not verifying anything for the moment, or sending a token. I just want a check for some what:

if(auth.user.role === "x"){
 //route to "/XHome"
}

Cuz of right now, it just redirects to the "normal" page, as "/".

So basicly the flow i want is

Login anywhere => Auth0 login page => enter credentials => do a check for roles => redirect to that role homepage

and right now my useAuth file looks like this.

//UseAuth0.js

export const AuthState = reactive({
    user: null,
    loading: false,
    isAuthenticated: false,
    auth0: null,
    token: '',
})

const config = {
    domain: 'mydomain',
    client_id: 'myclientId',
   
}

export const useAuth0 = state => {
    const handleStateChange = async () => {
        state.isAuthenticated = !!(await state.auth0.isAuthenticated())
        state.user = await state.auth0.getUser()
        state.loading = false
        state.token = await state.auth0.getTokenSilently()
    }

    const initAuth = () => {
        state.loading = true
        createAuth0Client({
            domain: config.domain,
            client_id: config.client_id,
            audience: config.audience,
            cacheLocation: 'localstorage',
            redirect_uri: window.location.origin,
        }).then(async auth => {
            state.auth0 = auth
            await handleStateChange()
        })
    }
//Im guessing i should be able to do something here maybe?
    const login = async () => {
        await state.auth0.loginWithRedirect(),
        await handleStateChange()
    }

    const logout = async () => {
        state.auth0.logout({
            returnTo: window.location.origin,
        })
    }

    return {
        login,
        logout,
        initAuth,
    }
}

Is it possible to it like im trying to do here? Or is this an issue I have to do in Auth0 it self?

Any advice helps, thanks in advance

Answer 1

After loggin in the user, yo can check its role and redirect it to his corresponding home with a router.push("homeX") for example. And then in the router file, do something like this:

export const router = new Router({
    mode: 'history',
    routes: [
        { 
            path: '/', 
            component: HomePage, 
            meta: { authorize: [] } 
        },
        { 
            path: '/homeX', 
            component: HomeX, 
            meta: { authorize: [Role.X], role: "X" } 
        },
        { 
            path: '/homeY', 
            component: HomeY, 
            meta: { authorize: [Role.Y], role: "Y" } 
        },
        { 
            path: '/login', 
            component: LoginPage 
        },

        // otherwise redirect to home
        { path: '*', redirect: '/' }
    ]
});

router.beforeEach((to, from, next) => {
    // redirect to login page if not logged in and trying to access a restricted page
    const { authorize } = to.meta;
    const currentUser = authenticationService.currentUserValue;

    if (authorize) {
        if (!currentUser) {
            // not logged in so redirect to login page with the return url
            return next({ path: '/login', query: { returnUrl: to.path } });
        }

        // check if route is restricted by role
        if (authorize.length && currentUser.role !== to.meta.role) {
            // role not authorised so redirect to home page
            return next({ path: '/' });
        }
    }

    next();
})