or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

authentication-service.mdcomponents-module.mdevent-broadcasting.mdhttp-interceptor.mdindex.mdroute-protection.md
tile.json

index.mddocs/

MSAL Angular

MSAL Angular is the official Angular wrapper library for Microsoft Authentication Library (MSAL) that enables Angular applications to authenticate users using Azure Active Directory, Microsoft personal accounts, and social identity providers through Azure AD B2C. Built on top of @azure/msal-browser, it provides Angular-specific services, guards, interceptors, and components for seamless authentication integration.

Package Information

  • Package Name: @azure/msal-angular
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @azure/msal-angular @azure/msal-browser

Core Imports

import { 
  MsalModule, 
  MsalService, 
  MsalGuard, 
  MsalInterceptor,
  MsalBroadcastService,
  MsalRedirectComponent,
  MSAL_INSTANCE
} from "@azure/msal-angular";

For dependency injection configuration:

import { 
  MsalGuardConfiguration, 
  MsalInterceptorConfiguration,
  MSAL_GUARD_CONFIG,
  MSAL_INTERCEPTOR_CONFIG
} from "@azure/msal-angular";

Basic Usage

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { 
  MsalModule, 
  MsalService, 
  MsalGuard, 
  MsalInterceptor,
  MsalGuardConfiguration,
  MsalInterceptorConfiguration,
  MSAL_INSTANCE,
  MSAL_GUARD_CONFIG,
  MSAL_INTERCEPTOR_CONFIG
} from "@azure/msal-angular";

// MSAL configuration
const msalInstance = new PublicClientApplication({
  auth: {
    clientId: "your-client-id",
    authority: "https://login.microsoftonline.com/your-tenant-id",
    redirectUri: window.location.origin
  }
});

const guardConfig: MsalGuardConfiguration = {
  interactionType: InteractionType.Redirect,
  authRequest: {
    scopes: ["user.read"]
  }
};

const interceptorConfig: MsalInterceptorConfiguration = {
  interactionType: InteractionType.Redirect,
  protectedResourceMap: new Map([
    ["https://graph.microsoft.com/v1.0/me", ["user.read"]]
  ])
};

@NgModule({
  imports: [
    BrowserModule,
    MsalModule
  ],
  providers: [
    { provide: MSAL_INSTANCE, useValue: msalInstance },
    { provide: MSAL_GUARD_CONFIG, useValue: guardConfig },
    { provide: MSAL_INTERCEPTOR_CONFIG, useValue: interceptorConfig },
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true },
    MsalService,
    MsalGuard
  ]
})
export class AppModule { }

Architecture

MSAL Angular is built around several key components:

  • Core Services: MsalService provides authentication operations, MsalBroadcastService handles events and interaction status
  • Route Protection: MsalGuard protects routes requiring authentication
  • HTTP Integration: MsalInterceptor automatically attaches tokens to HTTP requests
  • Component Support: MsalRedirectComponent handles authentication redirects
  • Module System: MsalModule provides comprehensive Angular module integration
  • Custom Navigation: MsalCustomNavigationClient optimizes single-page app navigation

Capabilities

Authentication Service

Core authentication functionality providing login, logout, token acquisition, and user account management through Angular services.

class MsalService implements IMsalService {
  instance: IPublicClientApplication;
  
  initialize(): Observable<void>;
  loginPopup(request?: PopupRequest): Observable<AuthenticationResult>;
  loginRedirect(request?: RedirectRequest): Observable<void>;
  acquireTokenSilent(silentRequest: SilentRequest): Observable<AuthenticationResult>;
  acquireTokenPopup(request: PopupRequest): Observable<AuthenticationResult>;
  acquireTokenRedirect(request: RedirectRequest): Observable<void>;
  logoutRedirect(logoutRequest?: EndSessionRequest): Observable<void>;
  logoutPopup(logoutRequest?: EndSessionPopupRequest): Observable<void>;
  handleRedirectObservable(hash?: string): Observable<AuthenticationResult>;
  ssoSilent(request: SsoSilentRequest): Observable<AuthenticationResult>;
  getLogger(): Logger;
  setLogger(logger: Logger): void;
}

Authentication Service

Route Protection

Route guard system for protecting Angular routes and ensuring user authentication before navigation.

class MsalGuard implements CanActivate, CanActivateChild, CanMatch {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree>;
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree>;
  canMatch(): Observable<boolean | UrlTree>;
}

interface MsalGuardConfiguration {
  interactionType: InteractionType.Popup | InteractionType.Redirect;
  authRequest?: MsalGuardAuthRequest | ((authService: MsalService, state: RouterStateSnapshot) => MsalGuardAuthRequest);
  loginFailedRoute?: string;
}

Route Protection

HTTP Token Interceptor

HTTP interceptor that automatically attaches authentication tokens to outgoing requests based on protected resource configuration.

class MsalInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
}

interface MsalInterceptorConfiguration {
  interactionType: InteractionType.Popup | InteractionType.Redirect;
  protectedResourceMap: Map<string, Array<string | ProtectedResourceScopes> | null>;
  authRequest?: MsalInterceptorAuthRequest | ((msalService: MsalService, req: HttpRequest<unknown>, originalAuthRequest: MsalInterceptorAuthRequest) => MsalInterceptorAuthRequest);
}

HTTP Token Interceptor

Event Broadcasting

Service for broadcasting MSAL events and tracking interaction status throughout the authentication lifecycle.

class MsalBroadcastService {
  msalSubject$: Observable<EventMessage>;
  inProgress$: Observable<InteractionStatus>;
  
  resetInProgressEvent(): void;
}

interface MsalBroadcastConfiguration {
  eventsToReplay: number;
}

Event Broadcasting

Components and Module System

Angular components and module configuration for complete MSAL integration including redirect handling and dependency injection setup.

@Component({
  selector: 'app-redirect',
  template: ''
})
class MsalRedirectComponent implements OnInit {
  ngOnInit(): void;
}

class MsalModule {
  static forRoot(
    msalInstance: IPublicClientApplication, 
    guardConfig: MsalGuardConfiguration, 
    interceptorConfig: MsalInterceptorConfiguration
  ): ModuleWithProviders<MsalModule>;
}

Components and Module System

Core Types

// Core types from @azure/msal-browser (imported peer dependency)
interface SsoSilentRequest {
  scopes: Array<string>;
  loginHint?: string;
  sid?: string;
  account?: AccountInfo;
  extraQueryParameters?: StringDict;
  claims?: string;
  authority?: string;
  correlationId?: string;
}

interface Logger {
  error(message: string, correlationId?: string): void;
  errorPii(message: string, correlationId?: string): void;
  warning(message: string, correlationId?: string): void;
  warningPii(message: string, correlationId?: string): void;
  info(message: string, correlationId?: string): void;
  infoPii(message: string, correlationId?: string): void;
  verbose(message: string, correlationId?: string): void;
  verbosePii(message: string, correlationId?: string): void;
  trace(message: string, correlationId?: string): void;
  tracePii(message: string, correlationId?: string): void;
  clone(name: string, version: string): Logger;
}

// Injection tokens for dependency injection
const MSAL_INSTANCE: InjectionToken<string>;
const MSAL_GUARD_CONFIG: InjectionToken<string>;
const MSAL_INTERCEPTOR_CONFIG: InjectionToken<string>;
const MSAL_BROADCAST_CONFIG: InjectionToken<string>;

// Union types for authentication requests
type MsalGuardAuthRequest = Partial<PopupRequest> | Partial<Omit<RedirectRequest, "redirectStartPage">>;
type MsalInterceptorAuthRequest = Omit<PopupRequest, "scopes"> | Omit<RedirectRequest, "scopes"> | Omit<SilentRequest, "scopes">;

// Protected resource configuration
interface ProtectedResourceScopes {
  httpMethod: string;
  scopes: Array<string> | null;
}

// Navigation client for custom routing
class MsalCustomNavigationClient extends NavigationClient {
  navigateInternal(url: string, options: NavigationOptions): Promise<boolean>;
}

// Package version constant
const version: string;