Implement redirect bridge to support COOP

change/@azure-msal-browser-3b6b0844-0608-4d31-bba7-7c7177ad52f1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Implement redirect bridge to support COOP [#8118](https://github.com/AzureAD/microsoft-authentication-library-for-js/pull/8118)",
+  "packageName": "@azure/msal-browser",
+  "email": "kshabelko@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-msal-common-cde5a6b6-5532-4445-945e-4ca192b96714.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Implement redirect bridge to support COOP [#8118](https://github.com/AzureAD/microsoft-authentication-library-for-js/pull/8118)",
+  "packageName": "@azure/msal-common",
+  "email": "kshabelko@microsoft.com",
+  "dependentChangeType": "patch"
+}

lib/msal-browser/FAQ.md

@@ -282,7 +282,9 @@ When you attempt to authenticate MSAL will navigate to your IDP's sign in page e
 
 ### RedirectUri for popup and silent flows
 
-When using popup and silent APIs we recommend setting the `redirectUri` to a blank page, a page that does not implement MSAL, or a page that does not itself require a user be authenticated. This will help prevent potential issues as well as improve performance. If your application is only using popup and silent APIs you can set this on the `PublicClientApplication` config. If your application also needs to support redirect APIs you can set the `redirectUri` on a per request basis.
+When using popup and silent APIs, the `redirectUri` must point to a dedicated page that implements the MSAL redirect bridge. This page handles the authentication response and communicates it back to the main application using the BroadcastChannel API. If your application is only using popup and silent APIs you can set this on the `PublicClientApplication` config. If your application also needs to support redirect APIs you can set the `redirectUri` on a per request basis.
+
+For detailed setup instructions, see [redirectUri considerations](./docs/login-user.md#redirecturi-considerations).
 
 ### RedirectUri for redirect flows
 

lib/msal-browser/apiReview/msal-browser.api.md

@@ -23,6 +23,7 @@ import { CommonEndSessionRequest } from '@azure/msal-common/browser';
 import { CommonSilentFlowRequest } from '@azure/msal-common/browser';
 import { Constants } from '@azure/msal-common/browser';
 import { ExternalTokenResponse } from '@azure/msal-common/browser';
+import { ICrypto } from '@azure/msal-common/browser';
 import { IdTokenClaims } from '@azure/msal-common/browser';
 import { ILoggerCallback } from '@azure/msal-common/browser';
 import { INetworkModule } from '@azure/msal-common/browser';
@@ -225,11 +226,11 @@ declare namespace BrowserAuthErrorCodes {
         unableToParseState,
         stateInteractionTypeMismatch,
         interactionInProgress,
+        interactionInProgressCancelled,
         popupWindowError,
         emptyWindowError,
         userCancelled,
-        monitorPopupTimeout,
-        monitorWindowTimeout,
+        redirectBridgeEmptyResponse,
         redirectInIframe,
         blockIframeReload,
         blockNestedPopups,
@@ -264,7 +265,8 @@ declare namespace BrowserAuthErrorCodes {
         failedToBuildHeaders,
         failedToParseHeaders,
         failedToDecryptEarResponse,
-        timedOut
+        timedOut,
+        emptyResponse
     }
 }
 export { BrowserAuthErrorCodes }
@@ -384,15 +386,13 @@ export type BrowserSystemOptions = SystemOptions & {
     loggerOptions?: LoggerOptions;
     networkClient?: INetworkModule;
     navigationClient?: INavigationClient;
-    windowHashTimeout?: number;
-    iframeHashTimeout?: number;
-    loadFrameTimeout?: number;
+    popupBridgeTimeout?: number;
+    iframeBridgeTimeout?: number;
     redirectNavigationTimeout?: number;
     navigatePopups?: boolean;
     allowRedirectInIframe?: boolean;
     allowPlatformBroker?: boolean;
     nativeBrokerHandshakeTimeout?: number;
-    pollIntervalMilliseconds?: number;
     protocolMode?: ProtocolMode;
 };
 
@@ -406,10 +406,13 @@ export type BrowserTelemetryOptions = {
 
 declare namespace BrowserUtils {
     export {
+        parseAuthResponseFromUrl,
         clearHash,
         replaceHash,
         isInIframe,
         isInPopup,
+        cancelPendingBridgeResponse,
+        waitForBridgeResponse,
         getCurrentUri,
         getHomepage,
         blockReloadInHiddenIframes,
@@ -452,6 +455,11 @@ export type CacheOptions = {
     cacheRetentionDays?: number;
 };
 
+// Warning: (ae-missing-release-tag) "cancelPendingBridgeResponse" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+function cancelPendingBridgeResponse(logger: Logger, correlationId: string): void;
+
 // Warning: (ae-missing-release-tag) "ClearCacheRequest" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
@@ -544,6 +552,11 @@ const earJwkEmpty = "ear_jwk_empty";
 // @public (undocumented)
 const emptyNavigateUri = "empty_navigate_uri";
 
+// Warning: (ae-missing-release-tag) "emptyResponse" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+const emptyResponse = "empty_response";
+
 // Warning: (ae-missing-release-tag) "emptyWindowError" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -755,6 +768,11 @@ export { InProgressPerformanceEvent }
 // @public (undocumented)
 const interactionInProgress = "interaction_in_progress";
 
+// Warning: (ae-missing-release-tag) "interactionInProgressCancelled" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+const interactionInProgressCancelled = "interaction_in_progress_cancelled";
+
 export { InteractionRequiredAuthError }
 
 export { InteractionRequiredAuthErrorCodes }
@@ -996,16 +1014,6 @@ export class MemoryStorage<T> implements IWindowStorage<T> {
     setUserData(key: string, value: T): Promise<void>;
 }
 
-// Warning: (ae-missing-release-tag) "monitorPopupTimeout" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-const monitorPopupTimeout = "monitor_popup_timeout";
-
-// Warning: (ae-missing-release-tag) "monitorWindowTimeout" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-const monitorWindowTimeout = "monitor_window_timeout";
-
 // Warning: (ae-missing-release-tag) "nativeConnectionNotEstablished" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1081,6 +1089,40 @@ const noTokenRequestCacheError = "no_token_request_cache_error";
 // @public (undocumented)
 export const OIDC_DEFAULT_SCOPES: string[];
 
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
+// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
+// Warning: (ae-missing-release-tag) "parseAuthResponseFromUrl" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+function parseAuthResponseFromUrl(): {
+    params: URLSearchParams;
+    payload: string;
+    urlHash: string;
+    urlQuery: string;
+    hasResponseInHash: boolean;
+    hasResponseInQuery: boolean;
+    libraryState: {
+        id: string;
+        meta: Record<string, string>;
+    };
+};
+
 export { PerformanceCallbackFunction }
 
 export { PerformanceEvent }
@@ -1112,6 +1154,7 @@ export type PopupRequest = Partial<Omit<CommonAuthorizationUrlRequest, "response
     scopes: Array<string>;
     popupWindowAttributes?: PopupWindowAttributes;
     popupWindowParent?: Window;
+    overrideInteractionInProgress?: boolean;
 };
 
 // Warning: (ae-missing-release-tag) "PopupSize" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1247,6 +1290,11 @@ export class PublicClientApplication implements IPublicClientApplication {
     ssoSilent(request: SsoSilentRequest): Promise<AuthenticationResult>;
 }
 
+// Warning: (ae-missing-release-tag) "redirectBridgeEmptyResponse" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+const redirectBridgeEmptyResponse = "redirect_bridge_empty_response";
+
 // Warning: (ae-missing-release-tag) "redirectInIframe" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1440,6 +1488,11 @@ const userCancelled = "user_cancelled";
 // @public (undocumented)
 export const version = "5.0.0-alpha.0";
 
+// Warning: (ae-missing-release-tag) "waitForBridgeResponse" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+function waitForBridgeResponse(timeoutMs: number, logger: Logger, browserCrypto: ICrypto, request: CommonAuthorizationUrlRequest | CommonEndSessionRequest): Promise<string>;
+
 // Warning: (ae-missing-release-tag) "WrapperSKU" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 // Warning: (ae-missing-release-tag) "WrapperSKU" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1457,7 +1510,7 @@ export type WrapperSKU = (typeof WrapperSKU)[keyof typeof WrapperSKU];
 // src/cache/LocalStorage.ts:366:8 - (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
 // src/cache/LocalStorage.ts:429:8 - (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
 // src/cache/LocalStorage.ts:460:8 - (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
-// src/config/Configuration.ts:211:5 - (ae-forgotten-export) The symbol "InternalAuthOptions" needs to be exported by the entry point index.d.ts
+// src/config/Configuration.ts:199:5 - (ae-forgotten-export) The symbol "InternalAuthOptions" needs to be exported by the entry point index.d.ts
 // src/event/EventHandler.ts:114:8 - (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
 // src/event/EventHandler.ts:141:8 - (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
 // src/index.ts:8:12 - (tsdoc-characters-after-block-tag) The token "@azure" looks like a TSDoc tag but contains an invalid character "/"; if it is not a tag, use a backslash to escape the "@"

lib/msal-browser/docs/iframe-usage.md

@@ -25,7 +25,7 @@ Iframed and parent apps with the same-origin may have access to the same MSAL.js
 
 ### Apps with cross-origin
 
-Iframed and parent apps with cross-origin can make use of the [ssoSilent()](./login-user.md#silent-login-with-ssosilent) API to achieve single sign-on. To do so, the parent app should pass down either an **account**, a **loginHint** (username) or a **session id** (sid) to the iframed app. 
+Iframed and parent apps with cross-origin can make use of the [ssoSilent()](./login-user.md#silent-login-with-ssosilent) API to achieve single sign-on. To do so, the parent app should pass down either an **account**, a **loginHint** (username) or a **session id** (sid) to the iframed app.
 
 Apps can attempt to use `ssoSilent` without any of the above parameters. However be aware that there are [additional considerations](./login-user.md#silent-login-with-ssosilent) when using `ssoSilent` without providing any information about the user's session.
 
@@ -40,15 +40,15 @@ const myMSALObj = new msal.PublicClientApplication({
     auth: {
         clientId: "ENTER_CLIENT_ID",
         authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
-        redirectUri: "/redirect", // set to a blank page for handling auth code response via popups
+        redirectUri: "/redirect", // must point to a page that implements the redirect bridge
     },
     cache: {
         cacheLocation: "localStorage", // set your cache location to local storage
     },
 });
 
 window.onload = () => {
-    
+
     const urlParams = new URLSearchParams(window.location.search);
     const sid = urlParams.get("sid");
 
@@ -72,7 +72,7 @@ const myMSALObj = new msal.PublicClientApplication({
     auth: {
         clientId: "ENTER_CLIENT_ID",
         authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
-        redirectUri: "/redirect", // set to a blank page for handling auth code response via popups
+        redirectUri: "/redirect", // must point to a page that implements the redirect bridge
     },
     cache: {
         cacheLocation: "localStorage", // set your cache location to local storage

lib/msal-browser/docs/initialization.md

@@ -184,11 +184,13 @@ The popup APIs use ES6 Promises that resolve when the authentication flow in the
 
 #### RedirectUri Considerations
 
-When using popup APIs we recommend setting the `redirectUri` to a blank page or a page that does not implement MSAL. This will help prevent potential issues as well as improve performance. If your application is only using popup and silent APIs you can set this on the `PublicClientApplication` config. If your application also needs to support redirect APIs you can set the `redirectUri` on a per request basis:
+When using popup APIs, the `redirectUri` must point to a dedicated page that implements the MSAL redirect bridge. This page handles the authentication response and communicates it back to the main application.
+
+For detailed guidance on setting up the redirect page, see [RedirectUri considerations](./login-user.md#redirecturi-considerations).
 
 ```javascript
 msalInstance.loginPopup({
-    redirectUri: "http://localhost:3000/blank.html",
+    redirectUri: "http://localhost:3000/redirect",
 });
 ```