Azure AD Authentication in Angular

Hello, friends in this article we will learn how to authentication Azure AD using angular. for Azure AD authentication we are used Microsoft Authentication Library (MSAL). so let’s start,

Step 1: Create your project using the following command.
ng new msal-authentication

Step 2: install MSAL service using the following command.
npm install @azure/msal-browser @azure/msal-angular

Note: in this article i am using “@azure/msal-angular”: “^1.0.0” and “msal”: “^1.3.3” versions

Step 3: Configure the application update the src/app.moules.ts file looks like below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MsalAngularConfiguration, MsalModule, MsalService, MSAL_CONFIG, MSAL_CONFIG_ANGULAR } from '@azure/msal-angular';
import { Configuration } from 'msal';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']]
];

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      clientId: Enter_the_Application_Id_here', // This is your client ID
      authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // This is your tenant ID
      redirectUri: "Enter_the_Redirect_Uri_Here", // This is your redirect URI ex: https://localhost:4200/login
      postLogoutRedirectUri: "Enter_the_Logout_Redirect_Uri_Here", // This is your logout redirect URI ex:https://localhost:4200/logout
    },
    cache: {
      cacheLocation: "localStorage"
    },
  };
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return {
    consentScopes: [
      "user.read",
      "api://{Enter_the_Application_Id_here}/auth"
    ],
    unprotectedResources: [],
    protectedResourceMap,
    extraQueryParameters: {}
  };
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsalModule
  ],
  providers: [{
    provide: MSAL_CONFIG,
    useFactory: MSALConfigFactory
  },
  {
    provide: MSAL_CONFIG_ANGULAR,
    useFactory: MSALAngularConfigFactory,
  },
    MsalService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Now, update the src/app.component.ts file looks like below

import { Component } from '@angular/core';
import { MsalService } from '@azure/msal-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  accountData: any;
  token: string | null = '';
  constructor(
    private msalService: MsalService,
  ) { }

  ngOnInit(): void {
    this.accountData = this.msalService.getAccount(); // get login user account data
    this.token = localStorage.getItem('');
  }

  login() {
    this.msalService.loginRedirect('msal.idtoken');
  }

  logout() {
    this.msalService.logout();
  }
}

Step 5: Now, add login and logout button in src/app.component.html file looks like below

<button *ngIf="!token" (click)="login()">MSAL LOGIN</button>
<button *ngIf="token" (click)="logout()">MSAL LOGOUT</button>

Now, run the application we are able to log in to azure ad with work and school accounts.

I hope this article helps you and you will like it.