Type error when using Azure B2C

[renebrummel]

Question 💬

Hi all,

I'm trying to set up next-auth for Azure AD B2C. When I sign in I get this error. Can anyone give me a clue? I'm on version "next-auth": "^4.0.0-next.26"

https://next-auth.js.org/errors#signin_oauth_error Cannot read property 'url' of undefined {
  error: {
    message: "Cannot read property 'url' of undefined",
    stack: "TypeError: Cannot read property 'url' of undefined\n" +
      '    at openidClient (X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\.next\\server\\pages\\api\\auth\\[...nextauth].js:2094:69)\n' +
      '    at getAuthorizationUrl (X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\.next\\server\\pages\\api\\auth\\[...nextauth].js:1799:51)\n' +
      '    at Object.signin (X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\.next\\server\\pages\\api\\auth\\[...nextauth].js:3332:68)\n' +
      '    at NextAuthHandler (X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\.next\\server\\pages\\api\\auth\\[...nextauth].js:1045:31)\n' +
      '    at runMicrotasks (<anonymous>)\n' +
      '    at processTicksAndRejections (internal/process/task_queues.js:94:5)\n' +
      '    at async X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\.next\\server\\pages\\api\\auth\\[...nextauth].js:1094:32\n' +
      '    at async Object.apiResolver (X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\node_modules\\next\\dist\\server\\api-utils.js:101:9)\n' +
      '    at async DevServer.handleApiRequest (X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\node_modules\\next\\dist\\server\\next-server.js:770:9)\n' +
      '    at async Object.fn (X:\\Sync\\Red and Bundle\\Development\\Source Code\\Red.CustomerPortal.Web\\node_modules\\next\\dist\\server\\next-server.js:661:37)',
    name: 'TypeError'
  },

How to reproduce ☕️

Repro by setting up Azure AD B@C with this setup:

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    AzureADB2CProvider({
      tenantName: 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,
      scope: `offline_access openid`,
    }),

Contributing 🙌🏽

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

[balazsorban44]

Hi, could you try to give 4.0.0-beta.2 a shot first?

I also noticed that your scope is defined wrongly. check this comment: #2411 (comment)

I'll make sure this is reflected in the migration guides:
https://next-auth.js.org/getting-started/upgrade-v4#providers

[renebrummel]

Thanks for your reply.

I upgraded to 4.0.0-beta.2 and fixed the scope. Still the same error I'm afraid.

[balazsorban44]

#2524 might be relevant then. I unfortunately haven't tested the provider with the new version.

But the error you are getting is just particularly interesting to me.

it suggests that when accessing authorization.url, authorization is undefined, but it's not.

next-auth/src/providers/azure-ad-b2c.js

Line 10 in 819e97e

url: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}/oauth2/v2.0/authorize`,

Do you have simple reproduction repository i could look at?

[renebrummel]

Sure, you can have a look at the repo. It's a bit rough as I'm still wrapping my head around next and next-auth.

https://github.com/RedAndBundle/Red.CustomerPortal.Web

I'll have a look at #2524, I also need Azure AD for a future project.

[balazsorban44]

I will see if we can register to Azure so we can verify/test our integration (both B2C and AD) and add it to #2524, so both we, and you will gain confidence that it will work in the future as well.

[renebrummel]

That would be great, thanks. Please let me know if you need any help there.

[BenjaminWFox-Lumedic]

The openidClient function in src > server > lib > oauth > client.js looks to be expecting a userinfo property on the provider, which the Azure AD B2C provider doesn't implement.

// ...
    issuer = new Issuer({
      issuer: provider.issuer,
      authorization_endpoint:
        provider.authorization.url ?? provider.authorization,
      token_endpoint: provider.token.url ?? provider.token,
      userinfo_endpoint: provider.userinfo.url ?? provider.userinfo,
    })
// ...

I was able to resolve this error by manually adding to the provider configuration, but I encountered additional downstream errors after that, ending with jwks_uri must be configured on the issuer which I haven't been able to resolve.

The config I tried was:

import NextAuth, { NextAuthOptions } from "next-auth";
import AzureADB2C from "next-auth/providers/azure-ad-b2c"

const jwtSecret = process.env.NEXTAUTH_JWT_SECRET
const appSecret = process.env.NEXTAUTH_APP_SECRET
const signingKey = process.env.NEXTAUTH_SIGNING_KEY
const encryptionKey = process.env.NEXTAUTH_ENCRYPTION_KEY
const tenantName = process.env.AZURE_AD_B2C_TENANT_NAME
const tenantId = process.env.AZURE_AD_B2C_TENANT_ID
const primaryUserFlow = process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW
const scope = `offline_access openid`
const loginFlow = primaryUserFlow

const config = {
  tenantName: 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,
  scope: `offline_access openid`,
  userinfo: {
    url: 'https://graph.microsoft.com/oidc/userinfo'
  },
  idToken: true,
  issuer: `https://${tenantName}.b2clogin.com/${tenantId}/v2.0/`,
  jwks_uri: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${loginFlow}/discovery/v2.0/keys`,
}

const options: NextAuthOptions = {
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60,
  },
  jwt: {
    secret: jwtSecret,
    signingKey,
    encryption: true,
    encryptionKey,
  },
  secret: appSecret,
  providers: [
    AzureADB2C(config),
  ],
}

export default NextAuth(options)

[jrasanen]

I have the same problem as Benjamin.

I don't think its possible to use the userinfo_endpoint with Azure B2C. I guess they have not implemented it, as it's "only" recommended in the spec.

When one tries to access the OAuth2 user endpoint, it throws this message:

This is the provider configuration I had,

AzureADB2C({
  clientId: clientId,
  clientSecret: clientSecret,
  tenantName: tenantName,
  primaryUserFlow: userFlow,
  wellKnown: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/B2C_1_signupsignin/v2.0/.well-known/openid-configuration`,
  issuer: `https://${tenantName}.b2clogin.com/${tenantId}/v2.0/`,
  jwks_uri:
    'https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/b2c_1_signupsignin/discovery/v2.0/keys',
  userinfo: {
    url: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${userFlow}/openid/v2.0/userinfo`,
  },
} as any)

And with this throws an error TypeError: userinfo_endpoint must be configured on the issuer

[balazsorban44]

Only setting wellKnown or issuer should be enough, as any other information is usually extracted from there by openid-client.
See how the spec defines it: https://openid.net/specs/openid-connect-discovery-1_0.html#ProviderConfigurationResponse

One of these could actually be enough:

AzureADB2C({
  clientId: clientId,
  clientSecret: clientSecret,
  issuer: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/B2C_1_signupsignin/v2.0`
})

or

AzureADB2C({
  clientId: clientId,
  clientSecret: clientSecret,
  tenantName
})

I could probably fix this quickly if someone could offer us a test client in Azure B2C with a single user, that I could use to test it locally! I tried registering to Azure myself, but it's a hassle and requires a phone number, bank card, etc...

We could add your company to our support section: https://github.com/nextauthjs/next-auth/tree/beta#support

[jrasanen]

@balazsorban44 I can help you with that for sure this week during EU work hours. Contact me anytime: jussi.rasanen@reaktor.com or Signal IM: +358451537650

[BenjaminWFox]

@balazsorban44 If you still need help with this let me know. I'm around PST times, benjaminwfox at gmail/twitter/discord#5986

[BenjaminWFox]

Another followup on this. I was successfully able to log in to the Azure AD B2C provider with the v4 beta codebase. The major caveat being that I needed to use Custom Policies, which is a much more complicated initial setup (although it does afford a lot of power and flexibility down the line).

I've submitted a PR since I think it's a little easier to see the changes I made to accomplish this:
#2860

[balazsorban44]

Wrote you on Twitter, @BenjaminWFox!

[balazsorban44]

Fixed in #2862

A new release will follow soon-ish, until then you can see the default config file for an idea how to do custom configurations:

https://github.com/nextauthjs/next-auth/blob/488776c51b6ba0263eb75374e98ead88fbe2c2b6/src/providers/azure-ad-b2c.ts