Azure Active Directory

note

Azure Active Directory returns the following fields on Account:

• token_type (string)
• expires_in (number)
• ext_expires_in (number)
• access_token (string).

Remember to add these fields to your database schema, in case if you are using an Adapter.

Documentation

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

Configuration

https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app

Example

To allow specific Active Directory users access:

• In https://portal.azure.com/ search for "Microsoft Entra ID", and select your organization.
• Next, in the left menu expand the "Manage" accordion and then go to "App Registration" , and create a new one.
• Pay close attention to "Who can use this application or access this API?"
  • This allows you to scope access to specific types of user accounts
  • Only your tenant, all azure tenants, or all azure tenants and public Microsoft accounts (Skype, Xbox, Outlook.com, etc.)
• When asked for a redirection URL, select the platform type "Web" and use https://yourapplication.com/api/auth/callback/azure-ad or for development http://localhost:3000/api/auth/callback/azure-ad.
• After your App Registration is created, under "Client Credential" create your Client secret.
• Now copy your:
  • Application (client) ID
  • Directory (tenant) ID
  • Client secret (value)

In .env.local create the following entries:

AZURE_AD_CLIENT_ID=<copy Application (client) ID here>
AZURE_AD_CLIENT_SECRET=<copy generated client secret value here>
AZURE_AD_TENANT_ID=<copy the tenant id here>

That will default the tenant to use the common authorization endpoint. However, if you've configured your app as multi-tenant, users outside of your tenant will only be able to log in if you've configured them as external users within Azure. For more details see here.

When you see ResourceNotFound error code while accessing an API, make sure to use the correct tenant ID. For instance, when the intended access is for a personal account, the tenant ID should not be provided. :::

note

Azure AD returns the profile picture in an ArrayBuffer, instead of just a URL to the image, so our provider converts it to a base64 encoded image string and returns that instead. See: https://docs.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0#examples. The default image size is 48x48 to avoid running out of space in case the session is saved as a JWT.

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

import AzureADProvider from "next-auth/providers/azure-ad";

...
providers: [
  AzureADProvider({
    clientId: process.env.AZURE_AD_CLIENT_ID,
    clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
    tenantId: process.env.AZURE_AD_TENANT_ID,
  }),
]
...

To allow users from any tenant access without adding them as "external users":

• In https://portal.azure.com/ search for "Microsoft Entra ID", and select your organization.
• Next, in the left menu expand the "Manage" accordion and then go to "App Registration" , and create a new one.
• Pay close attention to "Who can use this application or access this API?"
  • You'll want to select either all azure tenants (i.e., work and school accounts), or all azure tenants and public Microsoft accounts (Skype, Xbox, Outlook.com, etc.)
• When asked for a redirection URL, select the platform type "Web" and use https://yourapplication.com/api/auth/callback/azure-ad or for development http://localhost:3000/api/auth/callback/azure-ad.
• After your App Registration is created, under "Client Credential" create your Client secret.
• Now copy your:
  • Application (client) ID
  • Client secret (value)

In .env.local create the following entries:

AZURE_AD_CLIENT_ID=<copy Application (client) ID here>
AZURE_AD_CLIENT_SECRET=<copy generated client secret value here>

That will default to use the common authorization endpoint. This means that users from tenants other than your own will be able to sign up and/or log in to your app, which is often the case if you're building a SaaS. For more details see here.

note

Azure AD returns the profile picture in an ArrayBuffer, instead of just a URL to the image, so our provider converts it to a base64 encoded image string and returns that instead. See: https://docs.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0#examples. The default image size is 48x48 to avoid running out of space in case the session is saved as a JWT.

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

import AzureADProvider from "next-auth/providers/azure-ad";

...
providers: [
  AzureADProvider({
    clientId: process.env.AZURE_AD_CLIENT_ID,
    clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
  }),
]
...