ID-1632 Working implementation

packages/passport/sdk/src/authManager.ts

@@ -30,6 +30,7 @@ import {
   isUserImx,
 } from './types';
 import { PassportConfiguration } from './config';
+import Overlay from './overlay/overlay';
 
 const formUrlEncodedHeader = {
   headers: {
@@ -175,18 +176,64 @@ export default class AuthManager {
    */
   public async login(anonymousId?: string): Promise<User> {
     return withPassportError<User>(async () => {
-      const rid = getDetail(Detail.RUNTIME_ID);
-      const popupWindowFeatures = { width: 410, height: 450 };
-      const oidcUser = await this.userManager.signinPopup({
-        extraQueryParams: {
-          ...(this.userManager.settings?.extraQueryParams ?? {}),
-          rid: rid || '',
-          third_party_a_id: anonymousId || '',
-        },
-        popupWindowFeatures,
-      });
+      const popupWindowTarget = 'passportLoginPrompt';
+      const signinPopup = async () => (
+        this.userManager.signinPopup({
+          extraQueryParams: {
+            ...(this.userManager.settings?.extraQueryParams ?? {}),
+            rid: getDetail(Detail.RUNTIME_ID) || '',
+            third_party_a_id: anonymousId || '',
+          },
+          popupWindowFeatures: {
+            width: 410,
+            height: 450,
+          },
+          popupWindowTarget,
+        })
+      );
 
-      return AuthManager.mapOidcUserToDomainModel(oidcUser);
+      // This promise attempts to open the signin popup, and displays the blocked popup overlay if necessary.
+      return new Promise((resolve, reject) => {
+        signinPopup()
+          .then((oidcUser) => {
+            resolve(AuthManager.mapOidcUserToDomainModel(oidcUser));
+          })
+          .catch((error: unknown) => {
+            // If the popup was blocked, append the blocked popup overlay.
+            if (error instanceof Error && error.message === 'Attempted to navigate on a disposed window') {
+              const overlay = new Overlay(this.config.popupOverlayOptions, true);
+              let popupHasOpened: boolean = false;
+              overlay.append(
+                async () => {
+                  try {
+                    if (!popupHasOpened) {
+                    // The user is attempting to open the popup again. It's safe to assume that this will not fail,
+                    // as there are no async operations between the button interaction & the popup being opened.
+                      popupHasOpened = true;
+                      const oidcUser = await signinPopup();
+                      overlay.remove();
+                      resolve(AuthManager.mapOidcUserToDomainModel(oidcUser));
+                    } else {
+                      // The popup has already been opened. By calling `window.open` with the same target as the
+                      // previously opened popup, no new window will be opened. Instead, the existing popup
+                      // will be focused and brought to the front reliably.
+                      window.open('', popupWindowTarget);
+                    }
+                  } catch (retryError: unknown) {
+                    overlay.remove();
+                    reject(retryError);
+                  }
+                },
+                () => {
+                  overlay.remove();
+                  reject(new Error('Popup closed by user'));
+                },
+              );
+            } else {
+              reject(error);
+            }
+          });
+      });
     }, PassportErrorType.AUTHENTICATION_ERROR);
   }
 

packages/passport/sdk/src/overlay/elements.ts

@@ -48,7 +48,9 @@ const getBlockedContents = () => `
         margin: 0 !important;
       "
     >
-      Please adjust your browser settings <br />and try again below
+      Please try again below.<br />
+      If the problem continues, adjust your<br />
+      browser settings.
     </p>
   `;