Pop-Up Hangs With Federated Connections and Incompatible IdP Cross-Origin-Opener-Policy Header in Auth0
Last Updated:
Overview
When using auth0-spa-js with federated connections, the pop-up window hangs open if the Identity Provider (IdP) sends a restrictive Cross-Origin-Opener-Policy (COOP) header. This occurs because the header severs the connection between the pop-up and the main window. Configuring the IdP to use the unsafe-none policy resolves this issue. Specifically, when calling auth0.loginWithPopup() or auth0.getTokenWithPopup(), the pop-up window hangs open with a 200 response from /authorize/resume.
Applies To
- Auth0
auth0-spa-js- Federated Connections
Cause
The IdP sends the Cross-Origin-Opener-Policy: same-origin-allow-popups response header. According to the MDN Web Docs, this policy isolates the browsing context by severing the link between the pop-up window and the opener. The auth0-spa-js Software Development Kit (SDK) internally uses window.open() to launch the pop-up and listen for messages. Normally, window.open() returns a reference to the new window, and the new window retains a reference to the opener via window.opener. However, when a page loaded inside the pop-up enforces this header, the browser breaks the connection between the two windows for security reasons. As a result, the window.opener property of the pop-up becomes null, and the SDK can no longer communicate with the pop-up. This causes the SDK to throw a PopupCancelledError because the SDK interprets the loss of connection as a closed popup. Since this behavior originates from the IdP's response headers, the SDK cannot control or mitigate it.
Solution
How is the pop-up hang resolved for federated connections?
Modify the Identity Provider response headers to use the unsafe-none policy and remove the restrictive same-origin-allow-popups policy.
- Access the Identity Provider configuration settings.
- Update the response headers to include the following Cross-Origin-Opener-Policy header.
Cross-Origin-Opener-Policy: unsafe-none; report-to="coop" - Remove the
Cross-Origin-Opener-Policy: same-origin-allow-popupsheader from the configuration.
