completeInteractiveLogin return value — user, session, and idToken not present (auth0-nuxt)

Hi,

I’m following up on a previous thread about accessing user data in the Auth0 callback when using auth0-nuxt: Auth0-nuxt and access to the user data in callback - #3 by remus.ivan

I’ve tried the suggested approaches and they don’t match what the SDK actually returns.

1. First suggestion: user from result.user or result.session?.user

The suggestion was to use result.user or result.session?.user from completeInteractiveLogin. In our setup with @auth0/auth0-nuxt, completeInteractiveLogin only returns:

{ appState?: TAppState; authorizationDetails?: AuthorizationDetails[] }

There is no user or session property. In the TypeScript definitions, authorizationDetails is undefined in the standard Authorization Code flow and only set when Rich Authorization Requests (RAR) are used. Enabling RAR would require an extra consent screen, which we don’t want.

2. Second suggestion: decoding result.idToken

The suggestion was to use jwtDecode(result.idToken) to get user claims. But the result object from completeInteractiveLogin does not expose an idToken property. The SDK stores the session (including user data and tokens) in encrypted cookies and does not return them from completeInteractiveLogin.

Current workaround:
We’ve implemented a “pending-resolve” pattern: we set a short-lived cookie in the callback and run aditional api call in a server middleware on the next request, when the session cookies are present. That works, but we’d prefer to rely on officially supported behavior.

Question:
What is the recommended way to access user data or run post-login logic in the callback when using auth0-nuxt?

Is the “run logic on the next request” pattern the intended approach, or is there an alternative we should be using?

Thanks in advance for any guidance.

1 Like

Hi @aleksandra

Allow me some time to investigate the issue and I will come back to you ASAP.

Kind Regards,
Nik

1 Like

Any update @nik.baleca ?

Thank you in advance for addressing this issue.

Hi again @aleksandra

I am sorry about the delayed reply regarding your situation.

One recommendation I have for the scenario that you are facing is to use a PostLogin Trigger to make te necessary API call as such:

exports.onExecutePostLogin = async (event, api) => {
  const axios = require('axios');

  try {
    await axios.post('https://your-api.com/endpoint', {
      id: event.user.user_id
      email: event.user.email
    });
  } catch (error) {
    console.error('Failed to sync user to external system:', error.message);
  }
};

Otherwise, you can attempt to use the server middleware if you require this logic to be based within your Nuxt application. You will need to create a middleware which runs on every request, checking if the session exists and if the user has been synced. The code itself should look something like this:

// server/middleware/user-sync.ts
export default defineEventHandler(async (event) => {
  const auth0Client = useAuth0(event);
  const session = await auth0Client.getSession();

  if (session && session.user && !event.context.userSynced) {
    try {
      await $fetch(myApi, {
        method: 'post',
        body: {
          id: String(session.user.sub),
          email: String(session.user.email),
        },
      });
      event.context.userSynced = true; 
    } catch (error) {
      console.error('error syncing user', error);
    }
  }
});

Also, nuxt-auth-utils provides a convenient useUserSession composable which is used to check if the user is logged in, and redirect them if they are not. Can you try using this composable to make your API call as such before the redirect?

const { user } = useUserSession()

try {
await $fetch(myApi, {
method: ‘post’,
body: {
id: String(user.sub),
email: String(user.email),
},
});
} catch (error) {
console.error(‘error’, error);
}

Let me know if these proposed solutions work in your scenario!

Kind Regards,
Nik