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

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
  */