@b3dotfun/sdk 0.0.77 → 0.0.78-alpha.1

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

@@ -0,0 +1,240 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useTurnkeyAuth } from "../hooks/useTurnkeyAuth";
+
+type ModalStep = "email" | "otp" | "success";
+
+interface TurnkeyAuthModalProps {
+  onClose: () => void;
+  onSuccess: (_user: any) => void;
+  initialEmail?: string;
+  skipToOtp?: boolean;
+}
+
+export function TurnkeyAuthModal({ onClose, onSuccess, initialEmail = "", skipToOtp = false }: TurnkeyAuthModalProps) {
+  const [step, setStep] = useState<ModalStep>(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: React.FormEvent) => {
+    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: React.FormEvent) => {
+    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 (
+    <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
+          </h2>
+          <div className="mb-6 space-y-3 text-center text-sm text-gray-600 dark:text-gray-400">
+            <p>
+              AnySpend uses a secure,
+              <br />
+              embedded wallet to fund your workflows.
+            </p>
+            <p>
+              Please provide an email address to secure
+              <br />
+              your wallet.
+            </p>
+          </div>
+
+          <form onSubmit={handleEmailSubmit} className="space-y-4">
+            <div>
+              <input
+                type="email"
+                placeholder="email"
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                required
+                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"
+              />
+            </div>
+
+            {error && (
+              <div className="rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400">
+                {error}
+              </div>
+            )}
+
+            <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"
+            >
+              {isLoading ? (
+                <span className="flex items-center justify-center gap-2">
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
+                  Sending...
+                </span>
+              ) : (
+                "Continue"
+              )}
+            </button>
+          </form>
+        </>
+      )}
+
+      {/* OTP Step */}
+      {step === "otp" && (
+        <>
+          <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,
+              <br />
+              embedded wallet to fund your workflows.
+              <br />
+              Please provide 2FA code sent to your email.
+            </p>
+          </div>
+
+          <form onSubmit={handleOtpSubmit} className="space-y-4">
+            <div>
+              <input
+                type="text"
+                placeholder="Enter code"
+                value={otpCode}
+                onChange={e => setOtpCode(e.target.value.toUpperCase())}
+                required
+                disabled={isLoading}
+                autoFocus
+                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}
+              />
+            </div>
+
+            {error && (
+              <div className="rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400">
+                {error}
+              </div>
+            )}
+
+            <div className="flex flex-col gap-2">
+              <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"
+              >
+                {isLoading ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
+                    Verifying...
+                  </span>
+                ) : (
+                  "Confirm"
+                )}
+              </button>
+
+              <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"
+              >
+                Resend code
+              </button>
+            </div>
+          </form>
+        </>
+      )}
+
+      {/* Success Step */}
+      {step === "success" && (
+        <div className="text-center">
+          <div className="mb-6 flex items-center justify-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20">
+              <svg
+                className="h-8 w-8 text-green-600 dark:text-green-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+          </div>
+          <h2 className="mb-2 text-2xl font-bold text-gray-900 dark:text-white">Successfully Authenticated!</h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Redirecting...</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/global-account/react/components/index.ts

@@ -17,6 +17,9 @@ export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 
+// Turnkey Components
+export { TurnkeyAuthModal } from "./TurnkeyAuthModal";
+
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 

package/src/global-account/react/hooks/index.ts

@@ -49,5 +49,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/src/global-account/react/hooks/useTurnkeyAuth.ts

@@ -0,0 +1,138 @@
+import app from "../../app";
+import { useAuthStore } from "../stores";
+import { useCallback, useState } from "react";
+import { useB3 } from "../components/B3Provider/useB3";
+import { TurnkeyAuthInitResponse } from "@b3dotfun/b3-api";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+
+const debug = debugB3React("useTurnkeyAuth");
+
+interface TurnkeyVerifyResponse {
+  turnkeySessionJwt: string;
+}
+
+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 function useTurnkeyAuth(): UseTurnkeyAuthReturn {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(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: string): Promise<TurnkeyAuthInitResponse> => {
+      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: TurnkeyAuthInitResponse = await app.service("turnkey-auth").init({ email, userId: user.userId });
+
+        debug(`OTP initialized successfully. OtpId: ${data.otpId}`);
+
+        return data;
+      } catch (err: any) {
+        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: string, otpCode: string): Promise<{ user: any }> => {
+      setIsLoading(true);
+      setError(null);
+      setIsAuthenticating(true);
+
+      try {
+        debug(`Verifying OTP...`, { userId: user?.userId });
+
+        // Step 1: Verify OTP and get Turnkey session JWT
+        const { turnkeySessionJwt }: TurnkeyVerifyResponse = 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,
+        } as any);
+
+        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: any) {
+        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/src/global-account/react/stores/useAuthStore.ts

@@ -29,6 +29,8 @@ interface AuthState {
   setIsAuthenticating: (isAuthenticating: boolean) => void;
   hasStartedConnecting: boolean;
   setHasStartedConnecting: (hasStartedConnecting: boolean) => void;
+  justCompletedLogin: boolean;
+  setJustCompletedLogin: (justCompletedLogin: boolean) => void;
 }
 
 export const useAuthStore = create<AuthState>(set => ({
@@ -73,4 +75,6 @@ export const useAuthStore = create<AuthState>(set => ({
   setIsAuthenticating: isAuthenticating => set({ isAuthenticating: isAuthenticating }),
   hasStartedConnecting: false,
   setHasStartedConnecting: hasStartedConnecting => set({ hasStartedConnecting }),
+  justCompletedLogin: false,
+  setJustCompletedLogin: justCompletedLogin => set({ justCompletedLogin }),
 }));

package/src/global-account/react/stores/useModalStore.ts

@@ -12,6 +12,8 @@ import { create } from "zustand";
 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;
 }
 
 /**
@@ -43,6 +45,25 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
   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
@@ -481,6 +502,7 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
  */
 export type ModalContentType =
   | SignInWithB3ModalProps
+  | TurnkeyAuthModalProps
   | RequestPermissionsModalProps
   | ManageAccountModalProps
   | AnySpendModalProps