How to integrate Azure AD with Angular application-A Step-by-Step Guide

Implementing Azure AD Authentication in an Angular App

Are you looking to secure your Angular app with Azure AD authentication? In this comprehensive guide, we’ll walk you through the process of configuring Azure AD authentication in your Angular app. By leveraging the power of Microsoft Authentication Library (MSAL) for Angular, you can easily enable secure sign-in, protect routes, and access protected APIs. Follow our step-by-step instructions and code examples to get your Angular app up and running with Azure AD authentication in no time. Below are the steps to integrate AzureAd in Angular app

1. Create an Azure AD App Registration:

   • Go to the Azure portal and navigate to Azure Active Directory.
   • Create a new App Registration.
   • Configure the required properties such as name, redirect URI, etc.
   • Take note of the Application (client) ID and Tenant ID.

2. Configure Authentication in Angular:

   • Install the @azure/msal-angular library in your Angular app.
   • Create a configuration file to specify the Azure AD settings (client ID, authority, etc.).
   • Import the MsalModule and configure it with the provided settings.
   • Use the MsalGuard to protect your app’s routes.

3. Implement Login and Logout Functionality:

   • Create a login component with a login button that triggers the authentication process.
   • Use the MsalService to handle the authentication flow, including redirecting the user to the Azure AD login page and obtaining tokens.
   • Implement a logout function that clears the user’s session.

4. Secure API Calls:

   • Use the obtained access token to authenticate API calls to your backend services.
   • Attach the access token to the Authorization header of your HTTP requests.

Here’s a sample code snippet for configuring Azure AD authentication in an Angular app:

1. Install the required packages:

npm install @azure/msal-angular msal

2. Create an auth-config.ts file to define the Azure AD configuration:

export const authConfig = {
  clientId: 'YOUR_CLIENT_ID',
  authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
  redirectUri: 'http://localhost:4200',
  postLogoutRedirectUri: 'http://localhost:4200',
  scopes: ['openid', 'profile', 'api://your-api-scope/access'],
};

3. In the app.module.ts file, configure the MsalModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { authConfig } from './auth-config';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    MsalModule.forRoot({
      auth: {
        clientId: authConfig.clientId,
        authority: authConfig.authority,
        redirectUri: authConfig.redirectUri,
      },
      cache: {
        cacheLocation: 'localStorage',
      },
    }),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

4. Protect routes using MsalGuard in the app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', component: ProfileComponent, canActivate: [MsalGuard] },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

5. Implement login and logout functionality in a component:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="login()">Login</button>
    <button (click)="logout()">Logout</button>
  `,
})
export class AppComponent {
  constructor(private authService: MsalService) {}

  login() {
    this.authService.loginPopup();
  }

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

This is a simplified example to demonstrate the basic configuration of Azure AD authentication in an Angular app. You would need to adapt the code according to your specific requirements and integrate it with your backend APIs.

Remember to replace YOUR_CLIENT_ID and YOUR_TENANT_ID with your actual Azure AD client ID and tenant ID.

Please note that this is just a starting point, and you should refer to the official documentation of the @azure/msal-angular library and Azure AD for a more comprehensive understanding of the configuration options and security best practices.

Here is the sequence diagram illustrating the authentication flow in an Angular app using Azure AD:

This diagram illustrates the interaction between the user, the Angular app, and Azure AD during the login and logout processes. It showcases the flow of requests and responses involved in authentication and token validation.