@b3dotfun/sdk 0.0.77-alpha.0 → 0.0.77-alpha.2

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -13,16 +13,18 @@ const MAX_REFETCH_ATTEMPTS = 20;
  * Handles different login providers, authentication steps, and session key management
  */
 export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
-    const { automaticallySetFirstEoa } = useB3();
+    const { automaticallySetFirstEoa, user, refetchUser, enableTurnkey } = useB3();
     const [step, setStep] = useState(source === "requestPermissions" ? null : "login");
     const [sessionKeyAdded, setSessionKeyAdded] = useState(source === "requestPermissions" ? true : false);
-    const { setB3ModalContentType, setB3ModalOpen, isOpen } = useModalStore();
+    const { setB3ModalContentType, setB3ModalOpen, isOpen, contentType } = useModalStore();
     const account = useActiveAccount();
     const isAuthenticating = useAuthStore(state => state.isAuthenticating);
     const isAuthenticated = useAuthStore(state => state.isAuthenticated);
     const isConnected = useAuthStore(state => state.isConnected);
+    const setJustCompletedLogin = useAuthStore(state => state.setJustCompletedLogin);
     const [refetchCount, setRefetchCount] = useState(0);
     const [refetchError, setRefetchError] = useState(null);
+    const [turnkeyAuthCompleted, setTurnkeyAuthCompleted] = useState(false);
     const { data: signers, refetch: refetchSigners, isFetching: isFetchingSigners, } = useGetAllTWSigners({
         chain,
         accountAddress: account?.address,
@@ -52,6 +54,104 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
             setRefetchQueued(false);
         }, backoffDelay);
     }, [refetchCount, refetchSigners, onError, setRefetchQueued, refetchQueued]);
+    // Extract the completion flow logic to be reused
+    const handlePostTurnkeyFlow = useCallback(() => {
+        debug("Running post-Turnkey flow logic");
+        // Check if we already have a signer for this partner
+        const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
+        if (hasExistingSigner) {
+            // Path 1: User already has a signer for this partner
+            setSessionKeyAdded(true);
+            onSessionKeySuccess?.();
+            if (closeAfterLogin) {
+                setB3ModalOpen(false);
+            }
+            else {
+                setB3ModalContentType({
+                    type: "manageAccount",
+                    chain,
+                    partnerId,
+                });
+            }
+        }
+        else if (signersEnabled) {
+            // Path 2: No existing signer, but signers are enabled
+            if (source !== "requestPermissions") {
+                // Navigate to permissions step to request new signer
+                setStep("permissions");
+            }
+            else {
+                // Already in request permissions flow, retry fetching signers
+                handleRefetchSigners();
+            }
+        }
+        else {
+            // Path 3: No existing signer and signers are not enabled
+            // Default handling for when no signer exists and signers are not enabled
+            if (closeAfterLogin) {
+                setB3ModalOpen(false);
+            }
+            else {
+                // if not closed, default to manage account
+                setB3ModalContentType({
+                    type: "manageAccount",
+                    chain,
+                    partnerId,
+                });
+            }
+        }
+    }, [
+        signers,
+        partnerId,
+        onSessionKeySuccess,
+        closeAfterLogin,
+        setB3ModalOpen,
+        setB3ModalContentType,
+        chain,
+        source,
+        signersEnabled,
+        handleRefetchSigners,
+        setSessionKeyAdded,
+    ]);
+    // Define handleTurnkeySuccess before the useEffect that uses it
+    const handleTurnkeySuccess = useCallback(async (user) => {
+        debug("Turnkey authentication successful - setting completed flag", { user });
+        // Set completed flag FIRST before any async operations
+        setTurnkeyAuthCompleted(true);
+        // Refetch user to update the user state with Turnkey ID
+        debug("Refetching user after Turnkey success...");
+        await refetchUser();
+        debug("User refetched successfully");
+        // After user data is refreshed, close Turnkey modal and go back to sign-in flow
+        debug("Switching back to signInWithB3 modal");
+        setB3ModalContentType({
+            type: "signInWithB3",
+            strategies,
+            onLoginSuccess,
+            onSessionKeySuccess,
+            onError,
+            chain,
+            sessionKeyAddress,
+            partnerId,
+            closeAfterLogin,
+            source,
+            signersEnabled,
+        });
+        // The useEffect will re-run with updated user data to complete the sign-in process
+    }, [
+        refetchUser,
+        setB3ModalContentType,
+        strategies,
+        onLoginSuccess,
+        onSessionKeySuccess,
+        onError,
+        chain,
+        sessionKeyAddress,
+        partnerId,
+        closeAfterLogin,
+        source,
+        signersEnabled,
+    ]);
     // Handle post-login flow after signers are loaded
     useEffect(() => {
         debug("@@SignInWithB3Flow:useEffect", {
@@ -62,41 +162,46 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
             isOpen,
             source,
         });
-        if (isConnected && isAuthenticated) {
-            // Check if we already have a signer for this partner
-            const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
-            if (hasExistingSigner) {
-                setSessionKeyAdded(true);
-                onSessionKeySuccess?.();
-                if (closeAfterLogin) {
-                    setB3ModalOpen(false);
-                }
-                else {
-                    setB3ModalContentType({
-                        type: "manageAccount",
-                        chain,
-                        partnerId,
-                    });
-                }
-            }
-            else if (source !== "requestPermissions") {
-                if (signersEnabled)
-                    setStep("permissions");
-            }
-            else {
-                if (signersEnabled)
-                    handleRefetchSigners();
-            }
-            // Default handling
+        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) {
-                setB3ModalOpen(false);
+                setJustCompletedLogin(true);
             }
-            // if not closed, always default to manage account
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-            });
+            // 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));
+            if (shouldShowTurnkeyModal) {
+                // Extract email from user object - check partnerIds.turnkeyEmail first, then twProfiles, then user.email
+                const email = user?.email || user?.twProfiles?.find((profile) => 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;
+            }
+            // Normal flow continues after Turnkey auth is complete (or if not needed)
+            handlePostTurnkeyFlow();
         }
     }, [
         signers,
@@ -114,6 +219,13 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         isAuthenticating,
         isAuthenticated,
         isOpen,
+        setJustCompletedLogin,
+        user,
+        enableTurnkey,
+        turnkeyAuthCompleted,
+        handleTurnkeySuccess,
+        contentType,
+        handlePostTurnkeyFlow,
     ]);
     debug("render", {
         step,
@@ -168,24 +280,28 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
             });
         }
     }, [chain, onError, onSessionKeySuccessEnhanced, sessionKeyAddress, setB3ModalContentType, step]);
+    // Render content based on current step/state
+    let content = null;
     // Display error if refetch limit exceeded
     if (refetchError) {
-        return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
+        content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
-    if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-        return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
+    else if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
     }
-    if (step === "login") {
+    else if (step === "login") {
         // Custom strategy
         if (strategies?.[0] === "privy") {
-            return _jsx(SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
+            content = _jsx(SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
+        }
+        else if (strategies) {
+            // Strategies are explicitly provided
+            content = (_jsx(LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
         }
-        // Strategies are explicitly provided
-        if (strategies) {
-            return (_jsx(LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
+        else {
+            // Default to handle all strategies we support
+            content = _jsx(LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
         }
-        // Default to handle all strategies we support
-        return _jsx(LoginStep, { chain: chain, onSuccess: handleLoginSuccess, onError: onError });
     }
-    return null;
+    return content;
 }

package/dist/esm/global-account/react/components/TurnkeyAuthModal.d.ts

@@ -0,0 +1,8 @@
+interface TurnkeyAuthModalProps {
+    onClose: () => void;
+    onSuccess: (_user: any) => void;
+    initialEmail?: string;
+    skipToOtp?: boolean;
+}
+export declare function TurnkeyAuthModal({ onClose, onSuccess, initialEmail, skipToOtp }: TurnkeyAuthModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/TurnkeyAuthModal.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { useTurnkeyAuth } from "../hooks/useTurnkeyAuth.js";
+export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipToOtp = false }) {
+    const [step, setStep] = useState(skipToOtp ? "otp" : "email");
+    const [email, setEmail] = useState(initialEmail);
+    const [otpCode, setOtpCode] = useState("");
+    const [otpId, setOtpId] = useState("");
+    const autoSubmitTriggeredRef = useRef(false);
+    const { initiateLogin, verifyOtp, isLoading, error, clearError } = useTurnkeyAuth();
+    // Update email when initialEmail changes
+    useEffect(() => {
+        if (initialEmail && initialEmail !== email) {
+            setEmail(initialEmail);
+        }
+    }, [initialEmail, email]);
+    // Auto-submit email form if skipToOtp is true - triggers on mount when skipToOtp=true
+    useEffect(() => {
+        if (skipToOtp && email && step === "otp" && !otpId && !isLoading && !autoSubmitTriggeredRef.current) {
+            autoSubmitTriggeredRef.current = true;
+            // Call initiateLogin directly to get OTP
+            initiateLogin(email)
+                .then(result => {
+                setOtpId(result.otpId);
+            })
+                .catch(err => {
+                console.error("Failed to initiate login:", err);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [skipToOtp, email, step, otpId, isLoading]);
+    const handleEmailSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const result = await initiateLogin(email);
+            setOtpId(result.otpId);
+            setStep("otp");
+        }
+        catch (err) {
+            // Error is handled by the hook
+            console.error("Failed to initiate login:", err);
+        }
+    };
+    const handleOtpSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const result = await verifyOtp(otpId, otpCode);
+            setStep("success");
+            // Auto-close after success and notify parent
+            setTimeout(() => {
+                onSuccess(result.user);
+                handleClose();
+            }, 1500);
+        }
+        catch (err) {
+            // Error is handled by the hook
+            console.error("Failed to verify OTP:", err);
+        }
+    };
+    const handleClose = () => {
+        // Reset state
+        setStep("email");
+        setEmail("");
+        setOtpCode("");
+        setOtpId("");
+        autoSubmitTriggeredRef.current = false;
+        clearError();
+        onClose();
+    };
+    const handleResendOtp = async () => {
+        try {
+            const result = await initiateLogin(email);
+            setOtpId(result.otpId);
+            clearError();
+        }
+        catch (err) {
+            console.error("Failed to resend OTP:", err);
+        }
+    };
+    return (_jsxs("div", { className: "font-neue-montreal p-8", children: [step === "email" && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white", children: "Setup your AnySpend Wallet" }), _jsxs("div", { className: "mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400", children: [_jsxs("p", { children: ["AnySpend uses a secure,", _jsx("br", {}), "embedded wallet to fund your workflows."] }), _jsxs("p", { children: ["Please provide an email address to secure", _jsx("br", {}), "your wallet."] })] }), _jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-4", children: [_jsx("div", { children: _jsx("input", { type: "email", placeholder: "email", value: email, onChange: e => setEmail(e.target.value), required: true, disabled: isLoading, className: "w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500" }) }), error && (_jsx("div", { className: "rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400", children: error })), _jsx("button", { type: "submit", disabled: isLoading || !email, className: "w-full rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700", children: isLoading ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }), "Sending..."] })) : ("Continue") })] })] })), step === "otp" && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white", children: "2FA Security" }), _jsx("div", { className: "mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400", children: _jsxs("p", { children: ["AnySpend uses a secure,", _jsx("br", {}), "embedded wallet to fund your workflows.", _jsx("br", {}), "Please provide 2FA code sent to your email."] }) }), _jsxs("form", { onSubmit: handleOtpSubmit, className: "space-y-4", children: [_jsx("div", { children: _jsx("input", { type: "text", placeholder: "Enter code", value: otpCode, onChange: e => setOtpCode(e.target.value.toUpperCase()), required: true, disabled: isLoading, autoFocus: true, className: "w-full rounded-lg border border-gray-300 px-4 py-3 text-center font-mono text-lg uppercase tracking-wider text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500", maxLength: 20 }) }), error && (_jsx("div", { className: "rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400", children: error })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("button", { type: "submit", disabled: isLoading || !otpCode, className: "w-full rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700", children: isLoading ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }), "Verifying..."] })) : ("Confirm") }), _jsx("button", { type: "button", onClick: handleResendOtp, disabled: isLoading, className: "text-sm text-blue-600 hover:text-blue-700 hover:underline disabled:cursor-not-allowed disabled:text-gray-400 dark:text-blue-400 dark:hover:text-blue-300", children: "Resend code" })] })] })] })), step === "success" && (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mb-6 flex items-center justify-center", children: _jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20", children: _jsx("svg", { className: "h-8 w-8 text-green-600 dark:text-green-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) }), _jsx("h2", { className: "mb-2 text-2xl font-bold text-gray-900 dark:text-white", children: "Successfully Authenticated!" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Redirecting..." })] }))] }));
+}

package/dist/esm/global-account/react/components/index.d.ts

@@ -12,6 +12,7 @@ export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
+export { TurnkeyAuthModal } from "./TurnkeyAuthModal";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 export { Deposit } from "./Deposit/Deposit";
 export { Send } from "./Send/Send";

package/dist/esm/global-account/react/components/index.js

@@ -15,6 +15,8 @@ export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
 export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy.js";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep.js";
 export { getConnectOptionsFromStrategy, isWalletType } from "./SignInWithB3/utils/signInUtils.js";
+// Turnkey Components
+export { TurnkeyAuthModal } from "./TurnkeyAuthModal.js";
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount.js";
 // Deposit Components

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

@@ -40,5 +40,6 @@ export { useTokenFromUrl } from "./useTokenFromUrl";
 export { useTokenPrice } from "./useTokenPrice";
 export { useTokenPriceWithFallback } from "./useTokenPriceWithFallback";
 export { useTokensFromAddress } from "./useTokensFromAddress";
+export { useTurnkeyAuth } from "./useTurnkeyAuth";
 export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";

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

@@ -40,5 +40,6 @@ export { useTokenFromUrl } from "./useTokenFromUrl.js";
 export { useTokenPrice } from "./useTokenPrice.js";
 export { useTokenPriceWithFallback } from "./useTokenPriceWithFallback.js";
 export { useTokensFromAddress } from "./useTokensFromAddress.js";
+export { useTurnkeyAuth } from "./useTurnkeyAuth.js";
 export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute.js";
 export { useURLParams } from "./useURLParams.js";

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

@@ -46,6 +46,11 @@ export declare function useAuthentication(partnerId: string): {
                 fid?: string | undefined;
             };
         }[] | undefined;
+        turnkeySubOrgs?: {
+            hasDelegatedUser?: boolean | undefined;
+            subOrgId: string;
+            accounts: Record<string, any>[];
+        }[] | undefined;
         _id: string | {};
         userId: string;
         smartAccountAddress: string;
@@ -54,6 +59,8 @@ export declare function useAuthentication(partnerId: string): {
         partnerIds: {
             privyId?: string | undefined;
             thirdwebId?: string | undefined;
+            turnkeyId?: string | undefined;
+            turnkeyOtpId?: string | undefined;
         };
     } | undefined;
     refetchUser: (wallet?: Wallet) => Promise<import("@feathersjs/authentication").AuthenticationResult>;

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

@@ -0,0 +1,20 @@
+import { TurnkeyAuthInitResponse } from "@b3dotfun/b3-api";
+interface UseTurnkeyAuthReturn {
+    initiateLogin: (_email: string) => Promise<TurnkeyAuthInitResponse>;
+    verifyOtp: (_otpId: string, _otpCode: string) => Promise<{
+        user: any;
+    }>;
+    isLoading: boolean;
+    error: string | null;
+    clearError: () => void;
+}
+/**
+ * Hook for Turnkey email-based OTP authentication
+ *
+ * Usage:
+ * 1. Call initiateLogin(email) → User receives OTP email
+ * 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
+ * 3. User is authenticated, JWT stored in cookies automatically
+ */
+export declare function useTurnkeyAuth(): UseTurnkeyAuthReturn;
+export {};

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

@@ -0,0 +1,106 @@
+import app from "../../app.js";
+import { useAuthStore } from "../stores/index.js";
+import { useCallback, useState } from "react";
+import { useB3 } from "../components/B3Provider/useB3.js";
+import { debugB3React } from "../../../shared/utils/debug.js";
+const debug = debugB3React("useTurnkeyAuth");
+/**
+ * Hook for Turnkey email-based OTP authentication
+ *
+ * Usage:
+ * 1. Call initiateLogin(email) → User receives OTP email
+ * 2. Call verifyOtp(...) → Verifies OTP and authenticates with b3-api
+ * 3. User is authenticated, JWT stored in cookies automatically
+ */
+export function useTurnkeyAuth() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+    const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
+    const { user } = useB3();
+    /**
+     * Step 1: Initiate login with email
+     * - Calls backend to create sub-org (if needed) and send OTP
+     * - Returns otpId to use in verification step
+     */
+    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 });
+            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.";
+            setError(errorMessage);
+            throw err;
+        }
+        finally {
+            setIsLoading(false);
+            setIsAuthenticating(false);
+        }
+    }, [user, setIsAuthenticating]);
+    /**
+     * Step 2: Verify OTP and authenticate
+     * - Verifies OTP with backend
+     * - Gets Turnkey session JWT
+     * - Authenticates with b3-api using "turnkey-jwt" strategy
+     * - JWT automatically stored in cookies by SDK
+     */
+    const verifyOtp = useCallback(async (otpId, otpCode) => {
+        setIsLoading(true);
+        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({
+                otpId,
+                otpCode,
+            });
+            debug(`OTP verified! 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,
+            });
+            debug(`Successfully authenticated with b3-api!`, authResult);
+            // Update auth store to reflect authenticated state
+            setIsAuthenticated(true);
+            // Return user data
+            return {
+                user: authResult.user,
+            };
+        }
+        catch (err) {
+            debug("Error verifying OTP:", err);
+            const errorMessage = err.message || "Failed to verify OTP. Please try again.";
+            setError(errorMessage);
+            setIsAuthenticated(false);
+            throw err;
+        }
+        finally {
+            setIsLoading(false);
+            setIsAuthenticating(false);
+        }
+    }, [user, setIsAuthenticating, setIsAuthenticated]);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
+    return {
+        initiateLogin,
+        verifyOtp,
+        isLoading,
+        error,
+        clearError,
+    };
+}

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

@@ -41,6 +41,11 @@ export declare function useUserQuery(): {
                 fid?: string | undefined;
             };
         }[] | undefined;
+        turnkeySubOrgs?: {
+            hasDelegatedUser?: boolean | undefined;
+            subOrgId: string;
+            accounts: Record<string, any>[];
+        }[] | undefined;
         _id: string | {};
         userId: string;
         smartAccountAddress: string;
@@ -49,6 +54,8 @@ export declare function useUserQuery(): {
         partnerIds: {
             privyId?: string | undefined;
             thirdwebId?: string | undefined;
+            turnkeyId?: string | undefined;
+            turnkeyOtpId?: string | undefined;
         };
     } | undefined;
     setUser: (newUser?: Users) => void;

package/dist/esm/global-account/react/stores/useAuthStore.d.ts

@@ -27,6 +27,8 @@ interface AuthState {
     setIsAuthenticating: (isAuthenticating: boolean) => void;
     hasStartedConnecting: boolean;
     setHasStartedConnecting: (hasStartedConnecting: boolean) => void;
+    justCompletedLogin: boolean;
+    setJustCompletedLogin: (justCompletedLogin: boolean) => void;
 }
 export declare const useAuthStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AuthState>>;
 export {};

package/dist/esm/global-account/react/stores/useAuthStore.js

@@ -39,4 +39,6 @@ export const useAuthStore = create(set => ({
     setIsAuthenticating: isAuthenticating => set({ isAuthenticating: isAuthenticating }),
     hasStartedConnecting: false,
     setHasStartedConnecting: hasStartedConnecting => set({ hasStartedConnecting }),
+    justCompletedLogin: false,
+    setJustCompletedLogin: justCompletedLogin => set({ justCompletedLogin }),
 }));

package/dist/esm/global-account/react/stores/useModalStore.d.ts

@@ -10,6 +10,8 @@ import { Account } from "thirdweb/wallets";
 interface BaseModalProps {
     /** Whether to show a back button in the modal header */
     showBackButton?: boolean;
+    /** Whether the modal can be closed by clicking outside or pressing escape. Defaults to true */
+    closable?: boolean;
 }
 /**
  * Props for the Sign In With B3 modal
@@ -39,6 +41,24 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
     /** Whether to show the signers enabled modal */
     signersEnabled?: boolean;
 }
+/**
+ * Props for the Turnkey Authentication modal
+ * Handles Turnkey email/OTP authentication flow
+ */
+export interface TurnkeyAuthModalProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "turnkeyAuth";
+    /** Callback function called when authentication is successful */
+    onSuccess: (_user: any) => void;
+    /** Callback function called when modal is closed */
+    onClose: () => void;
+    /** Initial email to pre-fill */
+    initialEmail?: string;
+    /** Whether to skip directly to OTP step */
+    skipToOtp?: boolean;
+    /** Whether the modal can be closed - defaults to false for Turnkey */
+    closable?: boolean;
+}
 /**
  * Props for the Request Permissions modal
  * Used to request permission for session keys to interact with contracts
@@ -451,7 +471,7 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps;
+export type ModalContentType = SignInWithB3ModalProps | TurnkeyAuthModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps;
 /**
  * State interface for the modal store
  */