@b3dotfun/sdk 0.1.69-alpha.22 → 0.1.69-alpha.24

package/dist/types/anyspend/react/components/AnySpendStakeUpside.d.ts

@@ -1,6 +1,6 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
-export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, }: {
+export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, showFiatOption, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     beneficiaryAddress: string;
@@ -14,4 +14,6 @@ export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddres
     slots?: AnySpendSlots;
     content?: AnySpendContent;
     theme?: AnySpendTheme;
+    /** Whether to show the "Pay with fiat" tab. Defaults to true. */
+    showFiatOption?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/global-account/react/components/SignInWithB3/BetterAuthSignIn.d.ts

@@ -10,6 +10,11 @@ export interface BetterAuthSignInProps {
     showEmail?: boolean;
     /** URL to redirect to after password reset link is clicked. Token is appended as ?token=... */
     passwordResetRedirectTo?: string;
+    /**
+     * URL Better Auth redirects to after server-side email verification. Render
+     * `BetterAuthVerifyEmail` at this route so the user gets a confirmation page.
+     */
+    verifyEmailRedirectTo?: string;
     /** Called after successful authentication */
     onSuccess?: () => void;
     /** Called on authentication error */
@@ -31,4 +36,4 @@ export interface BetterAuthSignInProps {
  * />
  * ```
  */
-export declare function BetterAuthSignIn({ title, subtitle, socialProviders, showEmail, passwordResetRedirectTo, onSuccess, onError, className, }: BetterAuthSignInProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BetterAuthSignIn({ title, subtitle, socialProviders, showEmail, passwordResetRedirectTo, verifyEmailRedirectTo, onSuccess, onError, className, }: BetterAuthSignInProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.d.ts

@@ -0,0 +1,37 @@
+export type BetterAuthVerifyEmailState = "success" | "expired" | "invalid" | "already-verified" | "error";
+export interface BetterAuthVerifyEmailProps {
+    /**
+     * Error code from the callback URL's `?error=` query param. Pass `null` /
+     * `undefined` when the user landed here cleanly (successful verification).
+     * Better Auth appends this param when server-side verification fails.
+     */
+    errorCode?: string | null;
+    /** Called when the user clicks the "Go to sign in" button. */
+    onGoToSignIn?: () => void;
+    /** Fallback href used when `onGoToSignIn` is not provided. Defaults to "/login". */
+    signInHref?: string;
+    /** Optional override for the success headline. */
+    successTitle?: string;
+    /** Optional override for the success body text. */
+    successMessage?: string;
+    /** Optional class name for the root container. */
+    className?: string;
+}
+/**
+ * Standalone email-verification confirmation page. Render on the route you
+ * set as `callbackURL` when calling `betterAuthClient.sendVerificationEmail`
+ * (or the `verifyCallbackURL` arg on `useBetterAuth().signUpWithEmail`).
+ *
+ * Better Auth verifies the token server-side before redirecting here. This
+ * component only displays the outcome based on the `?error=` query param.
+ *
+ * Usage:
+ * ```tsx
+ * const error = new URLSearchParams(window.location.search).get("error");
+ * <BetterAuthVerifyEmail
+ *   errorCode={error}
+ *   onGoToSignIn={() => router.push("/login")}
+ * />
+ * ```
+ */
+export declare function BetterAuthVerifyEmail({ errorCode, onGoToSignIn, signInHref, successTitle, successMessage, className, }: BetterAuthVerifyEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts

@@ -3,4 +3,4 @@ import { SignInWithB3ModalProps } from "@b3dotfun/sdk/global-account/react";
  * Component that manages the authentication flow for Sign In With B3
  * Handles different login providers, authentication steps, and session key management
  */
-export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, verifyEmailRedirectTo, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts

@@ -1,6 +1,8 @@
 interface LoginStepBetterAuthProps {
     onSuccess?: () => void;
     onError?: (error: Error) => Promise<void>;
+    /** URL Better Auth redirects to after server-side email verification. */
+    verifyEmailRedirectTo?: string;
 }
-export declare function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,6 +8,7 @@ export { useB3Config } from "./B3Provider/useB3Config";
 export { StyleRoot } from "./StyleRoot";
 export { BetterAuthResetPassword, type BetterAuthResetPasswordProps } from "./SignInWithB3/BetterAuthResetPassword";
 export { BetterAuthSignIn, type BetterAuthSignInProps } from "./SignInWithB3/BetterAuthSignIn";
+export { BetterAuthVerifyEmail, type BetterAuthVerifyEmailProps, type BetterAuthVerifyEmailState, } from "./SignInWithB3/BetterAuthVerifyEmail";
 export { AuthButton } from "./SignInWithB3/components/AuthButton";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
 export { WalletRow } from "./SignInWithB3/components/WalletRow";

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

@@ -13,7 +13,7 @@ export declare class EmailVerificationRequiredError extends Error {
  */
 export declare function useBetterAuth(): {
     signInWithEmail: (email: string, password: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
-    signUpWithEmail: (email: string, password: string, name: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
+    signUpWithEmail: (email: string, password: string, name: string, verifyCallbackURL?: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
     signInWithSocial: (provider: BetterAuthSocialProvider) => Promise<void>;
     requestPasswordReset: (email: string, redirectTo?: string) => Promise<{
         data: {

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

@@ -41,6 +41,8 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
     source?: "signInWithB3Button" | "requestPermissions";
     /** Whether to show the signers enabled modal */
     signersEnabled?: boolean;
+    /** URL Better Auth redirects to after server-side email verification. */
+    verifyEmailRedirectTo?: string;
 }
 /**
  * Props for the Request Permissions modal
@@ -609,6 +611,8 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
     actionLabel?: string;
     /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
     showChainSelection?: boolean;
+    /** Whether to show the "Fund with Fiat" option in the deposit options list. Defaults to true */
+    showFiatOption?: boolean;
     /** Minimum pool size for filtering tokens (default: 1,000,000) */
     minPoolSize?: number;
     /** Custom title for chain selection step */

package/package.json

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

package/src/anyspend/react/components/AnySpend.tsx

@@ -148,6 +148,8 @@ export function AnySpend(props: {
   theme?: AnySpendTheme;
   /** When true, shows a KYC gate before Stripe Web2 (credit card) payments. Default false. */
   kycEnabled?: boolean;
+  /** Whether to show the "Pay with Fiat" tab. Defaults to true. When false, the fiat tab is hidden and activeTab is forced to "crypto". */
+  showFiatOption?: boolean;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -184,6 +186,7 @@ function AnySpendInner({
   callbackMetadata,
   senderAddress,
   kycEnabled = false,
+  showFiatOption = true,
 }: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
@@ -211,6 +214,7 @@ function AnySpendInner({
   content?: AnySpendContent;
   theme?: AnySpendTheme;
   kycEnabled?: boolean;
+  showFiatOption?: boolean;
 }) {
   const { slots, content } = useAnySpendCustomization();
   const searchParams = useSearchParamsSSR();
@@ -253,6 +257,7 @@ function AnySpendInner({
   const previousPanel = useRef<PanelView>(PanelView.MAIN);
 
   const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(() => {
+    if (!showFiatOption) return "crypto";
     if (typeof window !== "undefined") {
       const stored = sessionStorage.getItem("anyspend_active_tab") as "crypto" | "fiat" | null;
       if (stored === "crypto" || stored === "fiat") return stored;
@@ -261,8 +266,13 @@ function AnySpendInner({
   });
 
   useEffect(() => {
+    if (!showFiatOption && activeTab === "fiat") setActiveTab("crypto");
+  }, [showFiatOption, activeTab]);
+
+  useEffect(() => {
+    if (!showFiatOption) return;
     sessionStorage.setItem("anyspend_active_tab", activeTab);
-  }, [activeTab]);
+  }, [activeTab, showFiatOption]);
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
   const [directTransferTxHash, setDirectTransferTxHash] = useState<string | undefined>();
@@ -1312,17 +1322,19 @@ function AnySpendInner({
         )}
 
         {/* Tab section */}
-        <TabSection
-          activeTab={activeTab}
-          setActiveTab={tab => {
-            setActiveTab(tab);
-            // Reset payment methods when switching tabs
-            resetPaymentMethods();
-            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-          }}
-          setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
-          setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
-        />
+        {showFiatOption && (
+          <TabSection
+            activeTab={activeTab}
+            setActiveTab={tab => {
+              setActiveTab(tab);
+              // Reset payment methods when switching tabs
+              resetPaymentMethods();
+              setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+            }}
+            setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
+            setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
+          />
+        )}
 
         <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
           {/* Send section */}

package/src/anyspend/react/components/AnySpendCollectorClubPurchase.tsx

@@ -119,6 +119,10 @@ export interface AnySpendCollectorClubPurchaseProps {
    * Force fiat payment
    */
   forceFiatPayment?: boolean;
+  /**
+   * Whether to show the "Pay with fiat" tab. Defaults to true.
+   */
+  showFiatOption?: boolean;
   /**
    * Optional discount code to apply to the purchase.
    * When provided, validates on-chain and adjusts the price accordingly.
@@ -146,6 +150,7 @@ export function AnySpendCollectorClubPurchase({
   vendingMachineId,
   packType,
   forceFiatPayment,
+  showFiatOption = true,
   discountCode,
   slots,
   content,
@@ -398,6 +403,7 @@ export function AnySpendCollectorClubPurchase({
       showRecipient={showRecipient}
       srcFiatAmount={srcFiatAmount}
       forceFiatPayment={forceFiatPayment}
+      showFiatOption={showFiatOption}
       slots={slots}
       content={content}
       theme={theme}

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -178,6 +178,8 @@ export function AnySpendCustom(props: {
   dstToken: components["schemas"]["Token"];
   dstAmount: string;
   forceFiatPayment?: boolean;
+  /** Whether to show the "Pay with fiat" tab. Defaults to true. When false, the fiat tab is hidden and activeTab is forced to "crypto". */
+  showFiatOption?: boolean;
   contractAddress: string;
   encodedData: string;
   metadata: any;
@@ -232,6 +234,7 @@ function AnySpendCustomInner({
   onShowPointsDetail,
   srcFiatAmount: srcFiatAmountProps,
   forceFiatPayment,
+  showFiatOption = true,
   senderAddress,
 }: {
   loadOrder?: string;
@@ -258,6 +261,7 @@ function AnySpendCustomInner({
   onShowPointsDetail?: () => void;
   srcFiatAmount?: string;
   forceFiatPayment?: boolean;
+  showFiatOption?: boolean;
   senderAddress?: string;
   slots?: AnySpendSlots;
   content?: AnySpendContent;
@@ -271,7 +275,13 @@ function AnySpendCustomInner({
   const [activePanel, setActivePanel] = useState<PanelView>(
     loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER,
   );
-  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(forceFiatPayment ? "fiat" : activeTabProps);
+  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(
+    !showFiatOption ? "crypto" : forceFiatPayment ? "fiat" : activeTabProps,
+  );
+
+  useEffect(() => {
+    if (!showFiatOption && activeTab === "fiat") setActiveTab("crypto");
+  }, [showFiatOption, activeTab]);
 
   // Payment method state with dual-state system (auto + explicit user selection)
   // Note: AnySpendCustom doesn't use auto-selection, only explicit user selection
@@ -867,7 +877,7 @@ function AnySpendCustomInner({
         onValueChange={value => setActiveTab(value as "crypto" | "fiat")}
         className="bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5"
       >
-        {!forceFiatPayment && (
+        {!forceFiatPayment && showFiatOption && (
           <div className="w-full">
             <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
               <div

package/src/anyspend/react/components/AnySpendDeposit.tsx

@@ -95,6 +95,8 @@ export interface AnySpendDepositProps {
   depositContractConfig?: DepositContractConfig;
   /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
   showChainSelection?: boolean;
+  /** Whether to show the "Fund with Fiat" option in the deposit options list. Defaults to true */
+  showFiatOption?: boolean;
   /** Custom list of supported chains. If not provided, uses default chains */
   supportedChains?: ChainConfig[];
   /** Minimum pool size for filtering tokens (default: 1,000,000) */
@@ -248,6 +250,7 @@ export function AnySpendDeposit({
   orderType,
   depositContractConfig,
   showChainSelection,
+  showFiatOption = true,
   supportedChains = DEFAULT_SUPPORTED_CHAINS,
   minPoolSize = DEFAULT_MIN_POOL_SIZE,
   topChainsCount = 3,
@@ -585,39 +588,43 @@ export function AnySpendDeposit({
             </button>
 
             {/* Fund with Fiat */}
-            <button
-              onClick={handleSelectFiat}
-              className={
-                depositClasses?.fiatButton ||
-                "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
-              }
-            >
-              <div
-                className={depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3"}
+            {showFiatOption && (
+              <button
+                onClick={handleSelectFiat}
+                className={
+                  depositClasses?.fiatButton ||
+                  "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
+                }
               >
-                <CreditCardIcon className={depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10"} />
-                <div className={depositClasses?.optionInfo || "anyspend-deposit-option-info"}>
-                  <span
-                    className={
-                      depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium"
-                    }
-                  >
-                    Fund with Fiat
-                  </span>
-                  <p
-                    className={
-                      depositClasses?.optionDescription ||
-                      "anyspend-deposit-option-description text-as-secondary text-xs"
-                    }
-                  >
-                    Pay with card or bank transfer
-                  </p>
+                <div
+                  className={depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3"}
+                >
+                  <CreditCardIcon className={depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10"} />
+                  <div className={depositClasses?.optionInfo || "anyspend-deposit-option-info"}>
+                    <span
+                      className={
+                        depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium"
+                      }
+                    >
+                      Fund with Fiat
+                    </span>
+                    <p
+                      className={
+                        depositClasses?.optionDescription ||
+                        "anyspend-deposit-option-description text-as-secondary text-xs"
+                      }
+                    >
+                      Pay with card or bank transfer
+                    </p>
+                  </div>
                 </div>
-              </div>
-              <ChevronRight
-                className={depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5"}
-              />
-            </button>
+                <ChevronRight
+                  className={
+                    depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5"
+                  }
+                />
+              </button>
+            )}
           </div>
 
           {/* Chain-specific warning */}

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -42,6 +42,7 @@ export function AnySpendNFT({
   slots,
   content,
   theme,
+  showFiatOption = true,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -54,6 +55,8 @@ export function AnySpendNFT({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  /** Whether to show the "Pay with fiat" tab. Defaults to true. */
+  showFiatOption?: boolean;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
   const hasFetchedRef = useRef(false);
@@ -164,6 +167,7 @@ export function AnySpendNFT({
       loadOrder={loadOrder}
       mode={mode}
       activeTab="fiat"
+      showFiatOption={showFiatOption}
       recipientAddress={recipientAddress}
       orderType={"mint_nft"}
       dstChainId={nftContract.chainId}

package/src/anyspend/react/components/AnySpendStakeUpside.tsx

@@ -30,6 +30,7 @@ export function AnySpendStakeUpside({
   slots,
   content,
   theme,
+  showFiatOption = true,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -44,6 +45,8 @@ export function AnySpendStakeUpside({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  /** Whether to show the "Pay with fiat" tab. Defaults to true. */
+  showFiatOption?: boolean;
 }) {
   const header = () => (
     <>
@@ -90,6 +93,7 @@ export function AnySpendStakeUpside({
       onSuccess={onSuccess}
       showRecipient={true}
       activeTab={activeTab}
+      showFiatOption={showFiatOption}
       senderAddress={senderAddress}
       slots={slots}
       content={content}

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

@@ -33,6 +33,11 @@ export interface BetterAuthSignInProps {
   showEmail?: boolean;
   /** URL to redirect to after password reset link is clicked. Token is appended as ?token=... */
   passwordResetRedirectTo?: string;
+  /**
+   * URL Better Auth redirects to after server-side email verification. Render
+   * `BetterAuthVerifyEmail` at this route so the user gets a confirmation page.
+   */
+  verifyEmailRedirectTo?: string;
   /** Called after successful authentication */
   onSuccess?: () => void;
   /** Called on authentication error */
@@ -61,6 +66,7 @@ export function BetterAuthSignIn({
   socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id),
   showEmail = true,
   passwordResetRedirectTo,
+  verifyEmailRedirectTo,
   onSuccess,
   onError,
   className,
@@ -153,7 +159,7 @@ export function BetterAuthSignIn({
       setError(null);
 
       if (mode === "sign-up") {
-        await signUpWithEmail(normalizedEmail, password, name.trim());
+        await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
       } else {
         await signInWithEmail(normalizedEmail, password);
       }

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

@@ -0,0 +1,155 @@
+import { Button } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+
+const debug = debugB3React("BetterAuthVerifyEmail");
+
+export type BetterAuthVerifyEmailState = "success" | "expired" | "invalid" | "already-verified" | "error";
+
+export interface BetterAuthVerifyEmailProps {
+  /**
+   * Error code from the callback URL's `?error=` query param. Pass `null` /
+   * `undefined` when the user landed here cleanly (successful verification).
+   * Better Auth appends this param when server-side verification fails.
+   */
+  errorCode?: string | null;
+  /** Called when the user clicks the "Go to sign in" button. */
+  onGoToSignIn?: () => void;
+  /** Fallback href used when `onGoToSignIn` is not provided. Defaults to "/login". */
+  signInHref?: string;
+  /** Optional override for the success headline. */
+  successTitle?: string;
+  /** Optional override for the success body text. */
+  successMessage?: string;
+  /** Optional class name for the root container. */
+  className?: string;
+}
+
+function classifyError(code: string | null | undefined): BetterAuthVerifyEmailState {
+  if (!code) return "success";
+  const normalized = code.toLowerCase();
+
+  // Exact matches for Better Auth's documented verification error codes.
+  if (normalized === "expired_token") return "expired";
+  if (normalized === "invalid_token") return "invalid";
+  if (normalized === "already_verified" || normalized === "email_already_verified") return "already-verified";
+
+  // Loose fallbacks for close variants. Order matters — check "already" before
+  // "verified" so `email_already_verified` maps to already-verified, not invalid.
+  if (normalized.includes("expired")) return "expired";
+  if (normalized.includes("already")) return "already-verified";
+  if (normalized.includes("invalid")) return "invalid";
+  return "error";
+}
+
+const COPY: Record<BetterAuthVerifyEmailState, { title: string; message: string }> = {
+  success: {
+    title: "Email verified",
+    message: "Your email is confirmed. You can now sign in to your account.",
+  },
+  expired: {
+    title: "Link expired",
+    message: "This verification link has expired. Request a new one from the sign-in page.",
+  },
+  invalid: {
+    title: "Invalid link",
+    message: "This verification link is invalid or has already been used. Try signing in or request a new link.",
+  },
+  "already-verified": {
+    title: "Already verified",
+    message: "Your email was already confirmed. You can sign in now.",
+  },
+  error: {
+    title: "Verification failed",
+    message: "We couldn't verify your email. Request a new link from the sign-in page.",
+  },
+};
+
+/**
+ * Standalone email-verification confirmation page. Render on the route you
+ * set as `callbackURL` when calling `betterAuthClient.sendVerificationEmail`
+ * (or the `verifyCallbackURL` arg on `useBetterAuth().signUpWithEmail`).
+ *
+ * Better Auth verifies the token server-side before redirecting here. This
+ * component only displays the outcome based on the `?error=` query param.
+ *
+ * Usage:
+ * ```tsx
+ * const error = new URLSearchParams(window.location.search).get("error");
+ * <BetterAuthVerifyEmail
+ *   errorCode={error}
+ *   onGoToSignIn={() => router.push("/login")}
+ * />
+ * ```
+ */
+export function BetterAuthVerifyEmail({
+  errorCode,
+  onGoToSignIn,
+  signInHref = "/login",
+  successTitle,
+  successMessage,
+  className,
+}: BetterAuthVerifyEmailProps) {
+  const state = classifyError(errorCode);
+  const isSuccess = state === "success" || state === "already-verified";
+  const copy = COPY[state];
+  const title = isSuccess && successTitle ? successTitle : copy.title;
+  const message = isSuccess && successMessage ? successMessage : copy.message;
+
+  debug("Rendering verify-email state", { state, errorCode });
+
+  const handleClick = () => {
+    if (onGoToSignIn) {
+      onGoToSignIn();
+      return;
+    }
+    if (typeof window !== "undefined") {
+      window.location.href = signInHref;
+    }
+  };
+
+  return (
+    <div className={`w-full max-w-[400px] px-6 ${className || ""}`}>
+      <div className="space-y-6 text-center">
+        <div
+          className={`mx-auto flex h-12 w-12 items-center justify-center rounded-full ${
+            isSuccess ? "bg-green-100" : "bg-red-100"
+          }`}
+        >
+          {isSuccess ? (
+            <svg
+              className="h-6 w-6 text-green-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          ) : (
+            <svg
+              className="h-6 w-6 text-red-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          )}
+        </div>
+
+        <div>
+          <h1 className="text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100">{title}</h1>
+          <p className="mt-3 text-[15px] text-gray-500 dark:text-gray-400">{message}</p>
+        </div>
+
+        <Button
+          onClick={handleClick}
+          className="h-11 w-full bg-gray-900 text-[15px] font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
+        >
+          {isSuccess ? "Go to sign in" : "Back to sign in"}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -34,6 +34,7 @@ export function SignInWithB3Flow({
   closeAfterLogin = false,
   source = "signInWithB3Button",
   signersEnabled = false,
+  verifyEmailRedirectTo,
 }: SignInWithB3ModalProps) {
   const { automaticallySetFirstEoa, authStrategy } = useB3Config();
   // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
@@ -292,7 +293,13 @@ export function SignInWithB3Flow({
       // Better Auth manages its own loading/verification states internally.
       // Don't gate on isAuthenticating — it would unmount the component
       // and lose verification state when setIsAuthenticating(false) fires.
-      content = <LoginStepBetterAuth onSuccess={() => handleLoginSuccess({} as Account)} onError={onError} />;
+      content = (
+        <LoginStepBetterAuth
+          onSuccess={() => handleLoginSuccess({} as Account)}
+          onError={onError}
+          verifyEmailRedirectTo={verifyEmailRedirectTo}
+        />
+      );
     } else if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
       content = (
         <LoginStepContainer partnerId={partnerId}>