From 18e49ee3f65a0448affbe2233fa2b8160f6da77a Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Thu, 13 Feb 2025 15:21:18 +1300 Subject: [PATCH] [SDK] fix: Prevent popup when using auth redirect mode --- .changeset/gold-meals-prove.md | 5 ++++ .../src/app/connect/in-app-wallet/page.tsx | 22 +++++++++----- .../in-app-wallet/custom-login-form.tsx | 29 +++++++++++++++++-- .../in-app/core/interfaces/connector.ts | 2 +- .../src/wallets/in-app/core/wallet/index.ts | 2 +- .../src/wallets/in-app/web/lib/auth/oauth.ts | 9 ++++-- .../wallets/in-app/web/lib/web-connector.ts | 6 ++-- 7 files changed, 58 insertions(+), 17 deletions(-) create mode 100644 .changeset/gold-meals-prove.md diff --git a/.changeset/gold-meals-prove.md b/.changeset/gold-meals-prove.md new file mode 100644 index 00000000000..9f4ddfa6d90 --- /dev/null +++ b/.changeset/gold-meals-prove.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Prevent popup opening when logging in with auth mode: "redirect" diff --git a/apps/playground-web/src/app/connect/in-app-wallet/page.tsx b/apps/playground-web/src/app/connect/in-app-wallet/page.tsx index fa4b20c7039..855fd308ef5 100644 --- a/apps/playground-web/src/app/connect/in-app-wallet/page.tsx +++ b/apps/playground-web/src/app/connect/in-app-wallet/page.tsx @@ -80,15 +80,13 @@ function AnyAuth() { limits on customizations and auth methods.

- - - } + preview={} 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" diff --git a/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx b/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx index 6fef2578f4f..d3644f37dcd 100644 --- a/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx +++ b/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 ( -
+
@@ -62,6 +79,14 @@ export function CustomLoginForm() { > {isConnecting ? "Submitting..." : "Submit"} +

Or

+ {error &&

{error.message}

}
); diff --git a/packages/thirdweb/src/wallets/in-app/core/interfaces/connector.ts b/packages/thirdweb/src/wallets/in-app/core/interfaces/connector.ts index 7c2f5170d4f..5afe7d25df4 100644 --- a/packages/thirdweb/src/wallets/in-app/core/interfaces/connector.ts +++ b/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; // Login takes an auth token and connects a user with it loginWithAuthToken?( authResult: AuthStoredTokenWithCookieReturnType, diff --git a/packages/thirdweb/src/wallets/in-app/core/wallet/index.ts b/packages/thirdweb/src/wallets/in-app/core/wallet/index.ts index accf32262a6..990a5d6ef9c 100644 --- a/packages/thirdweb/src/wallets/in-app/core/wallet/index.ts +++ b/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, diff --git a/packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts b/packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts index 017672ff091..39629b20414 100644 --- a/packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts +++ b/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 { 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; diff --git a/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts b/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts index 57844579aef..78626542908 100644 --- a/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts +++ b/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 { + return loginWithOauthRedirect({ authOption: strategy, client: this.client, ecosystem: this.ecosystem,