@azure/msal-browser 3.11.1 → 3.13.0

package/src/controllers/StandardController.ts

@@ -141,6 +141,9 @@ export class StandardController implements IController {
         Promise<AuthenticationResult>
     >;
 
+    // Active Iframe request
+    private activeIframeRequest: [Promise<void>, string] | undefined;
+
     private ssoSilentMeasurement?: InProgressPerformanceEvent;
     private acquireTokenByCodeAsyncMeasurement?: InProgressPerformanceEvent;
     /**
@@ -204,7 +207,8 @@ export class StandardController implements IController {
                   this.config.cache,
                   this.browserCrypto,
                   this.logger,
-                  buildStaticAuthorityOptions(this.config.auth)
+                  buildStaticAuthorityOptions(this.config.auth),
+                  this.performanceClient
               )
             : DEFAULT_BROWSER_CACHE_MANAGER(
                   this.config.auth.clientId,
@@ -224,7 +228,9 @@ export class StandardController implements IController {
             this.config.auth.clientId,
             nativeCacheOptions,
             this.browserCrypto,
-            this.logger
+            this.logger,
+            undefined,
+            this.performanceClient
         );
 
         // Initialize the token cache
@@ -332,7 +338,6 @@ export class StandardController implements IController {
         // Block token acquisition before initialize has been called
         BrowserUtils.blockAPICallsBeforeInitialize(this.initialized);
 
-        const loggedInAccounts = this.getAllAccounts();
         if (this.isBrowserEnvironment) {
             /**
              * Store the promise on the PublicClientApplication instance if this is the first invocation of handleRedirectPromise,
@@ -342,155 +347,11 @@ export class StandardController implements IController {
             const redirectResponseKey = hash || "";
             let response = this.redirectResponse.get(redirectResponseKey);
             if (typeof response === "undefined") {
-                const request: NativeTokenRequest | null =
-                    this.browserStorage.getCachedNativeRequest();
-                const useNative =
-                    request &&
-                    NativeMessageHandler.isNativeAvailable(
-                        this.config,
-                        this.logger,
-                        this.nativeExtensionProvider
-                    ) &&
-                    this.nativeExtensionProvider &&
-                    !hash;
-                const correlationId = useNative
-                    ? request?.correlationId
-                    : this.browserStorage.getTemporaryCache(
-                          TemporaryCacheKeys.CORRELATION_ID,
-                          true
-                      ) || "";
-                const rootMeasurement = this.performanceClient.startMeasurement(
-                    "acquireTokenRedirect",
-                    correlationId
-                );
-                this.eventHandler.emitEvent(
-                    EventType.HANDLE_REDIRECT_START,
-                    InteractionType.Redirect
-                );
+                response = this.handleRedirectPromiseInternal(hash);
+                this.redirectResponse.set(redirectResponseKey, response);
                 this.logger.verbose(
                     "handleRedirectPromise has been called for the first time, storing the promise"
                 );
-                let redirectResponse: Promise<AuthenticationResult | null>;
-                if (useNative && this.nativeExtensionProvider) {
-                    this.logger.trace(
-                        "handleRedirectPromise - acquiring token from native platform"
-                    );
-                    const nativeClient = new NativeInteractionClient(
-                        this.config,
-                        this.browserStorage,
-                        this.browserCrypto,
-                        this.logger,
-                        this.eventHandler,
-                        this.navigationClient,
-                        ApiId.handleRedirectPromise,
-                        this.performanceClient,
-                        this.nativeExtensionProvider,
-                        request.accountId,
-                        this.nativeInternalStorage,
-                        request.correlationId
-                    );
-
-                    redirectResponse = invokeAsync(
-                        nativeClient.handleRedirectPromise.bind(nativeClient),
-                        PerformanceEvents.HandleNativeRedirectPromiseMeasurement,
-                        this.logger,
-                        this.performanceClient,
-                        rootMeasurement.event.correlationId
-                    )(
-                        this.performanceClient,
-                        rootMeasurement.event.correlationId
-                    );
-                } else {
-                    this.logger.trace(
-                        "handleRedirectPromise - acquiring token from web flow"
-                    );
-                    const redirectClient =
-                        this.createRedirectClient(correlationId);
-                    redirectResponse = invokeAsync(
-                        redirectClient.handleRedirectPromise.bind(
-                            redirectClient
-                        ),
-                        PerformanceEvents.HandleRedirectPromiseMeasurement,
-                        this.logger,
-                        this.performanceClient,
-                        rootMeasurement.event.correlationId
-                    )(
-                        hash,
-                        this.performanceClient,
-                        rootMeasurement.event.correlationId
-                    );
-                }
-
-                response = redirectResponse
-                    .then((result: AuthenticationResult | null) => {
-                        if (result) {
-                            // Emit login event if number of accounts change
-
-                            const isLoggingIn =
-                                loggedInAccounts.length <
-                                this.getAllAccounts().length;
-                            if (isLoggingIn) {
-                                this.eventHandler.emitEvent(
-                                    EventType.LOGIN_SUCCESS,
-                                    InteractionType.Redirect,
-                                    result
-                                );
-                                this.logger.verbose(
-                                    "handleRedirectResponse returned result, login success"
-                                );
-                            } else {
-                                this.eventHandler.emitEvent(
-                                    EventType.ACQUIRE_TOKEN_SUCCESS,
-                                    InteractionType.Redirect,
-                                    result
-                                );
-                                this.logger.verbose(
-                                    "handleRedirectResponse returned result, acquire token success"
-                                );
-                            }
-                            rootMeasurement.end({ success: true });
-                        }
-                        this.eventHandler.emitEvent(
-                            EventType.HANDLE_REDIRECT_END,
-                            InteractionType.Redirect
-                        );
-                        rootMeasurement.end({ success: false });
-
-                        return result;
-                    })
-                    .catch((e) => {
-                        const eventError = e as EventError;
-                        // Emit login event if there is an account
-                        if (loggedInAccounts.length > 0) {
-                            this.eventHandler.emitEvent(
-                                EventType.ACQUIRE_TOKEN_FAILURE,
-                                InteractionType.Redirect,
-                                null,
-                                eventError
-                            );
-                        } else {
-                            this.eventHandler.emitEvent(
-                                EventType.LOGIN_FAILURE,
-                                InteractionType.Redirect,
-                                null,
-                                eventError
-                            );
-                        }
-                        this.eventHandler.emitEvent(
-                            EventType.HANDLE_REDIRECT_END,
-                            InteractionType.Redirect
-                        );
-
-                        rootMeasurement.end(
-                            {
-                                success: false,
-                            },
-                            eventError
-                        );
-
-                        throw e;
-                    });
-                this.redirectResponse.set(redirectResponseKey, response);
             } else {
                 this.logger.verbose(
                     "handleRedirectPromise has been called previously, returning the result from the first call"
@@ -505,6 +366,156 @@ export class StandardController implements IController {
         return null;
     }
 
+    /**
+     * The internal details of handleRedirectPromise. This is separated out to a helper to allow handleRedirectPromise to memoize requests
+     * @param hash
+     * @returns
+     */
+    private async handleRedirectPromiseInternal(
+        hash?: string
+    ): Promise<AuthenticationResult | null> {
+        const loggedInAccounts = this.getAllAccounts();
+        const request: NativeTokenRequest | null =
+            this.browserStorage.getCachedNativeRequest();
+        const useNative =
+            request &&
+            NativeMessageHandler.isNativeAvailable(
+                this.config,
+                this.logger,
+                this.nativeExtensionProvider
+            ) &&
+            this.nativeExtensionProvider &&
+            !hash;
+        const correlationId = useNative
+            ? request?.correlationId
+            : this.browserStorage.getTemporaryCache(
+                  TemporaryCacheKeys.CORRELATION_ID,
+                  true
+              ) || "";
+        const rootMeasurement = this.performanceClient.startMeasurement(
+            "acquireTokenRedirect",
+            correlationId
+        );
+        this.eventHandler.emitEvent(
+            EventType.HANDLE_REDIRECT_START,
+            InteractionType.Redirect
+        );
+
+        let redirectResponse: Promise<AuthenticationResult | null>;
+        if (useNative && this.nativeExtensionProvider) {
+            this.logger.trace(
+                "handleRedirectPromise - acquiring token from native platform"
+            );
+            const nativeClient = new NativeInteractionClient(
+                this.config,
+                this.browserStorage,
+                this.browserCrypto,
+                this.logger,
+                this.eventHandler,
+                this.navigationClient,
+                ApiId.handleRedirectPromise,
+                this.performanceClient,
+                this.nativeExtensionProvider,
+                request.accountId,
+                this.nativeInternalStorage,
+                request.correlationId
+            );
+
+            redirectResponse = invokeAsync(
+                nativeClient.handleRedirectPromise.bind(nativeClient),
+                PerformanceEvents.HandleNativeRedirectPromiseMeasurement,
+                this.logger,
+                this.performanceClient,
+                rootMeasurement.event.correlationId
+            )(this.performanceClient, rootMeasurement.event.correlationId);
+        } else {
+            this.logger.trace(
+                "handleRedirectPromise - acquiring token from web flow"
+            );
+            const redirectClient = this.createRedirectClient(correlationId);
+            redirectResponse = invokeAsync(
+                redirectClient.handleRedirectPromise.bind(redirectClient),
+                PerformanceEvents.HandleRedirectPromiseMeasurement,
+                this.logger,
+                this.performanceClient,
+                rootMeasurement.event.correlationId
+            )(
+                hash,
+                this.performanceClient,
+                rootMeasurement.event.correlationId
+            );
+        }
+
+        return redirectResponse
+            .then((result: AuthenticationResult | null) => {
+                if (result) {
+                    // Emit login event if number of accounts change
+
+                    const isLoggingIn =
+                        loggedInAccounts.length < this.getAllAccounts().length;
+                    if (isLoggingIn) {
+                        this.eventHandler.emitEvent(
+                            EventType.LOGIN_SUCCESS,
+                            InteractionType.Redirect,
+                            result
+                        );
+                        this.logger.verbose(
+                            "handleRedirectResponse returned result, login success"
+                        );
+                    } else {
+                        this.eventHandler.emitEvent(
+                            EventType.ACQUIRE_TOKEN_SUCCESS,
+                            InteractionType.Redirect,
+                            result
+                        );
+                        this.logger.verbose(
+                            "handleRedirectResponse returned result, acquire token success"
+                        );
+                    }
+                    rootMeasurement.end({ success: true });
+                }
+                this.eventHandler.emitEvent(
+                    EventType.HANDLE_REDIRECT_END,
+                    InteractionType.Redirect
+                );
+                rootMeasurement.end({ success: false });
+
+                return result;
+            })
+            .catch((e) => {
+                const eventError = e as EventError;
+                // Emit login event if there is an account
+                if (loggedInAccounts.length > 0) {
+                    this.eventHandler.emitEvent(
+                        EventType.ACQUIRE_TOKEN_FAILURE,
+                        InteractionType.Redirect,
+                        null,
+                        eventError
+                    );
+                } else {
+                    this.eventHandler.emitEvent(
+                        EventType.LOGIN_FAILURE,
+                        InteractionType.Redirect,
+                        null,
+                        eventError
+                    );
+                }
+                this.eventHandler.emitEvent(
+                    EventType.HANDLE_REDIRECT_END,
+                    InteractionType.Redirect
+                );
+
+                rootMeasurement.end(
+                    {
+                        success: false,
+                    },
+                    eventError
+                );
+
+                throw e;
+            });
+    }
+
     /**
      * Use when you want to obtain an access_token for your API by redirecting the user's browser window to the authorization endpoint. This function redirects
      * the page, so any code that follows this function will not execute.
@@ -1966,24 +1977,180 @@ export class StandardController implements IController {
         document.addEventListener("visibilitychange", () =>
             this.trackPageVisibility(request.correlationId)
         );
-        let result: Promise<AuthenticationResult>;
+
+        const silentRequest = await invokeAsync(
+            initializeSilentRequest,
+            PerformanceEvents.InitializeSilentRequest,
+            this.logger,
+            this.performanceClient,
+            request.correlationId
+        )(request, account, this.config, this.performanceClient, this.logger);
+        const cacheLookupPolicy =
+            request.cacheLookupPolicy || CacheLookupPolicy.Default;
+
+        const result = this.acquireTokenSilentNoIframe(
+            silentRequest,
+            cacheLookupPolicy
+        ).catch(async (refreshTokenError: AuthError) => {
+            const shouldTryToResolveSilently =
+                checkIfRefreshTokenErrorCanBeResolvedSilently(
+                    refreshTokenError,
+                    cacheLookupPolicy
+                );
+
+            if (shouldTryToResolveSilently) {
+                if (!this.activeIframeRequest) {
+                    let _resolve: () => void,
+                        _reject: (reason?: AuthError | Error) => void;
+                    // Always set the active request tracker immediately after checking it to prevent races
+                    this.activeIframeRequest = [
+                        new Promise((resolve, reject) => {
+                            _resolve = resolve;
+                            _reject = reject;
+                        }),
+                        silentRequest.correlationId,
+                    ];
+                    this.logger.verbose(
+                        "Refresh token expired/invalid or CacheLookupPolicy is set to Skip, attempting acquire token by iframe.",
+                        silentRequest.correlationId
+                    );
+                    return invokeAsync(
+                        this.acquireTokenBySilentIframe.bind(this),
+                        PerformanceEvents.AcquireTokenBySilentIframe,
+                        this.logger,
+                        this.performanceClient,
+                        silentRequest.correlationId
+                    )(silentRequest)
+                        .then((iframeResult) => {
+                            _resolve();
+                            return iframeResult;
+                        })
+                        .catch((e) => {
+                            _reject(e);
+                            throw e;
+                        })
+                        .finally(() => {
+                            this.activeIframeRequest = undefined;
+                        });
+                } else if (cacheLookupPolicy !== CacheLookupPolicy.Skip) {
+                    const [activePromise, activeCorrelationId] =
+                        this.activeIframeRequest;
+                    this.logger.verbose(
+                        `Iframe request is already in progress, awaiting resolution for request with correlationId: ${activeCorrelationId}`,
+                        silentRequest.correlationId
+                    );
+                    const awaitConcurrentIframeMeasure =
+                        this.performanceClient.startMeasurement(
+                            PerformanceEvents.AwaitConcurrentIframe,
+                            silentRequest.correlationId
+                        );
+                    awaitConcurrentIframeMeasure.add({
+                        awaitIframeCorrelationId: activeCorrelationId,
+                    });
+
+                    // Await for errors first so we can distinguish errors thrown by activePromise versus errors thrown by .then below
+                    await activePromise.catch(() => {
+                        awaitConcurrentIframeMeasure.end({
+                            success: false,
+                        });
+                        this.logger.info(
+                            `Iframe request with correlationId: ${activeCorrelationId} failed. Interaction is required.`
+                        );
+                        // If previous iframe request failed, it's unlikely to succeed this time. Throw original error.
+                        throw refreshTokenError;
+                    });
+
+                    return activePromise.then(() => {
+                        awaitConcurrentIframeMeasure.end({ success: true });
+                        this.logger.verbose(
+                            `Parallel iframe request with correlationId: ${activeCorrelationId} succeeded. Retrying cache and/or RT redemption`,
+                            silentRequest.correlationId
+                        );
+                        // Retry cache lookup and/or RT exchange after iframe completes
+                        return this.acquireTokenSilentNoIframe(
+                            silentRequest,
+                            cacheLookupPolicy
+                        );
+                    });
+                } else {
+                    // Cache policy set to skip and another iframe request is already in progress
+                    this.logger.warning(
+                        "Another iframe request is currently in progress and CacheLookupPolicy is set to Skip. This may result in degraded performance and/or reliability for both calls. Please consider changing the CacheLookupPolicy to take advantage of request queuing and token cache.",
+                        silentRequest.correlationId
+                    );
+                    return invokeAsync(
+                        this.acquireTokenBySilentIframe.bind(this),
+                        PerformanceEvents.AcquireTokenBySilentIframe,
+                        this.logger,
+                        this.performanceClient,
+                        silentRequest.correlationId
+                    )(silentRequest);
+                }
+            } else {
+                // Error cannot be silently resolved or iframe renewal is not allowed, interaction required
+                throw refreshTokenError;
+            }
+        });
+
+        return result
+            .then((response) => {
+                this.eventHandler.emitEvent(
+                    EventType.ACQUIRE_TOKEN_SUCCESS,
+                    InteractionType.Silent,
+                    response
+                );
+                if (request.correlationId) {
+                    this.performanceClient.addFields(
+                        {
+                            fromCache: response.fromCache,
+                            isNativeBroker: response.fromNativeBroker,
+                            requestId: response.requestId,
+                        },
+                        request.correlationId
+                    );
+                }
+
+                return response;
+            })
+            .catch((tokenRenewalError: Error) => {
+                this.eventHandler.emitEvent(
+                    EventType.ACQUIRE_TOKEN_FAILURE,
+                    InteractionType.Silent,
+                    null,
+                    tokenRenewalError
+                );
+                throw tokenRenewalError;
+            })
+            .finally(() => {
+                document.removeEventListener("visibilitychange", () =>
+                    this.trackPageVisibility(request.correlationId)
+                );
+            });
+    }
+
+    /**
+     * AcquireTokenSilent without the iframe fallback. This is used to enable the correct fallbacks in cases where there's a potential for multiple silent requests to be made in parallel and prevent those requests from making concurrent iframe requests.
+     * @param silentRequest
+     * @param cacheLookupPolicy
+     * @returns
+     */
+    private async acquireTokenSilentNoIframe(
+        silentRequest: CommonSilentFlowRequest,
+        cacheLookupPolicy: CacheLookupPolicy
+    ): Promise<AuthenticationResult> {
         if (
             NativeMessageHandler.isNativeAvailable(
                 this.config,
                 this.logger,
                 this.nativeExtensionProvider,
-                request.authenticationScheme
+                silentRequest.authenticationScheme
             ) &&
-            account.nativeAccountId
+            silentRequest.account.nativeAccountId
         ) {
             this.logger.verbose(
                 "acquireTokenSilent - attempting to acquire token from native platform"
             );
-            const silentRequest: SilentRequest = {
-                ...request,
-                account,
-            };
-            result = this.acquireTokenNative(
+            return this.acquireTokenNative(
                 silentRequest,
                 ApiId.acquireTokenSilent_silentFlow
             ).catch(async (e: AuthError) => {
@@ -1995,10 +2162,9 @@ export class StandardController implements IController {
                     this.nativeExtensionProvider = undefined; // Prevent future requests from continuing to attempt
 
                     // Cache will not contain tokens, given that previous WAM requests succeeded. Skip cache and RT renewal and go straight to iframe renewal
-                    const silentIframeClient = this.createSilentIframeClient(
-                        request.correlationId
+                    throw createClientAuthError(
+                        ClientAuthErrorCodes.tokenRefreshRequired
                     );
-                    return silentIframeClient.acquireToken(request);
                 }
                 throw e;
             });
@@ -2006,25 +2172,7 @@ export class StandardController implements IController {
             this.logger.verbose(
                 "acquireTokenSilent - attempting to acquire token from web flow"
             );
-
-            const silentRequest = await invokeAsync(
-                initializeSilentRequest,
-                PerformanceEvents.InitializeSilentRequest,
-                this.logger,
-                this.performanceClient,
-                request.correlationId
-            )(
-                request,
-                account,
-                this.config,
-                this.performanceClient,
-                this.logger
-            );
-
-            const cacheLookupPolicy =
-                request.cacheLookupPolicy || CacheLookupPolicy.Default;
-
-            result = invokeAsync(
+            return invokeAsync(
                 this.acquireTokenFromCache.bind(this),
                 PerformanceEvents.AcquireTokenFromCache,
                 this.logger,
@@ -2032,10 +2180,7 @@ export class StandardController implements IController {
                 silentRequest.correlationId
             )(silentRequest, cacheLookupPolicy).catch(
                 (cacheError: AuthError) => {
-                    if (
-                        request.cacheLookupPolicy ===
-                        CacheLookupPolicy.AccessToken
-                    ) {
+                    if (cacheLookupPolicy === CacheLookupPolicy.AccessToken) {
                         throw cacheError;
                     }
 
@@ -2051,71 +2196,10 @@ export class StandardController implements IController {
                         this.logger,
                         this.performanceClient,
                         silentRequest.correlationId
-                    )(silentRequest, cacheLookupPolicy).catch(
-                        (refreshTokenError: AuthError) => {
-                            const shouldTryToResolveSilently =
-                                checkIfRefreshTokenErrorCanBeResolvedSilently(
-                                    refreshTokenError,
-                                    silentRequest,
-                                    cacheLookupPolicy
-                                );
-
-                            if (shouldTryToResolveSilently) {
-                                this.logger.verbose(
-                                    "Refresh token expired/invalid or CacheLookupPolicy is set to Skip, attempting acquire token by iframe.",
-                                    silentRequest.correlationId
-                                );
-                                return invokeAsync(
-                                    this.acquireTokenBySilentIframe.bind(this),
-                                    PerformanceEvents.AcquireTokenBySilentIframe,
-                                    this.logger,
-                                    this.performanceClient,
-                                    silentRequest.correlationId
-                                )(silentRequest);
-                            } else {
-                                // Error cannot be silently resolved or iframe renewal is not allowed, interaction required
-                                throw refreshTokenError;
-                            }
-                        }
-                    );
+                    )(silentRequest, cacheLookupPolicy);
                 }
             );
         }
-
-        return result
-            .then((response) => {
-                this.eventHandler.emitEvent(
-                    EventType.ACQUIRE_TOKEN_SUCCESS,
-                    InteractionType.Silent,
-                    response
-                );
-                if (request.correlationId) {
-                    this.performanceClient.addFields(
-                        {
-                            fromCache: response.fromCache,
-                            isNativeBroker: response.fromNativeBroker,
-                            requestId: response.requestId,
-                        },
-                        request.correlationId
-                    );
-                }
-
-                return response;
-            })
-            .catch((tokenRenewalError: Error) => {
-                this.eventHandler.emitEvent(
-                    EventType.ACQUIRE_TOKEN_FAILURE,
-                    InteractionType.Silent,
-                    null,
-                    tokenRenewalError
-                );
-                throw tokenRenewalError;
-            })
-            .finally(() => {
-                document.removeEventListener("visibilitychange", () =>
-                    this.trackPageVisibility(request.correlationId)
-                );
-            });
     }
 }
 
@@ -2128,7 +2212,6 @@ export class StandardController implements IController {
  */
 function checkIfRefreshTokenErrorCanBeResolvedSilently(
     refreshTokenError: AuthError,
-    silentRequest: CommonSilentFlowRequest,
     cacheLookupPolicy: CacheLookupPolicy
 ): boolean {
     const noInteractionRequired = !(

package/src/controllers/UnknownOperatingContextController.ts

@@ -106,7 +106,9 @@ export class UnknownOperatingContextController implements IController {
                   this.config.auth.clientId,
                   this.config.cache,
                   this.browserCrypto,
-                  this.logger
+                  this.logger,
+                  undefined,
+                  this.performanceClient
               )
             : DEFAULT_BROWSER_CACHE_MANAGER(
                   this.config.auth.clientId,

package/src/interaction_handler/SilentHandler.ts

@@ -195,6 +195,7 @@ function loadFrameSync(urlNavigate: string): HTMLIFrameElement {
 function createHiddenIframe(): HTMLIFrameElement {
     const authFrame = document.createElement("iframe");
 
+    authFrame.className = "msalSilentIframe";
     authFrame.style.visibility = "hidden";
     authFrame.style.position = "absolute";
     authFrame.style.width = authFrame.style.height = "0";