Build: Register App in Entra ID

0/4 steps

✓📚 Read

✓👁 See

✓🎞 Animate

✓🎯 Test

5⚙️ Build

Build Steps

Progress

0/4

◆ Before you start

Prerequisites

Azure Free AccountRequired
Free Entra ID tenant included
Get it ↗
@azure/msal-browserRequired
npm install @azure/msal-browser
Next.js or React appRequired
Any SPA framework works

📋

Step 1 of 4

Register App in Entra ID

Create an App Registration in Azure Entra ID portal. Configure the redirect URI and note the client ID and tenant ID.

Tasks

In Azure Portal: Entra ID → App Registrations → New Registration

Set redirect URI to `https://localhost:3000/auth/callback` (SPA type)

Copy Application (client) ID and Directory (tenant) ID

🎯 What You'll Learn

▸Understand what an App Registration represents
▸Configure redirect URIs correctly
▸Find client ID and tenant ID for MSAL config

Code

TypeScriptsrc/lib/msal-config.ts
1 import { Configuration, BrowserCacheLocation } from '@azure/msal-browser';
2  
3 export const msalConfig: Configuration = {
4   auth: {
5     clientId: process.env.NEXT_PUBLIC_AZURE_CLIENT_ID!,
6     authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_TENANT_ID}`,
7     redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URI ?? 'http://localhost:3000/auth/callback',
8   },
9   cache: {
10     cacheLocation: BrowserCacheLocation.SessionStorage,  // Not localStorage
11     storeAuthStateInCookie: false,
12   },
13 };
14  
15 export const loginRequest = {
16   scopes: ['openid', 'profile', 'email'],
17 };
18

💡 Pro Tips

▸Use "SPA" platform type for browser apps — it enables PKCE and disables client secret requirement
▸Add both localhost and production redirect URIs

Expected Output

App Registration created with client ID and tenant ID visible

Discussion

1 import { Configuration, BrowserCacheLocation } from '@azure/msal-browser'; 2 3 export const msalConfig: Configuration = { 4 auth: { 5 clientId: process.env.NEXT_PUBLIC_AZURE_CLIENT_ID!, 6 authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_TENANT_ID}`, 7 redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URI ?? 'http://localhost:3000/auth/callback', 8 }, 9 cache: { 10 cacheLocation: BrowserCacheLocation.SessionStorage, // Not localStorage 11 storeAuthStateInCookie: false, 12 }, 13 }; 14 15 export const loginRequest = { 16 scopes: ['openid', 'profile', 'email'], 17 }; 18

1	import { Configuration, BrowserCacheLocation } from '@azure/msal-browser';
2
3	export const msalConfig: Configuration = {
4	auth: {
5	clientId: process.env.NEXT_PUBLIC_AZURE_CLIENT_ID!,
6	authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_TENANT_ID}`,
7	redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URI ?? 'http://localhost:3000/auth/callback',
8	},
9	cache: {
10	cacheLocation: BrowserCacheLocation.SessionStorage, // Not localStorage
11	storeAuthStateInCookie: false,
12	},
13	};
14
15	export const loginRequest = {
16	scopes: ['openid', 'profile', 'email'],
17	};
18