Azure AD B2C provider fails when trying to authenticate using Azure user flows

[angelitaooo]

Provider type

Azure Active Directory B2C

Environment

 System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1001.69 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.volta/tools/image/node/20.17.0/bin/node
    npm: 10.8.3 - ~/.volta/tools/image/npm/10.8.3/bin/npm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.6
  npmPackages:
    next: 14.2.15 => 14.2.15 
    next-auth: ^5.0.0-beta.25 => 5.0.0-beta.25 
    react: ^18 => 18.3.1 

Reproduction URL

https://github.com/angelitaooo/template-next-app

Describe the issue

I created a next js project, and using Auth js with the Azure AD b2c provider, I'm using the latest version of auth js "next-auth": "^5.0.0-beta.25".
I created my tenant, the app registration, user flow for sign in sign up.
I followed these instructions: https://authjs.dev/reference/core/providers/azure-ad-b2c#configuration

this is what I have in my app registration redirect URIs:

When I started implementing the auth in my project, I started getting errors after trying to login using the user flow I previously created.

This is the user flow to sign in:

This is the error I'm getting after user name and password:

the URL has this error: http://localhost:3000/api/auth/error?error=Configuration

in the terminal:

[auth][debug]: callback route error details {
  "method": "GET",
  "query": {
    "state": "eyJhbGc
    .....
[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: OperationProcessingError: "response" body "access_token" property must be a string
    at OPE (webpack-internal:///(rsc)/./node_modules/oauth4webapi/build/index.js:179:12)
    at assertString (webpack-internal:///(rsc)/./node_modules/oauth4webapi/build/index.js:294:19)
    at processGenericAccessTokenResponse (webpack-internal:///(rsc)/./node_modules/oauth4webapi/build/index.js:1227:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async processAuthorizationCodeOpenIDResponse (webpack-internal:///(rsc)/./node_modules/oauth4webapi/build/index.js:1419:20)
    at async handleOAuth (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/oauth/callback.js:164:35)
    at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:47:41)

I have tried a lot of things, adding and removing properties from the AzureADB2C provider in the nextAuth config:

This is what I have but its not working, I found that the official Auth.js documentation doesn't talk about my use case. I could use some help 🙏🏻

//issuer formats I have tried, the first is the one I'm using

AUTH_AZURE_AD_B2C_ISSUER="https://${tenantName}.b2clogin.com/${tenantId}/v2.0"
AUTH_AZURE_AD_B2C_ISSUER=https://tenantName.b2clogin.com/tenantName.onmicrosoft.com/v2.0
AUTH_AZURE_AD_B2C_ISSUER="https://tenantName.b2clogin.com/tenantName.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_signup_signin"
AUTH_AZURE_AD_B2C_ISSUER="https://tenantName.b2clogin.com/tenantName.onmicrosoft.com/B2C_1_signup_signin/v2.0/"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    AzureADB2C({
      clientId: process.env.AUTH_AZURE_AD_B2C_ID,
      // clientSecret: process.env.AUTH_AZURE_AD_B2C_SECRET,
      issuer: process.env.AUTH_AZURE_AD_B2C_ISSUER,
      token:
        "https://tenantname.b2clogin.com/tenantname.onmicrosoft.com/B2C_1_signup_signin/oauth2/v2.0/token",
      authorization: {
        url: `https://tenantname.b2clogin.com/tenantname.onmicrosoft.com/B2C_1_signup_signin/oauth2/v2.0/authorize`,
        params: {
          scope: "openid offline_access profile email",
          response_type: "code",
          type: "b2c",
          response_mode: "query",
        },
      },
      client: {
        token_endpoint_auth_method: "none", // This tells Azure to treat it as a public client
      },
      wellKnown:
        "https://tenantname.b2clogin.com/tenantname.onmicrosoft.com/b2c_1_signup_signin/v2.0/.well-known/openid-configuration",
      // checks: ["pkce"],
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.emails?.[0] ?? profile?.email,
        };
      },
      checks: ["pkce", "state"],
    }),
  ],
  //  By default, the `id` property does not exist on `token` or `session`. See the [TypeScript](https://authjs.dev/getting-started/typescript) on how to add it.
  callbacks: {
    jwt({ token, user, account }) {
      console.log("jwt token", token);
      if (account && user) {
        return {
          ...token,
          accessToken: account.access_token,
          refreshToken: account.refresh_token,
          userId: user.id,
        };
      }
      return token;
    },
    session({ session, token }) {
      console.log("session token", token);
      session.user.id = token.userId;
      session.accessToken = token.accessToken;
      return session;
    },
  },
  // Add these session settings
  session: {
    strategy: "jwt",
  },
  secret: process.env.AUTH_SECRET,
  debug: true,
});

I'm not able to console.log inside the callbacks, either.

How to reproduce

After trying to sign in in the user flow, using user name and password, I got the error

Expected behavior

It should log in the user, and print the console logs in the callbacks functions

[vikanirav]

I am also getting same issue after user authenticated successfully and redirected back to the app.

[ttavni]

facing same issue...

[Rokasbarasa1]

This setup worked for me

    AzureADB2CProvider.default({
      // AZURE B2C NEEDS TO HAVE REGISTERED CALLBACKS TO WEB, NOT SPA
      tenantId: process.env.NUXT_PUBLIC_AZURE_B2C_TENANT_NAME,
      clientId: process.env.NUXT_PUBLIC_AZURE_B2C_CLIENT_ID,
      primaryUserFlow: process.env.NUXT_PUBLIC_AZURE_B2C_USER_FLOW,
      authorization: {
        params: {
          scope: process.env.NUXT_PUBLIC_AZURE_B2C_SCOPES,
        },
      },
      client: {
        token_endpoint_auth_method: 'none',
      },
      profile(profile: any) {
        return {
          id: profile.sub,
          name: profile.name || `${profile.given_name} ${profile.family_name}`,
          email: profile.email || '',
        }
      },
      checks: ['pkce'],
    }),

I was testing on firefox before and it was not working, but on google chrome it works.

EDIT:

While this works, it does have the "PKCE code_verifier cookie was missing" issue #10458. So the login first returns an error and then the second time the login is attempted with the provider it works fine.