@azure/msal-browser 4.1.0 → 4.2.0

package/src/controllers/NestedAppAuthController.ts

@@ -111,6 +111,7 @@ export class NestedAppAuthController implements IController {
             ? new CryptoOps(this.logger, this.performanceClient, true)
             : DEFAULT_CRYPTO_IMPLEMENTATION;
 
+        this.eventHandler = new EventHandler(this.logger);
         // Initialize the browser storage class.
         this.browserStorage = this.operatingContext.isBrowserEnvironment()
             ? new BrowserCacheManager(
@@ -119,16 +120,16 @@ export class NestedAppAuthController implements IController {
                   this.browserCrypto,
                   this.logger,
                   this.performanceClient,
+                  this.eventHandler,
                   buildStaticAuthorityOptions(this.config.auth)
               )
             : DEFAULT_BROWSER_CACHE_MANAGER(
                   this.config.auth.clientId,
                   this.logger,
-                  this.performanceClient
+                  this.performanceClient,
+                  this.eventHandler
               );
 
-        this.eventHandler = new EventHandler(this.logger);
-
         this.nestedAppAuthAdapter = new NestedAppAuthAdapter(
             this.config.auth.clientId,
             this.config.auth.clientCapabilities,

package/src/controllers/StandardController.ts

@@ -28,8 +28,6 @@ import {
     AccountFilter,
     buildStaticAuthorityOptions,
     InteractionRequiredAuthErrorCodes,
-    PersistentCacheKeys,
-    CacheManager,
 } from "@azure/msal-common/browser";
 import {
     BrowserCacheManager,
@@ -179,8 +177,6 @@ export class StandardController implements IController {
     private ssoSilentMeasurement?: InProgressPerformanceEvent;
     private acquireTokenByCodeAsyncMeasurement?: InProgressPerformanceEvent;
 
-    // Flag which indicates if we're currently listening for account storage events
-    private listeningToStorageEvents: boolean;
     /**
      * @constructor
      * Constructor for the PublicClientApplication used to instantiate the PublicClientApplication object
@@ -243,12 +239,14 @@ export class StandardController implements IController {
                   this.browserCrypto,
                   this.logger,
                   this.performanceClient,
+                  this.eventHandler,
                   buildStaticAuthorityOptions(this.config.auth)
               )
             : DEFAULT_BROWSER_CACHE_MANAGER(
                   this.config.auth.clientId,
                   this.logger,
-                  this.performanceClient
+                  this.performanceClient,
+                  this.eventHandler
               );
 
         // initialize in memory storage for native flows
@@ -265,7 +263,8 @@ export class StandardController implements IController {
             nativeCacheOptions,
             this.browserCrypto,
             this.logger,
-            this.performanceClient
+            this.performanceClient,
+            this.eventHandler
         );
 
         // Initialize the token cache
@@ -284,11 +283,6 @@ export class StandardController implements IController {
         // Register listener functions
         this.trackPageVisibilityWithMeasurement =
             this.trackPageVisibilityWithMeasurement.bind(this);
-
-        // account storage events
-        this.listeningToStorageEvents = false;
-        this.handleAccountCacheChange =
-            this.handleAccountCacheChange.bind(this);
     }
 
     static async createController(
@@ -1769,91 +1763,38 @@ export class StandardController implements IController {
 
     /**
      * Adds event listener that emits an event when a user account is added or removed from localstorage in a different browser tab or window
+     * @deprecated These events will be raised by default and this method will be removed in a future major version.
      */
     enableAccountStorageEvents(): void {
-        if (typeof window === "undefined") {
+        if (
+            this.config.cache.cacheLocation !==
+            BrowserCacheLocation.LocalStorage
+        ) {
+            this.logger.info(
+                "Account storage events are only available when cacheLocation is set to localStorage"
+            );
             return;
         }
 
-        if (!this.listeningToStorageEvents) {
-            this.logger.verbose("Adding account storage listener.");
-            this.listeningToStorageEvents = true;
-            window.addEventListener("storage", this.handleAccountCacheChange);
-        } else {
-            this.logger.verbose("Account storage listener already registered.");
-        }
+        this.eventHandler.subscribeCrossTab();
     }
 
     /**
      * Removes event listener that emits an event when a user account is added or removed from localstorage in a different browser tab or window
+     * @deprecated These events will be raised by default and this method will be removed in a future major version.
      */
     disableAccountStorageEvents(): void {
-        if (typeof window === "undefined") {
-            return;
-        }
-
-        if (this.listeningToStorageEvents) {
-            this.logger.verbose("Removing account storage listener.");
-            window.removeEventListener(
-                "storage",
-                this.handleAccountCacheChange
-            );
-            this.listeningToStorageEvents = false;
-        } else {
-            this.logger.verbose("No account storage listener registered.");
-        }
-    }
-
-    /**
-     * Emit account added/removed events when cached accounts are changed in a different tab or frame
-     */
-    protected handleAccountCacheChange(e: StorageEvent): void {
-        try {
-            // Handle active account filter change
-            if (e.key?.includes(PersistentCacheKeys.ACTIVE_ACCOUNT_FILTERS)) {
-                // This event has no payload, it only signals cross-tab app instances that the results of calling getActiveAccount() will have changed
-                this.eventHandler.emitEvent(EventType.ACTIVE_ACCOUNT_CHANGED);
-            }
-
-            // Handle account object change
-            const cacheValue = e.newValue || e.oldValue;
-            if (!cacheValue) {
-                return;
-            }
-            const parsedValue = JSON.parse(cacheValue);
-            if (
-                typeof parsedValue !== "object" ||
-                !AccountEntity.isAccountEntity(parsedValue)
-            ) {
-                return;
-            }
-            const accountEntity = CacheManager.toObject<AccountEntity>(
-                new AccountEntity(),
-                parsedValue
+        if (
+            this.config.cache.cacheLocation !==
+            BrowserCacheLocation.LocalStorage
+        ) {
+            this.logger.info(
+                "Account storage events are only available when cacheLocation is set to localStorage"
             );
-            const accountInfo = accountEntity.getAccountInfo();
-            if (!e.oldValue && e.newValue) {
-                this.logger.info(
-                    "Account was added to cache in a different window"
-                );
-                this.eventHandler.emitEvent(
-                    EventType.ACCOUNT_ADDED,
-                    undefined,
-                    accountInfo
-                );
-            } else if (!e.newValue && e.oldValue) {
-                this.logger.info(
-                    "Account was removed from cache in a different window"
-                );
-                this.eventHandler.emitEvent(
-                    EventType.ACCOUNT_REMOVED,
-                    undefined,
-                    accountInfo
-                );
-            }
-        } catch (e) {
             return;
         }
+
+        this.eventHandler.unsubscribeCrossTab();
     }
 
     /**

package/src/controllers/UnknownOperatingContextController.ts

@@ -40,6 +40,7 @@ import {
 import { EventCallbackFunction } from "../event/EventMessage.js";
 import { ClearCacheRequest } from "../request/ClearCacheRequest.js";
 import { EventType } from "../event/EventType.js";
+import { EventHandler } from "../event/EventHandler.js";
 
 /**
  * UnknownOperatingContextController class
@@ -71,6 +72,9 @@ export class UnknownOperatingContextController implements IController {
     // Performance telemetry client
     protected readonly performanceClient: IPerformanceClient;
 
+    // Event handler
+    private readonly eventHandler: EventHandler;
+
     // Crypto interface implementation
     protected readonly browserCrypto: ICrypto;
 
@@ -98,6 +102,8 @@ export class UnknownOperatingContextController implements IController {
             ? new CryptoOps(this.logger, this.performanceClient)
             : DEFAULT_CRYPTO_IMPLEMENTATION;
 
+        this.eventHandler = new EventHandler(this.logger);
+
         // Initialize the browser storage class.
         this.browserStorage = this.isBrowserEnvironment
             ? new BrowserCacheManager(
@@ -106,12 +112,14 @@ export class UnknownOperatingContextController implements IController {
                   this.browserCrypto,
                   this.logger,
                   this.performanceClient,
+                  this.eventHandler,
                   undefined
               )
             : DEFAULT_BROWSER_CACHE_MANAGER(
                   this.config.auth.clientId,
                   this.logger,
-                  this.performanceClient
+                  this.performanceClient,
+                  this.eventHandler
               );
     }
     getBrowserStorage(): BrowserCacheManager {

package/src/event/EventHandler.ts

@@ -14,6 +14,8 @@ import {
 import { EventType } from "./EventType.js";
 import { createGuid } from "../utils/BrowserUtils.js";
 
+const BROADCAST_CHANNEL_NAME = "msal.broadcast.event";
+
 export class EventHandler {
     // Callback for subscribing to events
     private eventCallbacks: Map<
@@ -21,10 +23,13 @@ export class EventHandler {
         [EventCallbackFunction, Array<EventType>]
     >;
     private logger: Logger;
+    private broadcastChannel: BroadcastChannel;
 
     constructor(logger?: Logger) {
         this.eventCallbacks = new Map();
         this.logger = logger || new Logger({});
+        this.broadcastChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
+        this.invokeCrossTabCallbacks = this.invokeCrossTabCallbacks.bind(this);
     }
 
     /**
@@ -77,34 +82,80 @@ export class EventHandler {
         payload?: EventPayload,
         error?: EventError
     ): void {
-        if (typeof window !== "undefined") {
-            const message: EventMessage = {
-                eventType: eventType,
-                interactionType: interactionType || null,
-                payload: payload || null,
-                error: error || null,
-                timestamp: Date.now(),
-            };
+        const message: EventMessage = {
+            eventType: eventType,
+            interactionType: interactionType || null,
+            payload: payload || null,
+            error: error || null,
+            timestamp: Date.now(),
+        };
 
-            this.eventCallbacks.forEach(
-                (
-                    [callback, eventTypes]: [
-                        EventCallbackFunction,
-                        Array<EventType>
-                    ],
-                    callbackId: string
-                ) => {
-                    if (
-                        eventTypes.length === 0 ||
-                        eventTypes.includes(eventType)
-                    ) {
-                        this.logger.verbose(
-                            `Emitting event to callback ${callbackId}: ${eventType}`
-                        );
-                        callback.apply(null, [message]);
-                    }
-                }
-            );
+        switch (eventType) {
+            case EventType.ACCOUNT_ADDED:
+            case EventType.ACCOUNT_REMOVED:
+            case EventType.ACTIVE_ACCOUNT_CHANGED:
+                // Send event to other open tabs / MSAL instances on same domain
+                this.broadcastChannel.postMessage(message);
+                break;
+            default:
+                // Emit event to callbacks registered in this instance
+                this.invokeCallbacks(message);
+                break;
         }
     }
+
+    /**
+     * Invoke registered callbacks
+     * @param message
+     */
+    private invokeCallbacks(message: EventMessage): void {
+        this.eventCallbacks.forEach(
+            (
+                [callback, eventTypes]: [
+                    EventCallbackFunction,
+                    Array<EventType>
+                ],
+                callbackId: string
+            ) => {
+                if (
+                    eventTypes.length === 0 ||
+                    eventTypes.includes(message.eventType)
+                ) {
+                    this.logger.verbose(
+                        `Emitting event to callback ${callbackId}: ${message.eventType}`
+                    );
+                    callback.apply(null, [message]);
+                }
+            }
+        );
+    }
+
+    /**
+     * Wrapper around invokeCallbacks to handle broadcast events received from other tabs/instances
+     * @param event
+     */
+    private invokeCrossTabCallbacks(event: MessageEvent): void {
+        const message = event.data as EventMessage;
+        this.invokeCallbacks(message);
+    }
+
+    /**
+     * Listen for events broadcasted from other tabs/instances
+     */
+    subscribeCrossTab(): void {
+        this.broadcastChannel.addEventListener(
+            "message",
+            this.invokeCrossTabCallbacks
+        );
+    }
+
+    /**
+     * Unsubscribe from broadcast events
+     */
+    unsubscribeCrossTab(): void {
+        this.broadcastChannel.removeEventListener(
+            "message",
+            this.invokeCrossTabCallbacks
+        );
+    }
 }

package/src/packageMetadata.ts

@@ -1,3 +1,3 @@
 /* eslint-disable header/header */
 export const name = "@azure/msal-browser";
-export const version = "4.1.0";
+export const version = "4.2.0";