Skip to main content
Version: v4

Azure Active Directory B2C

Documentation#

https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-auth-code-flow

Configuration#

https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-tenant

Options#

The Azure Active Directory Provider comes with a set of default options:

You can override any of the options to suit your own use case.

Configuration (Basic)#

Basic configuration sets up Azure AD B2C to return an ID Token. This should be done as a prerequisite prior to running through the Advanced configuration.

Step 1: Azure AD B2C Tenant https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant

Step 2: App Registration https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-register-applications

Step 3: User Flow https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-user-flows

Note: For the step "User attributes and token claims" you might minimally:

  • Collect attribute:
    • Email Address
    • Display Name
    • Given Name
    • Surname
  • Return claim:
    • Email Addresses
    • Display Name
    • Given Name
    • Surname
    • Identity Provider
    • Identity Provider Access Token
    • User's Object ID

Example#

In .env.local create the following entries:

AZURE_AD_B2C_TENANT_NAME=<copy the B2C tenant name here from Step 1>AZURE_AD_B2C_CLIENT_ID=<copy Application (client) ID here from Step 2> AZURE_AD_B2C_CLIENT_SECRET=<copy generated secret value here from Step 2>AZURE_AD_B2C_PRIMARY_USER_FLOW=<copy the name of the signin user flow you created from Step 3>

In pages/api/auth/[...nextauth].js find or add the AZURE_AD_B2C entries:

import AzureADB2CProvider from 'next-auth/providers/azure-ad-b2c';...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`,  }),]...

Configuration (Advanced)#

Advanced configuration sets up Azure AD B2C to return an Authorization Token. This builds on the steps completed in the Basic configuration above.

Step 4: Add a Web API application https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-single-page-app-webapi?tabs=app-reg-ga

Note: this is a second app registration (similar to Step 2) but with different setup and configuration.

Example#

Nothing in .env.local needs to change here. The only update is in pages/api/auth/[...nextauth].js where you will need to add the additional scopes that were created in Step 4 above:

import AzureADB2CProvider from 'next-auth/providers/azure-ad-b2c';...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: `https://${process.env.AZURE_AD_B2C_TENANT_NAME}.onmicrosoft.com/api/demo.read https://${process.env.AZURE_AD_B2C_TENANT_NAME}.onmicrosoft.com/api/demo.write offline_access openid`,  }),]...