Add new auth fields for redirect (#4099)

Author: WyattMufson

.changeset/tidy-beds-heal.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add new auth fields to support redirect in web and electron applications

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -181,6 +181,8 @@ export const ConnectWalletSocialOptions = (
         authOption: strategy,
         client: props.client,
         ecosystem: ecosystemInfo,
+        redirectUrl: walletConfig?.auth?.redirectUrl,
+        redirectExternally: walletConfig?.auth?.redirectExternally,
       });
     }
 

packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx

@@ -63,6 +63,8 @@ export function SocialLogin(props: {
               partnerId: wallet.getConfig()?.partnerId,
             }
           : undefined,
+        redirectUrl: walletConfig?.auth?.redirectUrl,
+        redirectExternally: walletConfig?.auth?.redirectExternally,
       });
     }
 

packages/thirdweb/src/wallets/ecosystem/types.ts

@@ -7,6 +7,8 @@ export type EcosystemWalletCreationOptions = {
   partnerId?: string;
   auth?: {
     mode?: "popup" | "redirect";
+    redirectUrl?: string;
+    redirectExternally?: boolean;
   };
 };
 

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

@@ -37,6 +37,14 @@ export type InAppWalletCreationOptions =
          * Whether to display the social auth prompt in a popup or redirect
          */
         mode?: "popup" | "redirect";
+        /**
+         * Optional url to redirect to after authentication
+         */
+        redirectUrl?: string;
+        /**
+         * Whether to handle the redirect in a new window
+         */
+        redirectExternally?: boolean;
         /**
          * The domain of the passkey to use for authentication
          */

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

@@ -30,12 +30,18 @@ export const loginWithOauthRedirect = (options: {
   authOption: SocialAuthOption;
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
+  redirectUrl?: string;
+  redirectExternally?: boolean;
 }): void => {
   const loginUrl = getLoginUrl({
     ...options,
     mode: "redirect",
   });
-  window.location.href = loginUrl;
+  if (options.redirectExternally === true) {
+    window.open(loginUrl);
+  } else {
+    window.location.href = loginUrl;
+  }
 };
 
 export const loginWithOauth = async (options: {