Auth0 Nuxt "completeInteractiveLogin" Method Fails to Return User Properties Without Rich Authorization Requests
Last Updated:
Overview
Auth0 fails to return the user, session, and idToken properties from the Nuxt completeInteractiveLogin() method when Rich Authorization Requests (RAR) are not used. This occurs because the absence of RAR causes the authorizationDetails property to return as undefined and it is to be expected. Implement a Post-Login Action to forward the user information via an API call, or configure Nuxt server middleware to sync the user session to resolve the issue.
Applies To
- Auth0
- Authorization Code Flow
- Nuxt
- Rich Authorization Requests (RAR)
Cause
The error occurs because Rich Authorization Requests (RAR) are not used during the authentication flow. This behavior is expected and causes the authorizationDetails property returned by the completeInteractiveLogin() method to be undefined, preventing the retrieval of the user, session, and token properties.
Solution
How are user properties retrieved using a Post-Login Action?
Implement a Post-Login Action to forward the user information via an Application Programming Interface (API) call by adding the required JavaScript code to the flow.
- Navigate to the Auth0 Admin Console.
- Choose Actions and select Flows.
- Select Login to open the Post-Login flow.
- Add a new Action or select an existing one to edit.
- Enter the required JavaScript code to send the user data to the external API.
export default defineEventHandler(async (event) => { const auth0Client = useAuth0(event); const session = await auth0Client.getSession(); if (session && session.user && !event.context.userSynced) { try { await $fetch('<api_endpoint>', { 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); } } });
6. Select Deploy to save and activate the Action.
How are user properties retrieved using Nuxt server middleware?
Configure the Nuxt server middleware to sync the user session by adding the required code to the configuration file.
- Open the Nuxt application codebase.
- Locate or create the server middleware configuration file.
- Add the following code to check if the session exists and sync the user if they are not already synced.
export default defineEventHandler(async (event) => { const auth0Client = useAuth0(event); const session = await auth0Client.getSession(); if (session && session.user && !event.context.userSynced) { try { await $fetch('<api_endpoint>', { 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); } } });
- Save the changes and redeploy the Nuxt application.
Additionally, nuxt-auth-utils provides a convenient useUserSession composable, which checks whether the user is logged in and redirects them if they are not.
const { user } = useUserSession()
try {
await $fetch('<api_endpoint>', {
method: 'post',
body: {
id: String(user.sub),
email: String(user.email),
},
});
} catch (error) {
console.error('error', error);
}