Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions msal-javascript-conceptual/TOC.yml
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,10 @@
href: angular/v1-V2-upgrade-guide.md
- name: Upgrade from MSAL Angular 2.x to MSAL Angular 3.x
href: angular/v2-v3-upgrade-guide.md
- name: Upgrade from MSAL Angular 3.x to MSAL Angular 4.x
href: angular/v3-v4-upgrade-guide.md
- name: Upgrade from MSAL Angular 4.x to MSAL Angular 5.x
href: angular/v4-v5-upgrade-guide.md
- name: MSAL Node
items:
- name: Initialize public client applications
Expand Down Expand Up @@ -154,6 +158,10 @@
href: node/key-vault-managed-identity.md
- name: Migrate Node.js apps from ADAL to MSAL
href: node/migration.md
- name: Migrate from MSAL Node v3 to v5
href: node/v5-migration.md
- name: Use managed identity with MSAL Node
href: node/managed-identity.md
- name: MSAL Node FAQs
href: node/faq.md
- name: MSAL React
Expand Down
7 changes: 3 additions & 4 deletions msal-javascript-conceptual/angular/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ manager: Dougeby
ms.service: msal
ms.subservice: msal-angular
ms.topic: article
ms.date: 05/21/2025
ms.date: 03/06/2026
ms.author: dmwendia
ms.reviewer: cwerner, owenrichards, kengaderdus
#Customer intent: As a developer, I want to configure MSAL Angular so that I can integrate authentication into my Angular application.
---

# MSAL Angular Configuration
Expand Down Expand Up @@ -36,7 +37,7 @@ Please see our [MsalInterceptor](msal-interceptor.md) and [MsalGuard](msal-guard

We recommend importing `MsalRedirectComponent` and bootstrapping with the `AppComponent` if you intend to use redirects. Please see the [redirect documentation](redirects.md) for more details.

**Note:** As of MSAL v3.x, initialization of the application object is now required. See the [v2-v3 upgrade guide](v2-v3-upgrade-guide.md) for more details.
**Note:** As of MSAL v3.x, initialization of the application object is now required. See the [v2-v3 upgrade guide](v2-v3-upgrade-guide.md) for more details. For details on upgrading to MSAL Angular v5, see the [v4-v5 upgrade guide](v4-v5-upgrade-guide.md).

## MsalModule.forRoot

Expand All @@ -59,11 +60,9 @@ import { PublicClientApplication, InteractionType, BrowserCacheLocation } from "
authority: "https://login.microsoftonline.com/common/",
redirectUri: "http://localhost:4200/",
postLogoutRedirectUri: "http://localhost:4200/",
navigateToLoginRequestUrl: true,
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: true, // Deprecated, will be removed in the next major version
},
system: {
loggerOptions: {
Expand Down
54 changes: 53 additions & 1 deletion msal-javascript-conceptual/angular/msal-interceptor.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ manager: Dougeby
ms.service: msal
ms.subservice: msal-angular
ms.topic: how-to
ms.date: 05/21/2025
ms.date: 03/06/2026
ms.author: dmwendia
ms.reviewer: cwerner, owenrichards, kengaderdus
#Customer intent: As a developer, I want to configure the MSAL Interceptor so that my Angular app automatically acquires tokens for protected API calls.
---

# MSAL Interceptor
Expand Down Expand Up @@ -159,6 +160,57 @@ Other things to note regarding the `protectedResourceMap`:
* **Wildcards**: `protectedResourceMap` supports using `*` for wildcards. When using wildcards, if multiple matching entries are found in the `protectedResourceMap`, the first match found will be used (based on the order of the `protectedResourceMap`).
* **Relative paths**: If there are relative resource paths in your application, you may need to provide the relative path in the `protectedResourceMap`. This also applies to issues that may arise with ngx-translate. Be aware that the relative path in your `protectedResourceMap` may or may not need a leading slash depending on your app, and may need to try both.

### Strict Matching (`strictMatching`)

In msal-angular v5, URL component pattern matching for `protectedResourceMap` entries uses strict matching semantics by default. The `strictMatching` field on `MsalInterceptorConfiguration` controls this behavior.

#### What strict matching changes

| Behavior | Legacy (`strictMatching: false`) | Strict (default in v5) |
|-----------|----------------------------------|------------------------|
| Metacharacter escaping | `.` and other regex metacharacters are **not** escaped; they act as regex operators | All metacharacters (including `.`) are treated as **literals** |
| Anchoring | Pattern may match anywhere within the string | Pattern must match the **full string** (`^…$`) |
| Host wildcard (`*`) | `*` matches any character sequence, including `.` | `*` matches any character sequence that does **not** include `.` (wildcards stay within a single DNS label) |
| Path/search/hash wildcard (`*`) | `*` matches any character sequence | `*` matches any character sequence (unchanged) |
| `?` character | Passed through to the underlying regex | Treated as a **literal** `?` (URL query-string separator, not a wildcard) |

With strict matching (the v5 default):
- A pattern like `*.contoso.com` matches `app.contoso.com` but **not** `a.b.contoso.com` (wildcard cannot span dot separators).
- A pattern like `https://graph.microsoft.com/v1.0/me` matches only that exact URL.

#### Default behavior in v5 (no configuration needed)

Strict matching is enabled by default. No additional configuration is required:

```javascript
{
interactionType: InteractionType.Redirect,
protectedResourceMap: new Map([
["https://*.contoso.com/api", ["contoso.scope"]],
["https://graph.microsoft.com/v1.0/me", ["user.read"]]
])
// strictMatching defaults to true in v5
}
```

#### Opting out to legacy matching

If your patterns rely on the looser matching from v4, you can set `strictMatching: false` to retain the legacy behavior temporarily:

> [!NOTE]
> Legacy matching (`strictMatching: false`) is provided for backwards compatibility and may be removed in a future major version. We recommend updating your `protectedResourceMap` patterns to work with strict matching.

```javascript
{
interactionType: InteractionType.Redirect,
protectedResourceMap: new Map([
["https://*.contoso.com/api", ["contoso.scope"]],
["https://graph.microsoft.com/v1.0/me", ["user.read"]]
]),
strictMatching: false // Use legacy matching for backwards compatibility
}
```

### Optional authRequest

For more information on the optional `authRequest` that can be set in the `MsalInterceptorConfiguration`, please see our [multi-tenant doc here](multi-tenant.md#dynamic-auth-request).
Expand Down
91 changes: 84 additions & 7 deletions msal-javascript-conceptual/angular/redirects.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,33 @@ manager: Dougeby
ms.service: msal
ms.subservice: msal-angular
ms.topic: concept-article
ms.date: 05/21/2025
ms.date: 03/06/2026
ms.author: dmwendia
ms.reviewer: cwerner, owenrichards, kengaderdus
#Customer intent: As a developer, I want to handle redirects correctly in my MSAL Angular application so that authentication works seamlessly.
---

# Using redirects in MSAL Angular

When using redirects with MSAL, it is **mandatory** to handle redirects with either the `MsalRedirectComponent` or `handleRedirectObservable`. While we recommend `MsalRedirectComponent` as the best approach, both approaches are detailed below.
When using redirects with MSAL, it is **mandatory** to handle redirects with either the `MsalRedirectComponent` or `handleRedirectObservable`.

Note that specific guidance has been added for using MSAL Angular with Angular standalone components below.

1. [`MsalRedirectComponent`](#1-msalredirectcomponent-a-dedicated-handleredirectobservable-component)
1. [Subscribing to `handleRedirectObservable` manually](#2-subscribing-to-handleredirectobservable-manually)
1. [Redirects with standalone components](#3-redirects-with-standalone-components)

## 1. `MsalRedirectComponent`: A dedicated `handleRedirectObservable` component

> [!NOTE]
> This approach is not compatible with Angular standalone components. See the section on [redirects with standalone components below](#3-redirects-with-standalone-components) for further guidance.

This is our recommended approach for handling redirects:

- `@azure/msal-angular` provides a dedicated redirect component that can be imported into your application. We recommend importing the `MsalRedirectComponent` and bootstrapping this alongside `AppComponent` in your application on the `app.module.ts`, as this will handle all redirects without your components needing to subscribe to `handleRedirectObservable()` manually.
- Pages that wish to perform functions following redirects (e.g. user account functions, UI changes, etc) should subscribe to the `inProgress$` observable, filtering for `InteractionStatus.None`. This will ensure that there are no interactions in progress when performing the functions. Note that the last / most recent `InteractionStatus` will also be available when subscribing to the `inProgress$` observable. Please see our documentation on [events](events.md#the-inprogress-observable) for more information on checking for interactions.
- If you do not wish to use the `MsalRedirectComponent`, you **must** handle redirects with `handleRedirectObservable()` yourself, as laid out in the approach below.
- See our [Angular 15 sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v3-samples/angular15-sample-app/src/app/app.module.ts#L110) for an example of this approach.
- See our [Angular modules sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/app.module.ts#L110) for an example of this approach.

msal.redirect.component.ts
```js
Expand Down Expand Up @@ -73,8 +84,6 @@ import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular'; // Redirect component imported from msal-angular

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

export function loggerCallback(logLevel: LogLevel, message: string) {
console.log(message);
}
Expand All @@ -88,7 +97,6 @@ export function MSALInstanceFactory(): IPublicClientApplication {
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: isIE, // set to true for IE 11
},
system: {
loggerOptions: {
Expand Down Expand Up @@ -196,7 +204,7 @@ This is not our recommended approach, but if you are unable to bootstrap the `Ms

- `handleRedirectObservable()` should be subscribed to on **every** page to which a redirect may occur. Pages protected by the MSAL Guard do not need to subscribe to `handleRedirectObservable()`, as redirects are processed in the Guard.
- Accessing or performing any action related to user accounts should not be done until `handleRedirectObservable()` is complete, as it may not be fully populated until then. Additionally, if interactive APIs are called while `handleRedirectObservables()` is in progress, it will result in an `interaction_in_progress` error. See our document on [events](events.md#the-inprogress-observable) for more information on checking for interactions, and our document on [errors](errors.md) for details about the `interaction_in_progress` error.
- See our [older MSAL Angular v2 Angular 9 sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v2-samples/angular9-v2-sample-app) for examples of this approach.
- See our [MSAL Angular modules sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/app.component.ts) for examples of this approach.

Example of home.component.ts file:
```js
Expand Down Expand Up @@ -224,3 +232,72 @@ export class HomeComponent implements OnInit {

}
```

### `handleRedirectObservable` options

`handleRedirectObservable` accepts an optional `HandleRedirectPromiseOptions` object with the following properties:

| Property | Type | Description |
|----------|------|-------------|
| `hash` | `string` | Optional hash to process instead of the current URL hash. |
| `navigateToLoginRequestUrl` | `boolean` | Whether to navigate to the original request URL after processing the redirect. Defaults to `true`. Set to `false` if you want to handle navigation yourself. |

Example usage:

```js
// Basic usage - processes redirect and navigates to original URL
this.authService.handleRedirectObservable().subscribe();

// Disable automatic navigation after redirect
this.authService.handleRedirectObservable({ navigateToLoginRequestUrl: false }).subscribe({
next: (result: AuthenticationResult) => {
if (result) {
// Handle navigation yourself
this.router.navigate(['/home']);
}
}
});

// Process a specific hash
this.authService.handleRedirectObservable({ hash: '#code=...' }).subscribe();
```

> [!NOTE]
> Passing a hash string directly to `handleRedirectObservable(hash)` is deprecated. Use the options object instead: `handleRedirectObservable({ hash: "#..." })`.

## 3. Redirects with standalone components

As many Angular applications using standalone components are unable to bootstrap the `MsalRedirectComponent`, `handleRedirectObservable` must be subscribed to directly. Our recommendation is to subscribe to it in the `app.component.ts` file.

- Depending on your application architecture, you may have to subscribe to `handleRedirectObservable()` in other areas as well.
- Checking for interactions in progress still applies, please see our document on [events](events.md#the-inprogress-observable) for more information on checking for interactions.
- See our [Angular standalone sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-standalone-sample) for examples of this approach.

Example of `app.component.ts` file:

```js
import { Component, OnInit, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
standalone: true,
imports: [CommonModule, RouterModule]
})
export class AppComponent implements OnInit {

constructor(
@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
private authService: MsalService,
private msalBroadcastService: MsalBroadcastService
) {}

ngOnInit(): void {
this.authService.handleRedirectObservable().subscribe();
}
}
```
49 changes: 49 additions & 0 deletions msal-javascript-conceptual/angular/v3-v4-upgrade-guide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
title: Upgrade from MSAL Angular v3 to v4
description: Learn how to upgrade your Angular application from MSAL Angular v3 to v4, including security updates and Angular 19 support.
author: Dickson-Mwendia
manager: Dougeby
ms.author: dmwendia
ms.date: 03/06/2026
ms.service: msal
ms.subservice: msal-angular
ms.topic: how-to
ms.reviewer: cwerner, owenrichards, kengaderdus
#Customer intent: As a developer, I want to upgrade my Angular application from MSAL Angular v3 to v4 so that I can get security updates and Angular 19 support.
---

# Upgrade from MSAL Angular v3 to v4

MSAL Angular v4 includes security updates from MSAL Browser and adds Angular 19 support to the existing Angular 15-18 support.

Please see the [MSAL Browser v3 migration guide](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/v3-migration.md) for browser support and other key changes.

## Changes in `@azure/msal-angular@4`

### Using local storage

Due to changes in MSAL Browser related to local storage encryption, ensure you check that initialization has completed and that interaction status is `None` before calling any account APIs.

```js
this.msalBroadcastService.inProgress$
.pipe(
filter(
(status: InteractionStatus) => status === InteractionStatus.None
),
takeUntil(this._destroying$)
)
.subscribe(() => {
this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
});
```

## Samples

The following developer samples are now available:

- [Angular B2C Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-b2c-sample)
- [Angular Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-standalone-sample)

The samples demonstrate basic configuration and usage, and may be improved and added to incrementally.

See [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples) for a list of the current MSAL Angular samples and the features demonstrated.
Loading