feat: implement login with popup consolidation

magiclabs · Nov 11, 2024 · 64dd614 · 64dd614
1 parent aab34fb
commit 64dd614
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 77 deletions.
diff --git a/packages/@magic-ext/oauth2/src/index.ts b/packages/@magic-ext/oauth2/src/index.ts
@@ -67,84 +67,15 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
   }
 
   public loginWithPopup(configuration: OAuthPopupConfiguration) {
-    let popup: Window | null = null;
-    const width = 448;
-    const height = 568;
-    const left = window.screenLeft + (window.outerWidth / 2 - width / 2);
-    const top = window.screenTop + window.outerHeight * 0.15;
-
-    return this.utils.createPromiEvent<OAuthRedirectResult>(async (resolve, reject) => {
-      // Reject if popup already exists to prevent multiple instances
-      if (popup) {
-        reject(new Error('Popup window already exists'));
-        return;
-      }
-
-      const parseRedirectResult = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Start, [
-        {
-          ...configuration,
-          apiKey: this.sdk.apiKey,
-          platform: 'web',
-          loginWithPopup: true,
-        },
-      ]);
-
-      const result = await this.request<OAuthRedirectStartResult | OAuthRedirectError>(parseRedirectResult);
-      const successResult = result as OAuthRedirectStartResult;
-      const errorResult = result as OAuthRedirectError;
-
-      if (errorResult.error) {
-        reject(
-          this.createError<OAuthErrorData>(errorResult.error, errorResult.error_description ?? 'An error occurred.', {
-            errorURI: errorResult.error_uri,
-            provider: errorResult.provider,
-          }),
-        );
-      }
-      if (!successResult?.oauthAuthoriationURI) {
-        reject(new Error('Internal error'));
-      }
-
-      popup = window.open(
-        successResult.oauthAuthoriationURI,
-        '_blank',
-        `width=${width},height=${height},left=${left},top=${top}`,
-      );
-
-      if (!popup) {
-        reject(new Error('Failed to open popup window'));
-        return;
-      }
+    const requestPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Popup, [
+      {
+        ...configuration,
+        apiKey: this.sdk.apiKey,
+        platform: 'web',
+      },
+    ]);
 
-      const checkPopupClosed = setInterval(() => {
-        if (popup?.closed) {
-          clearInterval(checkPopupClosed);
-          reject(new Error('User denied action'));
-        }
-      }, 1000);
-
-      const messageListener = async (event: MessageEvent) => {
-        if (event.data.msgType !== MagicIncomingWindowMessage.MAGIC_POPUP_RESPONSE || event.source !== popup) return;
-
-        if (event.data.method === MagicIncomingWindowMessage.MAGIC_POPUP_OAUTH_VERIFY_RESPONSE) {
-          window.removeEventListener('message', messageListener);
-          clearInterval(checkPopupClosed);
-
-          if (event.data.payload.authorizationResponseParams) {
-            try {
-              const verificationResult = await getResult.call(this, event.data.payload.authorizationResponseParams);
-              resolve(verificationResult);
-            } catch (error) {
-              reject(error);
-            }
-          } else {
-            reject(new Error('Internal error: Missing authorization response'));
-          }
-        }
-      };
-
-      window.addEventListener('message', messageListener);
-    });
+    return this.request<OAuthRedirectResult | OAuthRedirectError>(requestPayload);
   }
 }
 

diff --git a/packages/@magic-ext/oauth2/src/types.ts b/packages/@magic-ext/oauth2/src/types.ts
@@ -3,6 +3,7 @@ import { MagicUserMetadata } from '@magic-sdk/types';
 export enum OAuthPayloadMethods {
   Start = 'magic_oauth_login_with_redirect_start',
   Verify = 'magic_oauth_login_with_redirect_verify',
+  Popup = 'magic_oauth_login_with_popup',
 }
 
 export type OAuthProvider =