MSAL Angualr SPA

Cloud Journey
2 min readMay 31, 2022



We will go over MS sample identity code.

Install Node.js and NPM

Install nvm

For windows, goes to here

For Linux, goes to

Install Latest Node

To install the LTS (long term support version) or “latest”

nvm install latestC:\Users\rquan>nvm install lts
Downloading node.js version 16.15.0 (64-bit)...
Installation complete. If you want to use this version, type#if you encounter any issue, pls ensure to use windows administrator account
nvm use 16.15.0

Install Code

git clone
cd ms-identity-javascript-angular-tutorial
cd 1-Authentication/1-sign-in/SPA
npm install

Configure App Registration

Run powershell as administrator to create app registration.

PS D:\code\ms-identity-javascript-angular-tutorial> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -ForcePS D:\code\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\AppCreationScripts> .\Configure.ps1
Creating the AAD application (msal-angular-spa)
'rqpersonaladmin@<xyz>' added as an application owner to app 'msal-angular-spa'
Done creating the spa application (msal-angular-spa)
Updating the sample code (D:\code\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\AppCreationScripts\..\SPA\src\app\auth-config.ts)

IMPORTANT: Please follow the instructions below to complete a few manual step(s) in the Azure portal :
- For 'spa'
- Navigate to ''
- Navigate to the Manifest page, find the 'replyUrlsWithType' section and change the type of redirect URI to 'Spa'

Running Application

PS D:\code\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA> npm start> ms-identity-angular-c1s1@1.0.0 start
> ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015

Open http://localhost:4200 and click login, after consent, the app shows your name, UPN and OID.

From browser web developer tools, you can check more logging information.




Cloud Journey

All blogs are strictly personal and do not reflect the views of my employer.