I'm implementing an isAuthenticated
router hook in my Vue application to check if the user is authenticated and whether to redirect it to the login page or to let it in.
After the user is successfully logged in, it gets redirected from the Universal Login page back to the app, according to the redirect_uri
I specified in the auth0 config. Now it's http://localhost:5173/auth-callback
. Of course, I listed this URL in the Allowed Callback URLs field on the dashboard (http://localhost:5173/auth-callback, http://127.0.0.1:5173/auth-callback
). But when in the router hook I call auth0.getAccessTokenSilently
, the URL instantly changes to http://localhost:5173
, so the actual AuthCallback page is never reached.
I tried to play with cache options, but calling the server each time to request the token (cacheMode: "off"
) is ridiculous, meanwhile cacheMode: "cache-only"
is useless, when you don't have the token cached.
I instantiate the auth0 plugin with the following options:
{
domain: import.meta.env.VITE_AUTH0_DOMAIN,
clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
useRefreshTokens: true,
useRefreshTokensFallback: true,
authorizationParams: {
redirect_uri: window.location.origin + "/auth-callback",
audience: import.meta.env.VITE_AUTH0_AUDIENCE,
}
}
I would appreciate any help and advice. Can't believe I'm the first person to face that issue.
So, the solution ended up to be quite trivial. The only thing I missed is adding the appState.target
property to the parameters of the loginWithRedirect
method. So in case you're facing the same issue, do this:
auth0.loginWithRedirect({
appState: {
target: "/auth-callback"
}
});