next-auth: v3 - CALLBACK_OAUTH_ERROR (Invalid state...) - Custom Provider Azure AD B2C

@RobbyUitbeijerse I created a minimal example repo and wrote up the steps I took to set it up - take a look, let me know if anything in it is off: https://benjaminwfox.com/blog/tech/how-to-configure-azure-b2c-with-nextjs

@gyto23 There is an extra step needed to get an access token from Azure B2C (assuming you’re using B2C) - you’ll need to follow the steps from this tutorial documentation: https://docs.microsoft.com/en-us/azure/active-directory-b2c/access-tokens

The main points are:

• You need a 2nd app registration that represents your API
• You need to use the scope you define in that app registration in your nextauth config.

I would not use the refresh token as any means of authentication/authorization. I’m not versed enough to tell you why it’s a bad idea, but I’m confident that it is 😃

I have an updated config I can share with you which may help. Following the steps in the link above to get the access token is worth the extra effort, as it allows you to much better control the B2C JWT, which is separate and distinct from the NextAuth JWT.

In the jwt callback with this setup the account has an accessToken (which is the B2C JWT) and refreshToken both of which I store on the NextAuth JWT. Then it’s easy to use the NextAuth API in my NextJS API to get the accessToken from the JWT and pass it to my backend api.

Additionally, you can see the logic in there that checks for imminent expiration of the accessToken and then silently gets a new token if needed. If you instead wanted to not refresh the token you could just revoke the users NextAuth session at that point.

import NextAuth from 'next-auth'
// import Providers from 'next-auth/providers'

const tenantName = process.env.B2C_AUTH_TENANT_NAME
const loginFlow = process.env.B2C_LOGIN_FLOW_NAME
const maxAge = Number(process.env.CLIENT_SESSION_MAX_AGE)
const jwtSecret = process.env.NEXTAUTH_JWT_SECRET
const appSecret = process.env.NEXTAUTH_APP_SECRET
const clientId = process.env.B2C_AUTH_CLIENT_ID
const clientSecret = process.env.B2C_AUTH_CLIENT_SECRET
const apiAccessClaim = process.env.B2C_API_ACCESS_CLAIM
const signingKey = process.env.NEXTAUTH_SIGNING_KEY
const encryptionKey = process.env.NEXTAUTH_ENCRYPTION_KEY
const encryption = process.env.NEXTAUTH_ENCRYPT_JWT

const tokenUrl = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${loginFlow}/oauth2/v2.0/token`

const options = {
  session: {
    jwt: true,
    maxAge,
  },
  jwt: {
    secret: jwtSecret,
    encryption,
    signingKey,
    encryptionKey,
  },
  secret: appSecret,
  pages: {
    signOut: '/auth/signout',
  },
  providers: [
    {
      id: 'azureb2c',
      name: 'Azure B2C',
      type: 'oauth',
      version: '2.0',
      debug: true,
      scope: `https://${tenantName}.onmicrosoft.com/api/${apiAccessClaim} offline_access openid`,
      params: {
        grant_type: 'authorization_code',
      },
      accessTokenUrl: tokenUrl,
      requestTokenUrl: tokenUrl,
      authorizationUrl: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${loginFlow}/oauth2/v2.0/authorize?response_type=code+id_token+token&response_mode=form_post`,
      profileUrl: 'https://graph.microsoft.com/oidc/userinfo',
      profile: (profile) => {
        console.debug('\n')
        console.debug('~~ PROFILE', profile)
        console.debug('\n')

        // The NextAuth `user` object available to the client
        return {
          id: profile.oid,
          name: `${profile.given_name} ${profile.family_name}`,
          email: profile.emails.length ? profile.emails[0] : null,
          image: undefined,
        }
      },
      clientId,
      clientSecret,
      idToken: true,
      state: false,
    },
  ],
  callbacks: {
    // eslint-disable-next-line no-unused-vars
    jwt: async (token, user, account, profile, isNewUser) => {
      const now = parseInt(Date.now() / 1000, 10)
      const tokenExpiryPaddingSeconds = 30
      const isSignIn = !!user

      // Add auth_time to token on signin in
      if (isSignIn) {
        // eslint-disable-next-line no-param-reassign
        token.b2c = {
          accessToken: account.accessToken,
          refreshToken: account.refreshToken,
          iat: profile.iat,
          exp: profile.exp,
        }
      }

      console.debug('\n Token expires / refreshes in: ', token.b2c.exp - now, ' / ', (token.b2c.exp - tokenExpiryPaddingSeconds) - now)

      /**
       * Add some extra seconds to refresh before it is completely expired to avoid
       * any edge case scenarios where the token expires in transit if it is almost
       * expired, but validated prior to an API call, and then sent in the
       * Authorization header and expires.
       */
      if (token.b2c.exp - tokenExpiryPaddingSeconds < now) {
        const refreshQuery = `?grant_type=refresh_token&refresh_token=${token.b2c.refreshToken}&scope=https://${tenantName}.onmicrosoft.com/api/${apiAccessClaim} offline_access openid&client_id=${process.env.B2C_AUTH_CLIENT_ID}&redirect_uri=urn:ietf:wg:oauth:2.0:oob&client_secret=${process.env.B2C_AUTH_CLIENT_SECRET}`
        const response = await fetch(`${tokenUrl}${refreshQuery}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        })

        try {
          const result = await response.json()

          // eslint-disable-next-line no-param-reassign
          token.b2c = {
            accessToken: result.access_token,
            refreshToken: result.refresh_token,
            iat: result.not_before,
            exp: result.expires_on,
          }
        }
        catch (e) {
          console.error('There was an error trying to refresh the accessToken')
          console.error(e)
        }
      }

      return Promise.resolve(token)
    },
  },
}

export default (req, res) => NextAuth(req, res, options)

@parantha97 I would highly appreciate if you opened a new bug report with a reproduction, so we can have a look and fix any potential issues introduced after that version! 🙏

@kiranupadhyak I reverted to next-auth version 3.13.3. it worked for me. but It’s not a solution.

@BenjaminWFox Thank you for your feedback, this is really helps. I hope you going to update the tutorial for the Azure setup for those people who searching similar implementation

@BenjaminWFox I was able to get the access token by using a different scope URL, which is mentioned here https://docs.microsoft.com/en-us/azure/active-directory-b2c/add-web-api-application?tabs=app-reg-ga current scope config looks something like this scope :https://${tenantName}.onmicrosoft.com/api/demo.read openid offline_access,

I believe the current option for this is state: true (and that useState is from an earlier v3 beta).

It’s safe to use that option if a particular provider is doing something unexpected.

The only built in Provider I know has a problem with it is Apple.

The token used to verify state is generated is from the csrfToken - if that isn’t being set for any reason then you might run into a problem, but in v3 you shouldn’t be able to start an authorisation flow without csrfToken being set.