Auth0-nuxt and access to the user data in callback

[aleksandra]

Hi there,
I am starting implementation with the new SDK for Nuxt applications (auth0-nuxt). I am creating server routes: login and callback, but I would like to know if during login it is possible to obtain an email and sub claim from the token (auth0 id) immediately after completing the login but still remaining in the body of the callback handler, i.e. after calling the method await auth0Client.completeInteractiveLogin()

I need to make a request to another system as part of the login process, and I need an email and auth0 id for that, and I would like to do it before the user is informed that they have been logged in / before they are redirected to the returnTo page.

Below is pseudo code illustrating what I want to achieve, but the user is still undefined at that point, as are the session and token. Is there any way to change/enhance this?

auth/callback.ts file

```export default defineEventHandler(async (event) => {
const auth0Client = useAuth0(event);
const auth0ClientOptions = event.context.auth0ClientOptions;

const { appState } = await auth0Client.completeInteractiveLogin<{ returnTo?: string }>(
new URL(event.node.req.url ?? ‘’, auth0ClientOptions.appBaseUrl)
);

const user = await auth0Client.getUser();
const config = useRuntimeConfig();

try {
await $fetch(myApi, {
method: ‘post’,
body: {
id: String(user.sub),
email: String(user.email),
},
});
} catch (error) {
console.error(‘error’, error);
}
sendRedirect(event, appState?.returnTo ?? ‘/’);
});```

Thank you in advance!

[remus.ivan]

Hi @aleksandra,

Welcome to the Auth0 Community!

The issue should be caused by your attempt to read the user state from the getUser() request, which has not yet set the session cookie in order for your server-side handlers to read it, resulting an undefined user object.

You can try verifying the returned object of your completeInteractiveLogin function which you should be able to use immediately instead of relying on cookies. The code should look something like this:

// server/routes/auth/callback.ts
export default defineEventHandler(async (event) => {
  const auth0Client = useAuth0(event);
  const auth0ClientOptions = event.context.auth0ClientOptions;

  const result = await auth0Client.completeInteractiveLogin(
    new URL(event.node.req.url ?? ", auth0ClientOptions.appBaseUrl)
  );

  const user = result.user || result.session?.user; 

  const { appState } = result;

  if (user) {
    const config = useRuntimeConfig();
    try {
      await $fetch(config.myApiUrl, { 
        method: 'post',
        body: {
          id: String(user.sub),
          email: String(user.email),
        },
      });
    } catch (error) {
      console.error('API Side-effect failed', error);
    }
  }

  return sendRedirect(event, appState?.returnTo ?? '/');
});

Alternatively, you can try decoding the ID token returned by the completeInteractiveLogin function:

import { jwtDecode } from "jwt-decode";

const result = await auth0Client.completeInteractiveLogin(...);

if (result.idToken) {
    const claims = jwtDecode(result.idToken);
    const userId = claims.sub;
    const email = claims.email;
    // proceed with the API call
}

I hope this helps and if you have further questions please let me know!
Best regards,
Remus