@b3dotfun/sdk 0.0.88-alpha.2 → 0.0.88-alpha.3

package/dist/esm/global-account/react/hooks/useTWAuth.d.ts

@@ -1,4 +1,7 @@
 import { Wallet } from "thirdweb/wallets";
+/**
+ * @deprecated Use useAuth() with Turnkey authentication instead
+ */
 export declare function useTWAuth(): {
     authenticate: (wallet: Wallet, partnerId: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
 };

package/dist/esm/global-account/react/hooks/useTWAuth.js

@@ -1,8 +1,16 @@
+/**
+ * @deprecated This hook is deprecated. Use useAuth() with Turnkey authentication instead.
+ * This file is kept for backward compatibility but should not be used in new code.
+ */
 import app from "../../../global-account/app.js";
 import debug from "../../../shared/utils/debug.js";
 import { useCallback } from "react";
 import { useSearchParam } from "./useSearchParamsSSR.js";
+/**
+ * @deprecated Use useAuth() with Turnkey authentication instead
+ */
 export function useTWAuth() {
+    console.warn("useTWAuth is deprecated. Please migrate to useAuth() with Turnkey authentication. See useTurnkeyAuth.ts for the new implementation.");
     const referralCode = useSearchParam("referralCode");
     const authenticate = useCallback(async (wallet, partnerId) => {
         if (!wallet || !wallet?.getAuthToken?.())

package/dist/esm/global-account/react/hooks/useTurnkeyAuth.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import app from "../../app.js";
 import { useB3Config } from "../components/index.js";
 import { useAuthStore } from "../stores/index.js";
-import { useAuthentication } from "./useAuthentication.js";
+import { useAuth } from "./useAuth.js";
 const debug = debugB3React("useTurnkeyAuth");
 /**
  * Hook for Turnkey email-based OTP authentication
@@ -19,29 +19,54 @@ export function useTurnkeyAuth() {
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const { partnerId } = useB3Config();
-    const { user } = useAuthentication(partnerId);
+    const { authenticate } = useAuth();
     /**
      * Step 1: Initiate login with email
-     * - Calls backend to create sub-org (if needed) and send OTP
+     * - Calls backend turnkey-jwt strategy (init action) to create sub-org (if needed) and send OTP
      * - Returns otpId to use in verification step
+     *
+     * Note: Uses the turnkey-jwt authentication strategy, not the service directly.
+     * The turnkey-jwt strategy handles both OTP flow (init/verify) and final authentication.
      */
     const initiateLogin = useCallback(async (email) => {
         setIsLoading(true);
         setError(null);
         setIsAuthenticating(true);
         try {
-            if (!user?.userId) {
-                throw new Error("User ID is required to initiate Turnkey login.");
-            }
             debug(`Initiating login for: ${email}`);
-            // Call FeathersJS service to initialize OTP
-            const data = await app.service("turnkey-auth").init({ email, userId: user.userId });
+            // Use authentication service with turnkey-jwt strategy (init action)
+            // userId is resolved from authentication context on the backend (params.user.userId)
+            // Backend will get userId from _params.user?.userId if authenticated, or handle unauthenticated case
+            // So we only need to send email
+            debug(`Calling app.authenticate with turnkey-jwt strategy (init action)`, { email });
+            const response = await app.authenticate({
+                strategy: "turnkey-jwt",
+                action: "init",
+                email,
+            });
+            // The strategy returns the TurnkeyAuthInitResponse directly
+            const data = response;
             debug(`OTP initialized successfully. OtpId: ${data.otpId}`);
             return data;
         }
         catch (err) {
             debug("Error initiating login:", err);
-            const errorMessage = err.message || "Failed to send OTP email. Please try again.";
+            // Provide more detailed error information
+            let errorMessage = "Failed to send OTP email. Please try again.";
+            if (err.message) {
+                errorMessage = err.message;
+            }
+            else if (err.name === "TypeError" && err.message?.includes("fetch")) {
+                errorMessage = "Network error: Unable to reach the server. Please check your connection and try again.";
+            }
+            else if (err.code === "ECONNREFUSED" || err.code === "ENOTFOUND") {
+                errorMessage = "Connection error: Unable to reach the server. Please check your internet connection.";
+            }
+            else if (err.response) {
+                // FeathersJS error response
+                errorMessage = err.response.message || err.message || errorMessage;
+                debug("FeathersJS error response:", err.response);
+            }
             setError(errorMessage);
             throw err;
         }
@@ -49,11 +74,11 @@ export function useTurnkeyAuth() {
             setIsLoading(false);
             setIsAuthenticating(false);
         }
-    }, [user, setIsAuthenticating]);
+    }, [setIsAuthenticating]);
     /**
      * Step 2: Verify OTP and authenticate
-     * - Verifies OTP with backend
-     * - Gets Turnkey session JWT
+     * - Verifies OTP with backend via turnkey-jwt strategy (verify action)
+     * - Gets Turnkey session JWT from the verify response
      * - Authenticates with b3-api using "turnkey-jwt" strategy
      * - JWT automatically stored in cookies by SDK
      */
@@ -62,19 +87,22 @@ export function useTurnkeyAuth() {
         setError(null);
         setIsAuthenticating(true);
         try {
-            debug(`Verifying OTP...`, { userId: user?.userId });
-            // Step 1: Verify OTP and get Turnkey session JWT
-            const { turnkeySessionJwt } = await app.service("turnkey-auth").verify({
+            debug(`Verifying OTP...`, { otpId });
+            // Step 1: Verify OTP with backend using turnkey-jwt strategy (verify action)
+            // This returns the Turnkey session JWT
+            const response = await app.authenticate({
+                strategy: "turnkey-jwt",
+                action: "verify",
                 otpId,
                 otpCode,
             });
-            debug(`OTP verified! Authenticating with b3-api...`);
+            // The strategy returns the TurnkeyAuthVerifyResponse directly
+            const verifyResult = response;
+            const { turnkeySessionJwt } = verifyResult;
+            debug(`OTP verified! Got Turnkey session JWT. Authenticating with b3-api...`);
             // Step 2: Authenticate with b3-api using Turnkey JWT
-            // The SDK will automatically store the b3-api JWT in cookies
-            const authResult = await app.authenticate({
-                strategy: "turnkey-jwt",
-                accessToken: turnkeySessionJwt,
-            });
+            // Use the unified useAuth hook for authentication with "turnkey-jwt" strategy
+            const authResult = await authenticate(turnkeySessionJwt, partnerId || "");
             debug(`Successfully authenticated with b3-api!`, authResult);
             // Update auth store to reflect authenticated state
             setIsAuthenticated(true);
@@ -94,7 +122,7 @@ export function useTurnkeyAuth() {
             setIsLoading(false);
             setIsAuthenticating(false);
         }
-    }, [user, setIsAuthenticating, setIsAuthenticated]);
+    }, [partnerId, setIsAuthenticating, setIsAuthenticated, authenticate]);
     const clearError = useCallback(() => {
         setError(null);
     }, []);

package/dist/types/global-account/react/hooks/index.d.ts

@@ -3,6 +3,7 @@ export { useAccountAssets } from "./useAccountAssets";
 export { useAccountWallet } from "./useAccountWallet";
 export { useAddTWSessionKey } from "./useAddTWSessionKey";
 export { useAnalytics } from "./useAnalytics";
+export { useAuth } from "./useAuth";
 export { useAuthentication } from "./useAuthentication";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";

package/dist/types/global-account/react/hooks/useAuth.d.ts

@@ -0,0 +1,76 @@
+import { Wallet } from "thirdweb/wallets";
+import { preAuthenticate } from "thirdweb/wallets/in-app";
+/**
+ * Unified authentication hook that uses Turnkey for authentication
+ * This replaces the previous Thirdweb-based authentication
+ *
+ * This hook provides 1:1 feature parity with useAuthentication.ts
+ */
+export declare function useAuth(): {
+    authenticate: (turnkeySessionJwt: string, partnerId: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
+    reAuthenticate: () => Promise<import("@feathersjs/authentication").AuthenticationResult>;
+    logout: (callback?: () => void) => Promise<void>;
+    isAuthenticated: boolean;
+    isReady: boolean;
+    isConnecting: boolean;
+    isConnected: boolean;
+    wallet: import("thirdweb/dist/types/wallets/in-app/core/wallet/types").EcosystemWallet;
+    preAuthenticate: typeof preAuthenticate;
+    connect: (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => Promise<void>;
+    isAuthenticating: boolean;
+    onConnect: (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => Promise<void>;
+    user: {
+        email?: string | undefined;
+        username?: string | undefined;
+        telNumber?: string | undefined;
+        ens?: string | undefined;
+        avatar?: string | undefined;
+        preferences?: {} | undefined;
+        referredBy?: string | {} | undefined;
+        sourceApp?: string | undefined;
+        referralCode?: string | undefined;
+        userGroups?: number[] | undefined;
+        isMigratedFromBSMNT?: boolean | undefined;
+        privyLinkedAccounts?: {
+            name?: string | undefined;
+            address?: string | undefined;
+            email?: string | undefined;
+            chain_type?: string | undefined;
+            lv?: number | undefined;
+            wallet_client_type?: string | undefined;
+            smart_wallet_type?: string | undefined;
+            subject?: string | undefined;
+            type: string;
+        }[] | undefined;
+        twProfiles?: {
+            type: string;
+            details: {
+                id?: string | undefined;
+                name?: string | undefined;
+                address?: string | undefined;
+                email?: string | undefined;
+                username?: string | undefined;
+                phone?: string | undefined;
+                fid?: string | undefined;
+            };
+        }[] | undefined;
+        turnkeySubOrgs?: {
+            hasDelegatedUser?: boolean | undefined;
+            subOrgId: string;
+            accounts: Record<string, any>[];
+        }[] | undefined;
+        _id: string | {};
+        userId: string;
+        smartAccountAddress: string;
+        createdAt: number;
+        updatedAt: number;
+        partnerIds: {
+            privyId?: string | undefined;
+            thirdwebId?: string | undefined;
+            turnkeyId?: string | undefined;
+            turnkeyOtpId?: string | undefined;
+        };
+    } | undefined;
+    refetchUser: () => Promise<import("@feathersjs/authentication").AuthenticationResult>;
+    setUser: (newUser?: import("@b3dotfun/b3-api").Users) => void;
+};

package/dist/types/global-account/react/hooks/useTWAuth.d.ts

@@ -1,4 +1,7 @@
 import { Wallet } from "thirdweb/wallets";
+/**
+ * @deprecated Use useAuth() with Turnkey authentication instead
+ */
 export declare function useTWAuth(): {
     authenticate: (wallet: Wallet, partnerId: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.88-alpha.2",
+  "version": "0.0.88-alpha.3",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/global-account/react/components/B3Provider/RelayKitProviderWrapper.tsx

@@ -19,6 +19,9 @@ export function RelayKitProviderWrapper({
     fetchChains();
   }, []);
 
+  const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
+  const appName = isTurnkeyPrimary ? "Smart Wallet" : "AnySpend";
+
   return (
     <RelayKitProvider
       options={{
@@ -30,7 +33,7 @@ export function RelayKitProviderWrapper({
         },
         chains: relayChains,
         privateChainIds: undefined,
-        appName: "AnySpend",
+        appName,
         useGasFeeEstimations: true,
       }}
     >

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -8,9 +8,10 @@ import {
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { Account } from "thirdweb/wallets";
+import { TurnkeyAuthModal } from "../TurnkeyAuthModal";
 import { SignInWithB3Privy } from "./SignInWithB3Privy";
 import { LoginStep, LoginStepContainer } from "./steps/LoginStep";
 import { LoginStepCustom } from "./steps/LoginStepCustom";
@@ -43,11 +44,14 @@ export function SignInWithB3Flow({
   const account = useActiveAccount();
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const isConnected = useAuthStore(state => state.isConnected);
+  const setIsConnected = useAuthStore(state => state.setIsConnected);
   const setJustCompletedLogin = useAuthStore(state => state.setJustCompletedLogin);
   const [refetchCount, setRefetchCount] = useState(0);
   const [refetchError, setRefetchError] = useState<string | null>(null);
   const [turnkeyAuthCompleted, setTurnkeyAuthCompleted] = useState(false);
+  const justCompletedLoginRef = useRef(false);
   const {
     data: signers,
     refetch: refetchSigners,
@@ -85,7 +89,9 @@ export function SignInWithB3Flow({
       refetchSigners();
       setRefetchQueued(false);
     }, backoffDelay);
-  }, [refetchCount, refetchSigners, onError, setRefetchQueued, refetchQueued]);
+    // State setters are stable and don't need to be in dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refetchCount, refetchSigners, onError, refetchQueued]);
 
   // Extract the completion flow logic to be reused
   const handlePostTurnkeyFlow = useCallback(() => {
@@ -157,6 +163,11 @@ export function SignInWithB3Flow({
       await refetchUser();
       debug("User refetched successfully");
 
+      // Set authentication and connection state so UI updates properly
+      setIsAuthenticated(true);
+      setIsConnected(true);
+      setJustCompletedLogin(true);
+
       // After user data is refreshed, close Turnkey modal and go back to sign-in flow
       debug("Switching back to signInWithB3 modal");
       setB3ModalContentType({
@@ -174,6 +185,8 @@ export function SignInWithB3Flow({
       });
       // The useEffect will re-run with updated user data to complete the sign-in process
     },
+    // Zustand setters are stable and don't need to be in dependencies:
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       refetchUser,
       setB3ModalContentType,
@@ -187,90 +200,103 @@ export function SignInWithB3Flow({
       closeAfterLogin,
       source,
       signersEnabled,
+      // Zustand setters are stable and don't need to be in dependencies:
+      // setIsAuthenticated, setIsConnected, setJustCompletedLogin
     ],
   );
 
   // Handle post-login flow after signers are loaded
-  useEffect(() => {
-    debug("@@SignInWithB3Flow:useEffect", {
-      isConnected,
-      isAuthenticating,
-      isFetchingSigners,
-      closeAfterLogin,
-      isOpen,
-      source,
-    });
+  useEffect(
+    () => {
+      debug("@@SignInWithB3Flow:useEffect", {
+        isConnected,
+        isAuthenticating,
+        isFetchingSigners,
+        closeAfterLogin,
+        isOpen,
+        source,
+      });
 
-    if (isConnected && isAuthenticated && user) {
-      // Mark that login just completed BEFORE opening manage account or closing modal
-      // This allows Turnkey modal to show (if enableTurnkey is true)
-      if (closeAfterLogin) {
-        setJustCompletedLogin(true);
-      }
+      if (isConnected && isAuthenticated && user) {
+        // Mark that login just completed BEFORE opening manage account or closing modal
+        // This allows Turnkey modal to show (if enableTurnkey is true)
+        // Use ref to prevent setting this multiple times and causing infinite loops
+        if (closeAfterLogin && !justCompletedLoginRef.current) {
+          justCompletedLoginRef.current = true;
+          setJustCompletedLogin(true);
+        }
 
-      // Check if we should show Turnkey login form
-      // Show if enableTurnkey is true AND user just logged in AND hasn't completed Turnkey auth in this session
-      // For new users (!turnkeyId): Show email form
-      // For returning users (turnkeyId && turnkeyEmail): Auto-skip to OTP
-      // Also check that we're not already showing the Turnkey modal
-      const hasTurnkeyId = user?.partnerIds?.turnkeyId;
-      const hasTurnkeyEmail = !!user?.email;
-      const isTurnkeyModalCurrentlyOpen = contentType?.type === "turnkeyAuth";
-      const shouldShowTurnkeyModal =
-        enableTurnkey &&
-        user &&
-        !turnkeyAuthCompleted &&
-        !isTurnkeyModalCurrentlyOpen &&
-        (!hasTurnkeyId || (hasTurnkeyId && hasTurnkeyEmail));
+        // Check if we should show Turnkey login form as SECONDARY option (after wallet connection)
+        // This only applies when:
+        // - enableTurnkey={true} is set on B3Provider
+        // - NEXT_PUBLIC_TURNKEY_PRIMARY is NOT set to true (otherwise Turnkey shows as primary)
+        // - User just logged in AND hasn't completed Turnkey auth in this session
+        // For new users (!turnkeyId): Show email form
+        // For returning users (turnkeyId && turnkeyEmail): Auto-skip to OTP
+        // Also check that we're not already showing the Turnkey modal
+        const hasTurnkeyId = user?.partnerIds?.turnkeyId;
+        const hasTurnkeyEmail = !!user?.email;
+        const isTurnkeyModalCurrentlyOpen = contentType?.type === "turnkeyAuth";
+        const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
+        const shouldShowTurnkeyModal =
+          enableTurnkey &&
+          !isTurnkeyPrimary &&
+          user &&
+          !turnkeyAuthCompleted &&
+          !isTurnkeyModalCurrentlyOpen &&
+          (!hasTurnkeyId || (hasTurnkeyId && hasTurnkeyEmail));
 
-      if (shouldShowTurnkeyModal) {
-        // Extract email from user object - check partnerIds.turnkeyEmail first, then twProfiles, then user.email
-        const email = user?.email || user?.twProfiles?.find((profile: any) => profile.details?.email)?.details?.email;
+        if (shouldShowTurnkeyModal) {
+          // Extract email from user object - check partnerIds.turnkeyEmail first, then twProfiles, then user.email
+          const email = user?.email || user?.twProfiles?.find((profile: any) => profile.details?.email)?.details?.email;
 
-        // Open Turnkey modal through the modal store
-        setB3ModalContentType({
-          type: "turnkeyAuth",
-          onSuccess: handleTurnkeySuccess,
-          onClose: () => {
-            // After closing Turnkey modal, continue with the rest of the flow
-            setTurnkeyAuthCompleted(true);
-            debug("Turnkey modal closed, running post-Turnkey flow");
-            handlePostTurnkeyFlow();
-          },
-          initialEmail: email,
-          skipToOtp: !!(hasTurnkeyId && hasTurnkeyEmail),
-          closable: false, // Turnkey modal cannot be closed until auth is complete
-        });
-        return;
-      }
+          // Open Turnkey modal through the modal store
+          setB3ModalContentType({
+            type: "turnkeyAuth",
+            onSuccess: handleTurnkeySuccess,
+            onClose: () => {
+              // After closing Turnkey modal, continue with the rest of the flow
+              setTurnkeyAuthCompleted(true);
+              debug("Turnkey modal closed, running post-Turnkey flow");
+              handlePostTurnkeyFlow();
+            },
+            initialEmail: email,
+            skipToOtp: !!(hasTurnkeyId && hasTurnkeyEmail),
+            closable: false, // Turnkey modal cannot be closed until auth is complete
+          });
+          return;
+        }
 
-      // Normal flow continues after Turnkey auth is complete (or if not needed)
-      handlePostTurnkeyFlow();
-    }
-  }, [
-    signers,
-    isFetchingSigners,
-    partnerId,
-    handleRefetchSigners,
-    source,
-    closeAfterLogin,
-    setB3ModalContentType,
-    chain,
-    onSessionKeySuccess,
-    setB3ModalOpen,
-    signersEnabled,
-    isConnected,
-    isAuthenticating,
-    isAuthenticated,
-    isOpen,
-    setJustCompletedLogin,
-    user,
-    enableTurnkey,
-    turnkeyAuthCompleted,
-    handleTurnkeySuccess,
-    contentType,
-    handlePostTurnkeyFlow,
-  ]);
+        // Normal flow continues after Turnkey auth is complete (or if not needed)
+        handlePostTurnkeyFlow();
+      }
+    },
+    // handlePostTurnkeyFlow changes when its dependencies change, causing infinite loops
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      signers,
+      isFetchingSigners,
+      partnerId,
+      handleRefetchSigners,
+      source,
+      closeAfterLogin,
+      setB3ModalContentType,
+      chain,
+      onSessionKeySuccess,
+      setB3ModalOpen,
+      signersEnabled,
+      isConnected,
+      isAuthenticating,
+      isAuthenticated,
+      isOpen,
+      user,
+      enableTurnkey,
+      turnkeyAuthCompleted,
+      handleTurnkeySuccess,
+      contentType,
+      // handlePostTurnkeyFlow - removed because it changes when signers/partnerId/etc change, triggering infinite loops
+    ],
+  );
 
   debug("render", {
     step,
@@ -343,32 +369,77 @@ export function SignInWithB3Flow({
         <div className="p-4 text-center text-red-500">{refetchError}</div>
       </LoginStepContainer>
     );
-  } else if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-    content = (
-      <LoginStepContainer partnerId={partnerId}>
-        <div className="my-8 flex min-h-[350px] items-center justify-center">
-          <Loading variant="white" size="lg" />
-        </div>
-      </LoginStepContainer>
-    );
   } else if (step === "login") {
-    // Custom strategy
-    if (strategies?.[0] === "privy") {
-      content = <SignInWithB3Privy onSuccess={handleLoginSuccess} chain={chain} />;
-    } else if (strategies) {
-      // Strategies are explicitly provided
+    // PRIORITY: If NEXT_PUBLIC_TURNKEY_PRIMARY is true, show Turnkey modal FIRST as the primary authentication option
+    // Setting NEXT_PUBLIC_TURNKEY_PRIMARY="true" implicitly enables Turnkey
+    const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
+    const shouldShowTurnkeyFirst = isTurnkeyPrimary && !turnkeyAuthCompleted;
+
+    if (shouldShowTurnkeyFirst) {
+      // Don't show loading spinner for Turnkey - let the modal handle its own loading state
+      // This prevents the infinite loop where isAuthenticating causes the modal to be replaced
+      debug("Showing Turnkey as primary authentication option", {
+        isTurnkeyPrimary,
+        turnkeyAuthCompleted,
+        isAuthenticated,
+      });
+      // Show Turnkey authentication as primary option
       content = (
-        <LoginStepCustom
-          strategies={strategies}
-          chain={chain}
-          onSuccess={handleLoginSuccess}
-          onError={onError}
-          automaticallySetFirstEoa={!!automaticallySetFirstEoa}
-        />
+        <LoginStepContainer partnerId={partnerId}>
+          <TurnkeyAuthModal
+            onSuccess={async (authenticatedUser: any) => {
+              debug("Turnkey authentication successful in primary flow", { authenticatedUser });
+              setTurnkeyAuthCompleted(true);
+              // After Turnkey auth, refetch user to get the full user object
+              await refetchUser();
+              // User is now authenticated via Turnkey
+              // Set both isAuthenticated and isConnected to true so UI updates properly
+              // Wallet connection is optional and can happen later for signing transactions
+              setIsAuthenticated(true);
+              setIsConnected(true);
+              setJustCompletedLogin(true);
+              // Call the login success callback
+              onLoginSuccess?.({} as Account);
+            }}
+            onClose={() => {
+              // If user closes Turnkey modal, they can still use wallet connection as fallback
+              setTurnkeyAuthCompleted(true);
+            }}
+            initialEmail=""
+            skipToOtp={false}
+          />
+        </LoginStepContainer>
       );
     } else {
-      // Default to handle all strategies we support
-      content = <LoginStep chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
+      // Show loading spinner only if not in Turnkey flow
+      if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        content = (
+          <LoginStepContainer partnerId={partnerId}>
+            <div className="my-8 flex min-h-[350px] items-center justify-center">
+              <Loading variant="white" size="lg" />
+            </div>
+          </LoginStepContainer>
+        );
+      } else {
+        // Custom strategy
+        if (strategies?.[0] === "privy") {
+          content = <SignInWithB3Privy onSuccess={handleLoginSuccess} chain={chain} />;
+        } else if (strategies) {
+          // Strategies are explicitly provided
+          content = (
+            <LoginStepCustom
+              strategies={strategies}
+              chain={chain}
+              onSuccess={handleLoginSuccess}
+              onError={onError}
+              automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+            />
+          );
+        } else {
+          // Default to handle all strategies we support
+          content = <LoginStep chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
+        }
+      }
     }
   }
 

package/src/global-account/react/components/TurnkeyAuthModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTurnkeyAuth } from "../hooks/useTurnkeyAuth";
 
 type ModalStep = "email" | "otp" | "success";
@@ -94,17 +94,20 @@ export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipTo
     }
   };
 
+  const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
+  const walletBrand = isTurnkeyPrimary ? "Smart Wallet" : "AnySpend Wallet";
+
   return (
     <div className="font-neue-montreal p-8">
       {/* Email Step */}
       {step === "email" && (
         <>
           <h2 className="mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white">
-            Setup your AnySpend Wallet
+            Setup your {walletBrand}
           </h2>
           <div className="mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400">
             <p>
-              AnySpend uses a secure,
+              {isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,"}
               <br />
               embedded wallet to fund your workflows.
             </p>
@@ -158,7 +161,7 @@ export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipTo
           <h2 className="mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white">2FA Security</h2>
           <div className="mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400">
             <p>
-              AnySpend uses a secure,
+              {isTurnkeyPrimary ? "We use a secure," : "AnySpend uses a secure,"}
               <br />
               embedded wallet to fund your workflows.
               <br />