How to handle forgot password user flow in Azure ad b2c provider with next 13 and app folder -- OAUTH_CALLBACK_HANDLER_ERROR

[rawi96]

Question 💬

Hi 👋

Similar questions:

• Azure B2C "Forgot My Password" #882
• How to properly handle OAUTH_CALLBACK_HANDLER_ERROR? #1234 (comment)

How can I handle the forgot password user flow with next auth with azure ad b2c in next 13?

Click on login button opens the login page and I can login successfully.
But when I click on forgot password I get this error:

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error access_denied {
  error: {
    message: 'access_denied',
    stack: 'Error: access_denied\n' +
      '    at oAuthCallback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/callback.js:56:23)\n' +
      '    at Object.callback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/callback.js:18:107)\n' +
      '    at AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:202:51)\n' +
      '    at runMicrotasks (<anonymous>)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async NextAuthRouteHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:50:30)\n' +
      '    at async NextAuth._args$ (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:84:24)\n' +
      '    at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:253:37)',
    name: 'Error'
  },
  error_description: 'AADB2C90118: The user has forgotten their password.\r\n' +
    'Correlation ID: a9747230-0da2-4b58-a1aa-34e4ba6e5386\r\n' +
    'Timestamp: 2023-09-01 07:07:07Z\r\n',
  providerId: 'azure-ad-b2c',
  message: 'access_denied'
}
[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error access_denied {
  message: 'access_denied',
  stack: 'Error: access_denied\n' +
    '    at oAuthCallback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/callback.js:56:23)\n' +
    '    at Object.callback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/callback.js:18:107)\n' +
    '    at AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:202:51)\n' +
    '    at runMicrotasks (<anonymous>)\n' +
    '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
    '    at async NextAuthRouteHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:50:30)\n' +
    '    at async NextAuth._args$ (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:84:24)\n' +
    '    at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:253:37)',
  name: 'Error'
}

Where should I handle the B2C callback? 🤔

And another question is: (Not sure if this belongs to here)
When I add e.g. a Profile editing user flow in the azure portal.
What exactly do I have to do so that a user can run this user flow e.g. on my profile page?

Thanks ✌️

How to reproduce ☕️

This is my code:

src/app/api/auth/[...nextauth]/route.ts

import { authOptions } from '@/server/auth-options';
import NextAuth from 'next-auth';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

src/server/auth-options

import { AuthOptions } from 'next-auth';
import AzureADB2CProvider from 'next-auth/providers/azure-ad-b2c';


export const authOptions: AuthOptions = {
  providers: [
    AzureADB2CProvider({
      tenantId: process.env.AZURE_AD_B2C_TENANT_NAME,
      clientId: process.env.AZURE_AD_B2C_CLIENT_ID || '',
      clientSecret: process.env.AZURE_AD_B2C_CLIENT_SECRET || '',
      primaryUserFlow: process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW,
      authorization: { params: { scope: 'offline_access openid' } },

      async profile(profile) {
        return {
          id: profile.sub,
          firstName: profile.given_name,
          lastName: profile.family_name,
          email: profile.email,
        };
      },
    }),
  ],
  session: {
    maxAge: 12 * 60 * 60, // 12 hours
  },
  
  callbacks: {
    async jwt({ token, user, account }) {
      token.user ??= user;
      token.accessToken ??= account?.access_token;
      token.expiresAt ??= (account?.expires_at ?? 0) * 1000;
      token.error = undefined;
      return token;
    },

    async session({ session, token: { user, error: tokenError } }) {
      if (!user) {
        throw new Error('No user in session!');
      }
      session.user = user;
      return session;
    },
  },
};

Login button:
<button onClick={() => signIn('azure-ad-b2c')}>Sign in</button>

Edit profile button:
<button onClick={() => /*what should happen here?*/}>Edit profile</button>

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[KasperiP]

Did you find any answer to this :D

[KryptoBeard]

I've also basically tried everything on this topic. Not only handing this, but even a profile edit and coming back to the application and updating the user first/last name. Just doesn't work. Would be nice to get some clarification on this path.