[v4] Fix window popup blocked for social login in iOS Safari when using useEmbeddedWallet hook (#2758)

Author: MananTank

.changeset/dirty-hairs-cross.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Fix window popup blocked for social login in iOS Safari when using `useEmbeddedWallet` hook

legacy_packages/react/src/evm/hooks/wallets/useEmbeddedWallet.ts

@@ -15,6 +15,7 @@ import {
 } from "@thirdweb-dev/wallets";
 import { useCallback } from "react";
 import { embeddedWallet } from "../../../wallet/wallets/embeddedWallet/embeddedWallet";
+import { openOauthSignInWindow } from "../../../wallet/utils/openOauthSignInWindow";
 
 /**
  * Hook to connect `EmbeddedWallet` which allows users to login via Email or social logins
@@ -130,6 +131,18 @@ export function useEmbeddedWallet() {
       }
       const wallet = create(embeddedWallet());
       try {
+        // open window immediately to fix issue in iOS Safari
+        // if not opened immediately, it adds a bit of delay between user click and opening the window which causes the popup to be blocked
+        if (
+          authParams.strategy === "apple" ||
+          authParams.strategy === "facebook" ||
+          authParams.strategy === "google"
+        ) {
+          const win = openOauthSignInWindow(authParams.strategy);
+          if (win) {
+            authParams.openedWindow = win;
+          }
+        }
         const authResult = await wallet.authenticate(authParams);
         await wallet.connect({ authResult });
         setWallet(wallet);

legacy_packages/react/src/wallet/utils/openOauthSignInWindow.ts

@@ -23,7 +23,7 @@ function getWidthAndHeight(authOption: EmbeddedWalletOauthStrategy) {
 
 export function openOauthSignInWindow(
   authOption: EmbeddedWalletOauthStrategy,
-  themeObj: Theme,
+  themeObj?: Theme,
 ) {
   // open the popup in the center of the screen
   const { height, width } = getWidthAndHeight(authOption);
@@ -39,8 +39,8 @@ export function openOauthSignInWindow(
     const title = getBodyTitle(authOption);
     win.document.title = title;
     win.document.body.innerHTML = spinnerWindowHtml;
-    win.document.body.style.background = themeObj.colors.modalBg;
-    win.document.body.style.color = themeObj.colors.accentText;
+    win.document.body.style.background = themeObj?.colors.modalBg || "black";
+    win.document.body.style.color = themeObj?.colors.accentText || "white";
   }
 
   // close it when current window is closed or refreshed