Angular standalone sample (#6237)

This PR adds a sample for using MSAL Angular v3 with Angular standalone
components and updates documentation.

---------

Co-authored-by: Thomas Norling <[email protected]>

.github/workflows/msal-angular-e2e.yml

@@ -38,6 +38,7 @@ jobs:
         - 'angular15-sample-app'
         - 'angular16-sample-app'
         - 'angular-b2c-sample-app'
+        - 'angular-standalone-sample'
 
     name: ${{ matrix.sample }}
 

lib/msal-angular/FAQ.md

@@ -6,6 +6,7 @@
 1. [What browsers are supported?](#what-browsers-are-supported)
 1. [What versions of Angular are supported?](#what-versions-of-angular-are-supported)
 1. [Does `@azure/msal-angular` support Server Side Rendering?](#does-azuremsal-angular-support-server-side-rendering)
+1. [Does `@azure/msal-angular` support standalone components?](#does-azuremsal-angular-support-standalone-components)
 1. [Can `@azure/msal-angular` be used with Internet Explorer?](#can-azuremsal-angular-be-used-with-internet-explorer)
 1. [Can `@azure/msal-angular` be used with Microsoft Graph JavaScript SDK?](#can-azuremsal-angular-be-used-with-microsoft-graph-javascript-sdk)
 
@@ -43,21 +44,25 @@ Please see [here](https://github.com/AzureAD/microsoft-authentication-library-fo
 
 ### What versions of Angular are supported?
 
-MSAL Angular v3 is in alpha and currently supports Angular 15 and 16.
+MSAL Angular v3 currently supports Angular 15 and 16.
 
 MSAL Angular v2 supports Angular 9, 10, 11, 12, 13 and 14.
 
 ### Does `@azure/msal-angular` support Server Side Rendering?
 
 Yes, server side rendering is supported through Angular universal. See our doc [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/angular-universal.md) for more information.
 
+### Does `@azure/msal-angular` support standalone components?
+
+MSAL Angular v3 supports standalone components. Please see our [redirect documentation](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/redirects.md) for more information on using standalone components with redirects and our [standalone sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v3-samples/angular-standalone-sample) for usage details. 
+
 ### Can `@azure/msal-angular` be used with Internet Explorer?
 
 MSAL Angular v3 no longer supports Internet Explorer.
 
 MSAL Angular v2 and earlier supports IE 11. More information on configuration can be found [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/msal-lts/lib/msal-angular/docs/v2-docs/ie-support.md).
 
-## Can `@azure/msal-angular` be used with Microsoft Graph JavaScript SDK?
+### Can `@azure/msal-angular` be used with Microsoft Graph JavaScript SDK?
 
 Yes, `@azure/msal-angular` can be used as a custom authentication provider for the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript). For an implementation, please refer to the sample: [Angular SPA calling Graph API](https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/2-Authorization-I/1-call-graph).
 

lib/msal-angular/README.md

@@ -45,7 +45,7 @@ At a minimum, `@azure/msal-angular` will follow the [support schedule of the mai
 
 | MSAL Angular version | MSAL support status     | Supported Angular versions |
 |----------------------|-------------------------|----------------------------|
-| MSAL Angular v3-alpha      | Active development      | 15, 16                     |
+| MSAL Angular v3      | Active development      | 15, 16                     |
 | MSAL Angular v2      | In maintenance          | 9, 10, 11, 12, 13, 14      |
 | MSAL Angular v1      | In maintenance          | 6, 7, 8, 9                 |
 | MSAL Angular v0      | Out of support          | 4, 5                       |
@@ -88,6 +88,7 @@ Documentation specifically for MSAL Angular v1 can be found [here](https://githu
 * [Angular v15](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular15-sample-app)
 * [Angular v16](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular16-sample-app)
 * [Angular v16 B2C Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular-b2c-sample-app)
+* [Angular Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular-standalone-sample)
 
 ### MSAL Angular v2 Samples
 * [Angular v9](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v2-samples/angular9-v2-sample-app)

lib/msal-angular/docs/configuration.md

@@ -111,8 +111,7 @@ export function MSALInstanceFactory(): IPublicClientApplication {
       postLogoutRedirectUri: "http://localhost:4200"
     },
     cache: {
-      cacheLocation: BrowserCacheLocation.LocalStorage,
-      storeAuthStateInCookie: isIE, // set to true for IE 11
+      cacheLocation: BrowserCacheLocation.LocalStorage
     },
   });
 }
@@ -350,8 +349,6 @@ export function initializerFactory(env: ConfigService, configUrl: string): any {
     return () => promise;
 }
 
-const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1; // Remove this line to use Angular Universal
-
 export function loggerCallback(logLevel: LogLevel, message: string) {
   console.log(message);
 }

lib/msal-angular/docs/redirects.md

@@ -2,7 +2,13 @@
 
 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.
 
-## 1. `MsalRedirectComponent`: A dedicated `handleRedirectObservable` component
+Note that specific guidance has been added for using MSAL Angular v3 with Angular standalone components below.
+
+1. [`MsalRedirectComponent`](#msalredirectcomponent-a-dedicated-handleredirectobservable-component)
+1. [Subscribing to `handleRedirectObservable` manually](#subscribing-to-handleredirectobservable-manually)
+1. [Redirects with standalone components](#redirects-with-standalone-components)
+
+## `MsalRedirectComponent`: A dedicated `handleRedirectObservable` component
 
 This is our recommended approach for handling redirects:
 
@@ -11,6 +17,8 @@ This is our recommended approach for handling redirects:
 - 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.
 
+Note that although this is our recommendation for most Angular applications, this approach may not work with Angular standalone components. See the section on [redirects with standalone components below](#redirects-with-standalone-components) for further guidance.
+
 msal.redirect.component.ts
 ```js
 // This component is part of @azure/msal-angular and can be imported and bootstrapped
@@ -61,8 +69,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);
 }
@@ -75,8 +81,7 @@ export function MSALInstanceFactory(): IPublicClientApplication {
       postLogoutRedirectUri: 'http://localhost:4200'
     },
     cache: {
-      cacheLocation: BrowserCacheLocation.LocalStorage,
-      storeAuthStateInCookie: isIE, // set to true for IE 11
+      cacheLocation: BrowserCacheLocation.LocalStorage
     },
     system: {
       loggerOptions: {
@@ -178,7 +183,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 ```
 
-## 2. Subscribing to `handleRedirectObservable` manually
+## Subscribing to `handleRedirectObservable` manually
 
 This is not our recommended approach, but if you are unable to bootstrap the `MsalRedirectComponent`, you **must** handle redirects using the `handleRedirectObservable` as follows:
 
@@ -212,3 +217,41 @@ export class HomeComponent implements OnInit {
 
 }
 ```
+
+## 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](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/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-v3-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(); // Subscribing to handleRedirectObservable before any other functions both initialize the application and ensures redirects are handled
+  }
+}
+
+```