Microsoft Entra ID

💡

Microsoft has renamed Azure AD to Microsoft Entra ID, more information about the new name can be found here.

Resources

Setup

Callback URL

https://example.com/api/auth/callback/microsoft-entra-id

https://example.com/auth/callback/microsoft-entra-id

https://example.com/auth/callback/microsoft-entra-id

https://example.com/auth/callback/microsoft-entra-id

Environment Variables

AUTH_MICROSOFT_ENTRA_ID_ID
AUTH_MICROSOFT_ENTRA_ID_SECRET
AUTH_MICROSOFT_ENTRA_ID_ISSUER

Register Application

Log in to the Microsoft Entra admin center.
In the left sidebar, navigate to Identity —> Applications —> App Registrations.
Click on New registration.
Give your application a name. This name will be displayed to the user when they log in.
Select the account types you want to allow to log in. The AUTH_MICROSOFT_ENTRA_ID_ISSUER variable will be based on the selection you make here.
- Single tenant only - Only allow users from your organization.
  https://login.microsoftonline.com/<Directory (tenant) ID>/v2.0
- Miltitenant - Allow users from any organization.
  https://login.microsoftonline.com/organizations/v2.0
- Miltitenant + Personal - Allow any Microsoft account (work, school, personal).
  https://login.microsoftonline.com/common/v2.0
- Personal Only - Only allow personal Microsoft accounts.
  https://login.microsoftonline.com/consumers/v2.0
Set the Redirect URI platform to web and the Callback URI for your application. When developing you will set this to your local host environment (example http://localhost:3000/api/auth/callback/microsoft-entra-id).
From the application overview page copy the Application (client) ID and paste it in the AUTH_MICROSOFT_ENTRA_ID_ID variable.
Navigate to Certificates & secrets and create a new client secret.
Copy the secret value (this will be hidden when you leave this page) and paste it in the AUTH_MICROSOFT_ENTRA_ID_SECRET variable.

Configuration

/auth.ts

import NextAuth from "next-auth"
import MicrosoftEntraID from "next-auth/providers/microsoft-entra-id"
 
const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    MicrosoftEntraID({
      clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID,
      clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
      issuer: process.env.AUTH_MICROSOFT_ENTRA_ID_ISSUER,
    }),
  ],
})

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import MicrosoftEntraID from "@auth/qwik/providers/microsoft-entra-id"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [
      MicrosoftEntraID({
        clientId: import.meta.env.AUTH_MICROSOFT_ENTRA_ID_ID,
        clientSecret: import.meta.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
        issuer: import.meta.env.AUTH_MICROSOFT_ENTRA_ID_ISSUER,
      }),
    ],
  })
)

/src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit"
import MicrosoftEntraID from "@auth/sveltekit/providers/microsoft-entra-id"
import {
  AUTH_MICROSOFT_ENTRA_ID_ID,
  AUTH_MICROSOFT_ENTRA_ID_SECRET,
  AUTH_MICROSOFT_ENTRA_ID_ISSUER,
} from "$env/static/private"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [
    MicrosoftEntraID({
      clientId: AUTH_MICROSOFT_ENTRA_ID_ID,
      clientSecret: AUTH_MICROSOFT_ENTRA_ID_SECRET,
      issuer: AUTH_MICROSOFT_ENTRA_ID_ISSUER,
    }),
  ],
})

/src/app.ts

import { ExpressAuth } from "@auth/express"
import MicrosoftEntraID from "@auth/express/providers/microsoft-entra-id"
 
app.use(
  "/auth/*",
  ExpressAuth({
    providers: [
      MicrosoftEntraID({
        clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID,
        clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
        issuer: process.env.AUTH_MICROSOFT_ENTRA_ID_ISSUER,
      }),
    ],
  })
)

.env.local

AUTH_MICROSOFT_ENTRA_ID_ID="<Application (client) ID>"
AUTH_MICROSOFT_ENTRA_ID_SECRET="<Client secret value>"
AUTH_MICROSOFT_ENTRA_ID_ISSUER="https://login.microsoftonline.com/<Directory (tenant) ID>/v2.0"

Notes

If the issuer paramater is not set it will default to https://login.microsoftonline.com/common/v2.0.
Microsoft Entra 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 Microsoft Graph profilePhoto. The default image size is 48x48 to avoid running out of space in case the session is saved as a JWT.

Medium Naver

Microsoft Entra ID

Resources

Setup

Callback URL

Environment Variables

Register Application

Configuration

Notes

About Auth.js

Download

Acknowledgements