Merge branch 'dev' into guard-access-denied

change/@azure-msal-angular-53b2846c-3833-4295-81b1-91984e30177a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Interceptor, guard, and samples to use active account (#2784)",
+  "packageName": "@azure/msal-angular",
+  "email": "joarroyo@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-msal-browser-0e1341a0-d3ce-4987-b651-7a52610f774e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Enable strict TypeScript option (#2792)",
+  "packageName": "@azure/msal-browser",
+  "email": "thomas.norling@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-msal-common-1c7724af-c058-4193-97e4-6c59abe17625.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add interface stubs (#2792)",
+  "packageName": "@azure/msal-common",
+  "email": "thomas.norling@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-msal-react-02a25114-0f3c-426a-9850-105f7801b099.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Readme update (#2813)",
+  "packageName": "@azure/msal-react",
+  "email": "thomas.norling@microsoft.com",
+  "dependentChangeType": "none"
+}

lib/msal-angular/docs/v2-docs/1.x-2.x-upgrade-guide.md

@@ -42,15 +42,22 @@ See the [updated sample](https://github.com/AzureAD/microsoft-authentication-lib
 * The `logger` is now set through configurations for the MSAL instance, under `system.loggerOptions`, which include a `loggerCallback`, `piiLoggingEnabled` and `logLevel`, instead of an instance of a `logger`. The `logger` can also be set dynamically by using `MsalService.setLogger()`. See the [`logger documentation`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/logging.md) for more information and [sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v2-samples/angular10-sample-app/src/app/app.module.ts) for usage.
 
 ### API changes
+
 * The `acquireToken` and `login` methods now take different request objects as parameters. See the [msal.service.ts](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.service.ts) for details.
-* `getAccount()` is now `getAccountByUsername()`. There is also a `getAllAccounts()` method available.
 * Broadcast events now emit an `EventMessage` object, instead of just strings. See the [Angular sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v2-samples/angular10-sample-app/src/app/app.component.ts) for an example of how to implement.
 * Applications using `Redirect` methods must implement the `handleRedirectObservable` method (and have it run on every page load), which will capture the result of redirect operations. See the [Angular sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v2-samples/angular10-sample-app/src/app/home/home.component.ts) for an example of how to implement.
 
 ### MSAL Guard
+
 * **Interfaces**: `MsalGuard` now implements `CanActivateChild` and `CanLoad` in addition to `CanActivate`. Example code snippets are provided in our [initialization doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/initialization.md#secure-the-routes-in-your-application) and examples of usage can be found in our sample application [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app-routing.module.ts).
 * **Redirect on failure**: `MsalGuard` configuration now has a `loginFailedRoute` that can be configured. The Guard will redirect to this page if login is required and fails. See the Angular sample for examples of implementing it in the [configuration](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/c0609f899704215515eeeac77e9885228d6d5dbb/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app.module.ts#L48) and [app routing module](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/c0609f899704215515eeeac77e9885228d6d5dbb/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app-routing.module.ts#L40).
 
+### Accounts
+
+* When getting accounts, we recommend using `getAccountByHomeId()` and `getAccountByLocalId()`, available on the MSAL instance. `getAccount()` is now `getAccountByUsername()`, but should be a secondary choice, as it may be less reliable and is for convenience only.
+* `getAllAccounts()` is also available on the MSAL instance. Please see [docs](https://azuread.github.io/microsoft-authentication-library-for-js/ref/msal-browser/classes/_src_app_clientapplication_.clientapplication.html) for `@azure/msal-browser` for more details on account methods.
+* Additionally, you can now get and set active acccounts using `getActiveAccount()` and `setActiveAccount()`. We recommend setting the active account after logging in with popups or calling `handleRedirectObservable()`. See [our sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/513855f780aef1cb1c905944ec3ba139623addf3/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app.component.ts#L48) for examples of its use.
+
 ## Angular 9+ and rxjs@6
 
 MSAL Angular now expects that your application is built with `@angular/core@>=9`, `@angular/common@>=9`, `rxjs@6`. As with MSAL Angular 1.x, `rxjs-compat` is not required.

lib/msal-angular/src/msal.guard.ts

@@ -7,7 +7,7 @@ import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateCh
 import { MsalService } from "./msal.service";
 import { Injectable, Inject } from "@angular/core";
 import { Location } from "@angular/common";
-import { InteractionType, BrowserConfigurationAuthError, BrowserUtils, UrlString, PopupRequest, RedirectRequest } from "@azure/msal-browser";
+import { InteractionType, BrowserConfigurationAuthError, BrowserUtils, UrlString, PopupRequest, RedirectRequest, AuthenticationResult } from "@azure/msal-browser";
 import { MsalGuardConfiguration } from "./msal.guard.config";
 import { MSAL_GUARD_CONFIG } from "./constants";
 import { concatMap, catchError, map } from "rxjs/operators";
@@ -64,8 +64,9 @@ export class MsalGuard implements CanActivate, CanActivateChild, CanLoad {
             this.authService.getLogger().verbose("Guard - logging in by popup");
             return this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as PopupRequest)
                 .pipe(
-                    map(() => {
-                        this.authService.getLogger().verbose("Guard - login by popup successful, can activate");
+                    map((response: AuthenticationResult) => {
+                        this.authService.getLogger().verbose("Guard - login by popup successful, can activate, setting active account");
+                        this.authService.instance.setActiveAccount(response.account);
                         return true;
                     })
                 );

lib/msal-angular/src/msal.interceptor.spec.ts

@@ -119,7 +119,7 @@ describe('MsalInterceptor', () => {
       })
     ));
 
-    spyOn(PublicClientApplication.prototype, "getAllAccounts").and.returnValue([sampleAccountInfo]);
+    spyOn(PublicClientApplication.prototype, "getActiveAccount").and.returnValue(sampleAccountInfo);
 
     httpClient.get("https://graph.microsoft.com/v1.0/me").subscribe();
     setTimeout(() => {

lib/msal-angular/src/msal.interceptor.ts

@@ -12,7 +12,7 @@ import {
 import { Observable, EMPTY } from "rxjs";
 import { switchMap, catchError } from "rxjs/operators";
 import { MsalService } from "./msal.service";
-import { AuthenticationResult, BrowserConfigurationAuthError, InteractionType, StringUtils } from "@azure/msal-browser";
+import { AccountInfo, AuthenticationResult, BrowserConfigurationAuthError, InteractionType, StringUtils } from "@azure/msal-browser";
 import { Injectable, Inject } from "@angular/core";
 import { MSAL_INTERCEPTOR_CONFIG } from "./constants";
 import { MsalInterceptorConfiguration } from "./msal.interceptor.config";
@@ -31,7 +31,15 @@ export class MsalInterceptor implements HttpInterceptor {
 
         this.authService.getLogger().verbose("MSAL Interceptor activated");
         const scopes = this.getScopesForEndpoint(req.url);
-        const account = this.authService.instance.getAllAccounts()[0];
+
+        let account: AccountInfo;
+        if (!!this.authService.instance.getActiveAccount()) {
+            this.authService.getLogger().verbose("Interceptor - active account selected");
+            account = this.authService.instance.getActiveAccount();
+        } else {
+            this.authService.getLogger().verbose("Interceptor - no active account, fallback to first account");
+            account = this.authService.instance.getAllAccounts()[0];
+        }
 
         if (!scopes || scopes.length === 0) {
             this.authService.getLogger().verbose("Interceptor - no scopes for endpoint");