React SPA with MSAL for Microsoft Entra ID Authentication

This quickstart demonstrates how to authenticate users in a React Single-Page Application (SPA) using the Microsoft Authentication Library (msal-react) with Microsoft Entra ID, and how to access data securely via the Microsoft Graph API.

⭐ Like this project?

If you find this repository useful, please give it a star!

⚙️ Tech Stack

Category	Technology
Framework	Next.js 15.3.2
Language	TypeScript
Authentication	MSAL React
Identity	Microsoft Entra ID
API	Microsoft Graph API
UI Framework	Fluent UI
Auth Flow	Authorization Code Flow with PKCE
Data Retrieval	SWR

Quickstart Prerequisites

• Node.js
• Next.js v15.3.2+
• Visual Studio Code
• A modern web browser

📁 Notable Files

• app/layout.tsx – Root layout that wraps the app
• components/AppClientShell.tsx – The main client-side layout wrapper for the application. It sets up MSAL authentication, Fluent UI theming, and the core layout structure including the navigation bar and sidebar. It also handles client-side hydration with a loading overlay before rendering the app content
• lib/msal/config.ts – Defines the MSAL configuration used for authentication, including clientId, authority, and scopes.
  💡 If you're building your own application, this is where you'd replace the clientId with your own App Registration ID.
• lib/msal/instance.ts – Exports a singleton PublicClientApplication instance
• lib/msal/helper.ts – Helper functions for sign-in, sign-out, and token acquisition
• lib/msgraph/endpoints.ts - The Microsoft Graph API endpoints that may be called
• lib/msgraph/fetcher.ts - A typed fetcher function that performs authenticated GET requests to Microsoft Graph. It attaches a bearer token, handles response types (JSON, blob, image), and supports automatic pagination for OData @odata.nextLink responses.
• lib/msgraph/helper.ts - Retrieves a Microsoft Graph access token using silent authentication with fallback to redirect if user interaction is required. Automatically sets the active account if one is not already set.

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/me to view a protected route, that if signed in will display profile information.