Use-case

Allowing users to log in using their Microsoft Entra credentials.

Why Auth.js?

It is a complete authentication solution. It,

Prerequisites

Azure portal configuration

Register an app

Add credentials

Allow permissions

Read more on here

Create Next.js project

Create a Next.js project by using create-next-app CLI utility that is provided and recommended by Next.js <i>(lets assume your appname is 'tutorial')</i>

npx create-next-app tutorial

Choose the prompts, ensure you have App Router selected as yes. I choose default options.

✔ Would you like to use TypeScript? … No / Yes ==> Yes
✔ Would you like to use ESLint? … No / Yes ==> Yes
✔ Would you like to use Tailwind CSS? … No / Yes ==> No
✔ Would you like your code inside a `src/` directory? … No / Yes ==> No
✔ Would you like to use App Router? (recommended) … No / Yes ==> Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes ==> Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes ==> No

├── tutorial
│   ├── README.md
│   ├── app
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.module.css
│   │   └── page.tsx
│   ├── eslint.config.mjs
│   ├── next-env.d.ts
│   ├── next.config.ts
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── file.svg
│   │   ├── globe.svg
│   │   ├── next.svg
│   │   ├── vercel.svg
│   │   └── window.svg
│   └── tsconfig.json

Configure Microsoft Entra ID integration using Authjs (Next-Auth)

Install Auth.js

npm install next-auth@beta

Setup environment variables

Auth.js encrypts (JWT) tokens, for that it uses cryptographically secure random string which is of at-least 32 characters. It expects that random string to be identified by 'AUTH_SECRET' environment variable. Auth.js provides CLI command to generate it which also adds it to environment file. It does so by,

npx auth secret

This creates secure random string, assigns it to environment variable AUTH_SECRET and adds it to .env.local file. The file will be placed in the directory where the command is executed, so ensure that you execute it in the root folder of your application.

To the .env.local file add other environment variables that are needed.

AUTH_MICROSOFT_ENTRA_ID_ID="<your-client-id>"
AUTH_MICROSOFT_ENTRA_ID_TENANT_ID="https://login.microsoftonline.com/<your-tenant-id>/v2.0"
AUTH_MICROSOFT_ENTRA_ID_SECRET="<your-client-secret>"

You will get the values from Azure portal.

Complete .env.local file should look like

AUTH_SECRET="<random string generated after npx auth secret>"
AUTH_MICROSOFT_ENTRA_ID_ID="<your-client-id>"
AUTH_MICROSOFT_ENTRA_ID_TENANT_ID="https://login.microsoftonline.com/<your-tenant-id>/v2.0"
AUTH_MICROSOFT_ENTRA_ID_SECRET="<your-client-secret>"

Configure auth.ts

auth.ts file is the core of the authentication setup. It defines how Auth.js integrates with providers such as Microsoft Entra ID. It manages authentication, session and token handling.

Steps to Configure

tutorial/auth.ts

import NextAuth from "next-auth";
import MicrosoftEntraID from "@auth/core/providers/microsoft-entra-id";

export const { handlers } = NextAuth({
  providers: [
    MicrosoftEntraID({
      clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID,
      issuer: process.env.AUTH_MICROSOFT_ENTRA_ID_TENANT_ID,
      clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
      authorization: {
        params: {
          scope: "openid profile email User.Read",
        },
      },
    }),
  ],
  secret: process.env.AUTH_SECRET
});

Create Dynamic API Route

In Next.js, authentication requests (e.g., /api/auth/signin, /api/auth/session) need to be handled dynamically. The app/api/auth/[...nextauth]/route.ts file links the routing system to the handlers exported from auth.ts.

Purpose of [...nextauth]

Steps to Configure

app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth";

export const { GET, POST } = handlers;

Test

npm run dev

By following these steps, you’ve successfully configured Microsoft Entra ID as a login provider in your Next.js app using Auth.js!