how to integrate Microsoft Azure Authetication in angular SPA with adal.js?

it is very common to use Azure authentication to authenticate the user access in the SPA.

it is not hard to setup a sample app running if we follow the steps below.

1. install anulgar/CLI

    npm i @angular/CLI 


2. install angular-adal

    npm i angular-adal

3 . install type definition of adal

    npm i @type/adal --save

4. install type script libary

    npm i tslib

5. finally install the microsoft-adal-angular6 package

    npm i microsoft-adal-angular6 
 
6. now you can following the example from this link

https://www.npmjs.com/package/microsoft-adal-angular6

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule,

MsAdalAngular6Module.forRoot({

tenant: 'tennat guid id from azure active directory',

clientId: 'the app id registered in the cloud',

// redirectUri: window.location.origin,

// endpoints: {

// "https://localhost/Api/": "xxx-bae6-4760-b434-xxx"

// },

navigateToLoginRequestUrl: false,

cacheLocation: 'localStorage',

})

],

providers: [AuthenticationGuard],

bootstrap: [AppComponent]

})

here is the screen shot showing the path to get the Tenant ID

you can find your app client ID from this image

actually we can find both tenant ID and client ID after you click on the MyADAuthApp 

in the app registrations section.

 now we can launch the SPA with ng-serve to run the app, and type http://localhost:4200

 it will direct to the azure authentication login screen