An example showcasing the core principles of modern authentication using the Microsoft Identity Platform in Next.js version 14, utilizing MSAL React for client-side requests to Microsoft Graph.
The Microsoft identity platform, incorporating Entra ID (Azure AD) and Azure Azure Active Directory B2C (Azure AD B2C) plays a pivotal role in the Azure cloud ecosystem. This example is designed to showcase the basics of modern authentication within a Nextjs framework, utilising the Microsoft Authentication Library for React (MSAL React).
- Node.js
- Next.js v14.2.16+
- Visual Studio Code
- A modern web browser
- 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.
- Open ./lib/msalConfig.ts in an editor.
- Replace Client and Authority for your created Entra Application Registration.
# Install dependencies from the root of the repo
npm install# Run locally
npm run dev
# Optionally build
npm run build- Open http://localhost:3000 to view in your browser.
- Open http://localhost:3000/profile to view a protected route, that if signed in will display profile information.
