Auth0-vue unnecessary multi redirect after login with different code=

[azoton1pl]

Hi everyone,

I’m encountering an issue with the auth0-vue integration in my application. After a successful login, the page reloads multiple times, and each time the URL’s query parameter code is modified. It seems that instead of a single redirection to the protected area of the app, Auth0 is triggering several reloads, which is not the expected behavior.

Details:

• Environment: I’m using auth0-vue in Nuxt 3.
• Issue Description: After logging in, the app performs multiple page reloads. Each reload results in the code query parameter in the URL being updated. This behavior is causing unnecessary refreshes and unexpected URL changes.
• Expected Behavior: Once the user logs in successfully, there should be a single redirect to the application without multiple page reloads or repeated changes to the URL query parameters.
• What I’ve Tried So Far:
  • Verified the callback URL configuration in the Auth0 dashboard – everything appears to be set up correctly.
  • Reviewed the auth0-vue documentation and searched relevant forums, but haven’t found a solution that addresses this specific behavior.
    plugins/auth.ts

import { createAuth0 } from '@auth0/auth0-vue';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  const auth0 = createAuth0({
    domain: config.public.AUTH0_DOMAIN || '',
    clientId: config.public.AUTH0_CLIENT_ID || '',
    authorizationParams: {
      redirect_uri: config.public.AUTH0_REDIRECT_URL || '',
      audience: config.public.AUTH0_AUDIENCE || ''
    }
  });

  nuxtApp.vueApp.use(auth0);
  addRouteMiddleware(
    'auth',
    async () => {
      if (import.meta.client) {
        await auth0.checkSession();
        if (!auth0.isAuthenticated.value) {
          auth0.loginWithRedirect({
            appState: { target: '/callback' }
          });
        }
      }
    },
    { global: true }
  );

  return {
    provide: {
      auth0
    }
  };
});

Has anyone encountered a similar issue or can offer any insights into what might be causing this behavior? It could be a configuration issue with auth0-vue or possibly something specific to my environment that I’m overlooking.

Thanks in advance for any help!

[rueben.tiow]

Hi @azoton1pl,

Welcome to the Auth0 Community!

It seems like your application is performing the authentication flow repeatedly, causing a new authorization code each time.

You could verify this behavior by checking your Auth0 Logs to see that multiple successful login events generate a new authorization code each time.

If this happens, you should look into your network activity and see if there are any clues to the requests being made. Cross-check it with your app’s code to see what might be causing this behavior. I suspect it might be related to your if condition for checking if the user is authenticated and calling the loginWithRedirect method.

Let me know about your findings.

Thanks,
Rueben