How to use MSAL Angular 8 for authenticating Users
Angular is a platform for building mobile and desktop web applications by creating rich Internet Application and offers its developers a client-side application.
In this post, we are going to look how to authenticate Angular application by signing in with personal accounts or work accounts using MSAL library.
What is MSAL?
MSAL (Microsoft Security Authentication Library) is a client-side js library that authenticate users and fetch access token to access Microsoft Graph.
What is Microsoft Graph?
It is an API that can be used to connect to Office 365 services.
Prerequisites: -
1. Download Node.js in case it is not installed on your machine from https://nodejs.org/en/.
2. Angular cli is required to create projects, generate components and buiding and testing.
Install angular cli using the below command in node js command prompt:-npm install -g @angular/cli
Steps to implement MSAL in angular: -
Step 1: Create new Angular project.
Command to create new project: ng new projectName
Step 2: Create new component in the project.
Command to create new component: ng g c home
Step 3: Install msal angular in the project.
npm install msal @azure/msal-angular
Step 4: Register the Angular application on Azure portal (https://portal.azure.com/) and get the client id and tenant id of the application.
Step 5: Add Msal config details in app.module.ts file
We have installed the msal library in our project. And also registered the application in azure portal through which we got the client id and tenant id. Now we will add the MsalModule in the imports section of @NgModule as per the screenshot given below.
a) After adding MsalModule.forRoot we will get the error “Cannot find the MsalModule”; so import the MsalModule by adding:-
import { MsalModule, MsalInterceptor } from ‘@azure/msal-angular’;
b) Enter the clientId from the registered application on the azure portal.
c) Enter the authority as https://login.microsoftonline.com/tenantId and replace the tenantId from the registered application on the azure portal.
d) redirectUri will be the application URL or you can put as window.location.href.
e) Next section in MsalModule is cache. There are two methods of storage for Msal i.e. localStorage and sessionStorage. In cachelocation we can add one of the method.
f) storeAuthStateInCookie: This flag was introduced in MSAL.js v0.2.2 as a fix for the authentication loop issues on Microsoft Internet Explorer and Microsoft Edge. Enable the flag storeAuthStateInCookie to true to take advantage of this fix. When this is enabled, MSAL.js will store the auth request state required for validation of the auth flows in the browser cookies. By default this flag is set to false.
Hence, in the above screenshot if browser is IE then it is set to true else false.
g) MSAL Angular allows you to add an Http interceptor (MsalInterceptor) in the app.module.ts as shown in the screenshot above. MsalInterceptor will obtain tokens and add them to all your Http requests in API calls listed in protectedResourceMap.
h) Next is the consentscopes attribute. The Microsoft identity platform implementation of OpenID Connect has a few well-defined scopes that are hosted on the Microsoft Graph: openid, email, profile and offline_access.
You can refer the link https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent.
Step 6: Add the below code in app.component.ts
Step 7: Add the below code in app.component.html
<button class=”loginAuth” (click)=”login()”>Login</button>
<button (click)=”logout()”>Logout</button>
On click of the button, the login function will be called from app.component.html.
The loginRedirect() will be used to Sign in the user.
The logout() is to sign out the user.
Step 8: To secure the routes in the application, add the code in the app-routing.module.ts file
We can add authentication to secure specific routes in your application by adding canActivate:[MsalGuard] to the route definition.
Step 9: To get the user profile, add a component profile for which we have added MsalGuard in the app-routing.module.ts file.
In this way, we can make the user sign in and authenticate using MSAL library in angular.