Enable signin using popup modals instead of redirections

packages/lit-auth-client/src/lib/providers/DiscordProvider.ts

@@ -10,6 +10,7 @@ import {
   parseLoginParams,
   getStateParam,
   decode,
+  LIT_LOGIN_GATEWAY,
 } from '../utils';
 import { ethers } from 'ethers';
 
@@ -99,6 +100,61 @@ export default class DiscordProvider extends BaseProvider {
     return authMethod;
   }
 
+  /**
+   * Sign in using popup window
+   *
+   * @param baseURL
+   */
+  public async signInUsingPopup(baseURL: string): Promise<AuthMethod> {
+    const width = 500;
+    const height = 600;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
+
+    const url = await prepareLoginUrl('discord', this.redirectUri, baseURL);
+    const popup = window.open(
+      `${url}&caller=${window.location.origin}`,
+      'popup',
+      `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`
+    );
+
+    if (!popup) {
+      throw new Error('Failed to open popup window');
+    }
+
+    return new Promise((resolve, reject) => {
+      // window does not have a closed event, so we need to poll using a timer
+      const interval = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(interval);
+          reject(new Error('User closed popup window'));
+        }
+      }, 1000);
+
+      window.addEventListener('message', (event) => {
+        if (event.origin !== (baseURL || LIT_LOGIN_GATEWAY)) {
+          return;
+        }
+
+        const { provider, token, error } = event.data;
+
+        if (error) {
+          clearInterval(interval);
+          reject(new Error(error));
+        }
+
+        if (provider === 'discord' && token) {
+          clearInterval(interval);
+          popup.close();
+          resolve({
+            authMethodType: AuthMethodType.Discord,
+            accessToken: token,
+          });
+        }
+      });
+    });
+  }
+
   /**
    * Get auth method id that can be used to look up and interact with
    * PKPs associated with the given auth method

packages/lit-auth-client/src/lib/providers/GoogleProvider.ts

@@ -10,6 +10,7 @@ import {
   parseLoginParams,
   getStateParam,
   decode,
+  LIT_LOGIN_GATEWAY,
 } from '../utils';
 import { BaseProvider } from './BaseProvider';
 import { ethers } from 'ethers';
@@ -109,6 +110,61 @@ export default class GoogleProvider extends BaseProvider {
     return authMethod;
   }
 
+  /**
+   * Sign in using popup window
+   *
+   * @param baseURL
+   */
+  public async signInUsingPopup(baseURL: string): Promise<AuthMethod> {
+    const width = 500;
+    const height = 600;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
+
+    const url = await prepareLoginUrl('google', this.redirectUri, baseURL);
+    const popup = window.open(
+      `${url}&caller=${window.location.origin}`,
+      'popup',
+      `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`
+    );
+
+    if (!popup) {
+      throw new Error('Failed to open popup window');
+    }
+
+    return new Promise((resolve, reject) => {
+      // window does not have a closed event, so we need to poll using a timer
+      const interval = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(interval);
+          reject(new Error('User closed popup window'));
+        }
+      }, 1000);
+
+      window.addEventListener('message', (event) => {
+        if (event.origin !== (baseURL || LIT_LOGIN_GATEWAY)) {
+          return;
+        }
+
+        const { provider, token, error } = event.data;
+
+        if (error) {
+          clearInterval(interval);
+          reject(new Error(error));
+        }
+
+        if (provider === 'google' && token) {
+          clearInterval(interval);
+          popup.close();
+          resolve({
+            authMethodType: AuthMethodType.Google,
+            accessToken: token,
+          });
+        }
+      });
+    });
+  }
+
   /**
    * Get auth method id that can be used to look up and interact with
    * PKPs associated with the given auth method

packages/lit-auth-client/src/lib/utils.ts

@@ -3,6 +3,7 @@ import { LoginUrlParams } from '@lit-protocol/types';
 import * as cbor from 'cbor-web';
 
 export const STATE_PARAM_KEY = 'lit-state-param';
+export const LIT_LOGIN_GATEWAY = 'https://login.litgateway.com';
 
 /**
  * Check if OAuth provider is supported
@@ -25,9 +26,9 @@ export function isSocialLoginSupported(provider: string): boolean {
  */
 export async function prepareLoginUrl(
   provider: string,
-  redirectUri: string
+  redirectUri: string,
+  baseUrl = LIT_LOGIN_GATEWAY,
 ): Promise<string> {
-  const baseUrl = 'https://login.litgateway.com';
   const loginUrl = `${baseUrl}${getLoginRoute(provider)}`;
   const state = encode(await setStateParam());
   const authParams = {