[SDK] fix: Prevent popup when using auth redirect mode (#6246)

Author: joaquim-verges

.changeset/gold-meals-prove.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Prevent popup opening when logging in with auth mode: "redirect"

apps/playground-web/src/app/connect/in-app-wallet/page.tsx

@@ -80,15 +80,13 @@ function AnyAuth() {
           limits on customizations and auth methods.
         </p>
         <CodeExample
-          preview={
-            <div className="w-1/2">
-              <CustomLoginForm />
-            </div>
-          }
+          preview={<CustomLoginForm />}
           code={`import { useState } from "react";
 import { useConnect } from "thirdweb/react";
 import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
 
+const wallet = inAppWallet();
+
 export function CustomLoginUi() {
   const { connect, isConnecting, error } = useConnect();
 
@@ -101,10 +99,9 @@ export function CustomLoginUi() {
     });
   };
 
-  const handleLogin = async (email: string, verificationCode: string) => {
+  const loginWithEmail = async (email: string, verificationCode: string) => {
     // verify email with verificationCode and connect
     connect(async () => {
-      const wallet = inAppWallet();
       await wallet.connect({
         client,
         strategy: "email",
@@ -114,6 +111,17 @@ export function CustomLoginUi() {
       return wallet;
     });
   };
+
+  const loginWithGoogle = async () => {
+    // connect with google
+    connect(async () => {
+      await wallet.connect({
+        client,
+        strategy: "google",
+      });
+      return wallet;
+    });
+  };
 }
 `}
           lang="tsx"

apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx

@@ -27,9 +27,26 @@ export function CustomLoginForm() {
       const wallet = inAppWallet();
       await wallet.connect({
         strategy: "email",
-        client: THIRDWEB_CLIENT,
         email,
         verificationCode,
+        client: THIRDWEB_CLIENT,
+      });
+      return wallet;
+    });
+  };
+
+  const loginWithGoogle = async () => {
+    connect(async () => {
+      const wallet = inAppWallet({
+        auth: {
+          options: ["google"],
+          mode: "redirect",
+          redirectUrl: `${window.location.origin}/connect/in-app-wallet`,
+        },
+      });
+      await wallet.connect({
+        strategy: "google",
+        client: THIRDWEB_CLIENT,
       });
       return wallet;
     });
@@ -41,7 +58,7 @@ export function CustomLoginForm() {
 
   if (screen === "login") {
     return (
-      <div className="flex flex-col space-y-2">
+      <div className="flex w-full flex-col space-y-4">
         <label htmlFor="email" className="font-medium text-sm">
           Email Address
         </label>
@@ -62,6 +79,14 @@ export function CustomLoginForm() {
         >
           {isConnecting ? "Submitting..." : "Submit"}
         </button>
+        <p className="text-center text-sm text-white">Or</p>
+        <button
+          type="button"
+          onClick={loginWithGoogle}
+          className="rounded-lg bg-blue-500 px-4 py-2 text-white transition-colors enabled:hover:bg-blue-600"
+        >
+          Login with Google
+        </button>
         {error && <p className="max-w-[300px] text-red-500">{error.message}</p>}
       </div>
     );

packages/thirdweb/src/wallets/in-app/core/interfaces/connector.ts

@@ -21,7 +21,7 @@ export interface InAppConnector {
     strategy: SocialAuthOption,
     mode?: "redirect" | "popup" | "window",
     redirectUrl?: string,
-  ): void;
+  ): Promise<void>;
   // Login takes an auth token and connects a user with it
   loginWithAuthToken?(
     authResult: AuthStoredTokenWithCookieReturnType,

packages/thirdweb/src/wallets/in-app/core/wallet/index.ts

@@ -46,7 +46,7 @@ export async function connectInAppWallet(
   ) {
     const strategy = options.strategy;
     if (socialAuthOptions.includes(strategy as SocialAuthOption)) {
-      connector.authenticateWithRedirect(
+      await connector.authenticateWithRedirect(
         strategy as SocialAuthOption,
         createOptions?.auth?.mode,
         createOptions?.auth?.redirectUrl,

packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts

@@ -26,13 +26,13 @@ const closeWindow = ({
   }
 };
 
-export const loginWithOauthRedirect = (options: {
+export async function loginWithOauthRedirect(options: {
   authOption: OAuthOption;
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
   redirectUrl?: string;
   mode?: "redirect" | "popup" | "window";
-}): void => {
+}): Promise<void> {
   const loginUrl = getLoginUrl({
     ...options,
     mode: options.mode || "redirect",
@@ -42,7 +42,10 @@ export const loginWithOauthRedirect = (options: {
   } else {
     window.open(loginUrl);
   }
-};
+  // wait for 5 secs for the redirect to happen
+  // that way it interrupts the rest of the execution that would normally keep connecting
+  await new Promise((resolve) => setTimeout(resolve, 5000));
+}
 
 export const loginWithOauth = async (options: {
   authOption: OAuthOption;

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts

@@ -260,12 +260,12 @@ export class InAppWebConnector implements InAppConnector {
     });
   }
 
-  authenticateWithRedirect(
+  async authenticateWithRedirect(
     strategy: SocialAuthOption,
     mode?: "redirect" | "popup" | "window",
     redirectUrl?: string,
-  ): void {
-    loginWithOauthRedirect({
+  ): Promise<void> {
+    return loginWithOauthRedirect({
       authOption: strategy,
       client: this.client,
       ecosystem: this.ecosystem,