React single-page application using MSAL React to authenticate users against Microsoft Entra ID

This example highlights how to use Microsoft Entra for modern authentication with Next.js and MSAL React, enabling seamless client-side integration with Microsoft Graph.

Sample Prerequisites

• Node.js
• Next.js v14.2.16+
• Visual Studio Code
• A modern web browser

Recommendations

• Next.js by Vercel framework documentation.
• Microsoft Authentication Library (MSAL) for JS
• Fluent UI The official front-end framework for building experiences that fit seamlessly into Microsoft 365.
• Dev Fluent UI the developer resource.
• SWR by Vercel React Hooks for Data Fetching

ℹ️ "SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data."

• jwt.ms for inspecting your tokens.
• SPA developers: Migrate implicit to auth code flow with PKCE
• Follow the Entra ID Blog to stay up-to-date with the latest developments.

Configure the application

• Open ./lib/msalConfig.ts in an editor.
• Replace Client and Authority for your created Entra Application Registration.

Installing dependencies

# Install dependencies from the root of the repo
npm install

Running the application

# Run locally
npm run dev

# Optionally build
npm run build

1. Open http://localhost:3000 to view in your browser.
2. Open http://localhost:3000/profile to view a protected route, that if signed in will display profile information.

Screenshots

Pending Sign In

Sign In