@b3dotfun/sdk 0.1.69-test.0 → 0.1.70-alpha.1

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

@@ -15,8 +15,10 @@ export interface B3ConfigContextType {
     stripePublishableKey?: string;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
     authStrategy: AuthStrategy;
+    /** Override the API base URL for all auth operations (Better Auth client, Feathers JWT exchange). */
+    apiUrl?: string;
 }
-export declare function B3ConfigProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, stripePublishableKey, createClientReferenceId, authStrategy, }: {
+export declare function B3ConfigProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, stripePublishableKey, createClientReferenceId, authStrategy, apiUrl, }: {
     children: React.ReactNode;
     accountOverride?: Account;
     environment?: "development" | "production";
@@ -28,5 +30,7 @@ export declare function B3ConfigProvider({ children, accountOverride, environmen
     stripePublishableKey?: string;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
     authStrategy?: AuthStrategy;
+    /** Override the API base URL for all auth operations (Better Auth client, Feathers JWT exchange). */
+    apiUrl?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useB3Config(): B3ConfigContextType;

package/dist/esm/global-account/react/components/B3Provider/B3ConfigProvider.js

@@ -10,7 +10,7 @@ const DEFAULT_PERMISSIONS = {
     endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
 };
 const B3ConfigContext = createContext(null);
-export function B3ConfigProvider({ children, accountOverride, environment = "development", defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa = false, theme = "light", clientType = "rest", partnerId, stripePublishableKey, createClientReferenceId, authStrategy = "thirdweb", }) {
+export function B3ConfigProvider({ children, accountOverride, environment = "development", defaultPermissions = DEFAULT_PERMISSIONS, automaticallySetFirstEoa = false, theme = "light", clientType = "rest", partnerId, stripePublishableKey, createClientReferenceId, authStrategy = "thirdweb", apiUrl, }) {
     return (_jsx(B3ConfigContext.Provider, { value: {
             accountOverride,
             environment,
@@ -22,6 +22,7 @@ export function B3ConfigProvider({ children, accountOverride, environment = "dev
             stripePublishableKey,
             createClientReferenceId,
             authStrategy,
+            apiUrl,
         }, children: children }));
 }
 export function useB3Config() {

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

@@ -10,7 +10,7 @@ import { ClientType } from "../../../client-manager";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, defaultEoaProvider, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors, createClientReferenceId, defaultPermissions, disableBSMNTAuthentication, queryClient, authStrategy, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, defaultEoaProvider, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors, createClientReferenceId, defaultPermissions, disableBSMNTAuthentication, queryClient, authStrategy, apiUrl, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -39,4 +39,20 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     queryClient?: QueryClient;
     /** Auth strategy: "thirdweb" (default, ecosystem wallet) or "better-auth" (email/password via Better Auth) */
     authStrategy?: AuthStrategy;
+    /**
+     * Override the API base URL for Better Auth operations.
+     *
+     * When set, the Better Auth client (signIn, signUp, signOut, getSession) will
+     * target this URL instead of the default `B3_API_URL` / `NEXT_PUBLIC_B3_API`.
+     *
+     * Useful for local development where the frontend runs on localhost:3003 and
+     * the b3-api runs on localhost:3031 — keeps the entire OAuth flow local so
+     * sessions, cookies, and token exchange all hit the same server.
+     *
+     * @example
+     * ```tsx
+     * <B3Provider apiUrl="http://localhost:3031" ... />
+     * ```
+     */
+    apiUrl?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,7 @@ import { StyleRoot } from "../StyleRoot.js";
 import { setToastContext, ToastProvider, useToastContext } from "../Toast/index.js";
 import AuthenticationProvider from "./AuthenticationProvider.js";
 import { B3ConfigProvider } from "./B3ConfigProvider.js";
+import { BetterAuthClientProvider } from "./BetterAuthClientProvider.js";
 import BetterAuthProvider from "./BetterAuthProvider.js";
 import { LocalSDKProvider } from "./LocalSDKProvider.js";
 /**
@@ -17,7 +18,7 @@ import { LocalSDKProvider } from "./LocalSDKProvider.js";
  */
 export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, defaultEoaProvider, simDuneApiKey, 
 // deprecated since v0.0.87
-toaster: _toaster, clientType = "rest", rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors = false, createClientReferenceId, defaultPermissions, disableBSMNTAuthentication = false, queryClient, authStrategy = "thirdweb", }) {
+toaster: _toaster, clientType = "rest", rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors = false, createClientReferenceId, defaultPermissions, disableBSMNTAuthentication = false, queryClient, authStrategy = "thirdweb", apiUrl, }) {
     // Initialize Google Analytics on mount
     useEffect(() => {
         loadGA4Script();
@@ -27,7 +28,7 @@ toaster: _toaster, clientType = "rest", rpcUrls, partnerId, stripePublishableKey
         setClientType(clientType);
     }, [clientType]);
     const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls, connectors, overrideDefaultConnectors }), [partnerId, rpcUrls, connectors, overrideDefaultConnectors]);
-    return (_jsx(WalletProvider, { wagmiConfig: wagmiConfig, queryClient: queryClient, children: _jsx(TooltipProvider, { children: _jsx(ToastProvider, { children: _jsx(LocalSDKProvider, { onConnectCallback: onConnect, onLogoutCallback: onLogout, disableBSMNTAuthentication: disableBSMNTAuthentication, children: _jsxs(B3ConfigProvider, { accountOverride: accountOverride, environment: environment, automaticallySetFirstEoa: !!automaticallySetFirstEoa, theme: theme, clientType: clientType, partnerId: partnerId, stripePublishableKey: stripePublishableKey, createClientReferenceId: createClientReferenceId, defaultPermissions: defaultPermissions, authStrategy: authStrategy, children: [_jsx(ToastContextConnector, {}), _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" })] }), authStrategy === "better-auth" ? (_jsx(BetterAuthProvider, { partnerId: partnerId })) : (_jsx(AuthenticationProvider, { partnerId: partnerId, automaticallySetFirstEoa: !!automaticallySetFirstEoa, defaultEoaProvider: defaultEoaProvider }))] }) }) }) }) }));
+    return (_jsx(WalletProvider, { wagmiConfig: wagmiConfig, queryClient: queryClient, children: _jsx(TooltipProvider, { children: _jsx(ToastProvider, { children: _jsx(LocalSDKProvider, { onConnectCallback: onConnect, onLogoutCallback: onLogout, disableBSMNTAuthentication: disableBSMNTAuthentication, children: _jsx(B3ConfigProvider, { accountOverride: accountOverride, environment: environment, automaticallySetFirstEoa: !!automaticallySetFirstEoa, theme: theme, clientType: clientType, partnerId: partnerId, stripePublishableKey: stripePublishableKey, createClientReferenceId: createClientReferenceId, defaultPermissions: defaultPermissions, authStrategy: authStrategy, apiUrl: apiUrl, children: _jsxs(BetterAuthClientProvider, { apiUrl: apiUrl, children: [_jsx(ToastContextConnector, {}), _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" })] }), authStrategy === "better-auth" ? (_jsx(BetterAuthProvider, { partnerId: partnerId })) : (_jsx(AuthenticationProvider, { partnerId: partnerId, automaticallySetFirstEoa: !!automaticallySetFirstEoa, defaultEoaProvider: defaultEoaProvider }))] }) }) }) }) }) }));
 }
 /**
  * Component to connect the toast context to the global toast API

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

@@ -0,0 +1,17 @@
+import { type B3BetterAuthClient } from "../../../better-auth-client";
+/**
+ * Provides a Better Auth client instance to the subtree.
+ *
+ * When `apiUrl` is supplied, a custom client targeting that URL is created
+ * (e.g. `http://localhost:3031` for local development). Otherwise, the
+ * default singleton (which uses `B3_API_URL` / `NEXT_PUBLIC_B3_API`) is used.
+ */
+export declare function BetterAuthClientProvider({ children, apiUrl, }: {
+    children: React.ReactNode;
+    apiUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the Better Auth client from the nearest `BetterAuthClientProvider`.
+ * Falls back to the default singleton if no provider is present.
+ */
+export declare function useBetterAuthClient(): B3BetterAuthClient;

package/dist/esm/global-account/react/components/B3Provider/BetterAuthClientProvider.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { betterAuthClient, createB3BetterAuthClient, } from "../../../better-auth-client.js";
+const BetterAuthClientContext = createContext(betterAuthClient);
+/**
+ * Provides a Better Auth client instance to the subtree.
+ *
+ * When `apiUrl` is supplied, a custom client targeting that URL is created
+ * (e.g. `http://localhost:3031` for local development). Otherwise, the
+ * default singleton (which uses `B3_API_URL` / `NEXT_PUBLIC_B3_API`) is used.
+ */
+export function BetterAuthClientProvider({ children, apiUrl, }) {
+    const client = useMemo(() => {
+        if (apiUrl) {
+            return createB3BetterAuthClient(apiUrl);
+        }
+        return betterAuthClient;
+    }, [apiUrl]);
+    return _jsx(BetterAuthClientContext.Provider, { value: client, children: children });
+}
+/**
+ * Returns the Better Auth client from the nearest `BetterAuthClientProvider`.
+ * Falls back to the default singleton if no provider is present.
+ */
+export function useBetterAuthClient() {
+    return useContext(BetterAuthClientContext);
+}

package/dist/esm/global-account/react/components/B3Provider/BetterAuthProvider.js

@@ -4,8 +4,8 @@ import { B3_AUTH_COOKIE_NAME } from "../../../../shared/constants/index.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import Cookies from "js-cookie";
 import { useEffect, useRef } from "react";
-import { betterAuthClient } from "../../../better-auth-client.js";
 import { useUserQuery } from "../../hooks/useUserQuery.js";
+import { useBetterAuthClient } from "./BetterAuthClientProvider.js";
 const debug = debugB3React("BetterAuthProvider");
 /**
  * Parallel to AuthenticationProvider for Better Auth strategy.
@@ -20,6 +20,7 @@ const debug = debugB3React("BetterAuthProvider");
  * useAuth, SignIn component, etc.) automatically clears the Better Auth session.
  */
 const BetterAuthProvider = ({ partnerId }) => {
+    const betterAuthClient = useBetterAuthClient();
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
     const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -51,7 +52,7 @@ const BetterAuthProvider = ({ partnerId }) => {
             app.logout = originalLogout;
             hasPatched.current = false;
         };
-    }, []);
+    }, [betterAuthClient]);
     // Session restore on mount
     useEffect(() => {
         if (hasAttemptedRestore.current)
@@ -109,7 +110,7 @@ const BetterAuthProvider = ({ partnerId }) => {
             setIsAuthenticating(false);
         };
         restoreSession();
-    }, [setIsAuthenticated, setIsAuthenticating, setIsConnected, setUser, partnerId]);
+    }, [setIsAuthenticated, setIsAuthenticating, setIsConnected, setUser, partnerId, betterAuthClient]);
     return null;
 };
 export default BetterAuthProvider;

package/dist/esm/global-account/react/components/ManageAccount/BottomNavigation.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "../../../../global-account/react/index.js";
+import { TabsListPrimitive, TabTriggerPrimitive, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
 const HomeIcon = () => {
     return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5227 1.33636C12.1804 1.24368 11.8196 1.24368 11.4773 1.33636C11.08 1.44395 10.7454 1.7066 10.4784 1.91623L10.4038 1.97465L3.54376 7.31012C3.16713 7.6024 2.83532 7.85991 2.58806 8.19421C2.37107 8.48759 2.20942 8.8181 2.11106 9.1695C1.99898 9.56992 1.99943 9.98993 1.99995 10.4667L2.00002 17.8385C2 18.3657 1.99998 18.8204 2.03059 19.195C2.06289 19.5904 2.1342 19.9836 2.327 20.362C2.61462 20.9264 3.07356 21.3854 3.63805 21.673C4.01643 21.8658 4.40964 21.9371 4.80499 21.9694C5.17956 22 5.63431 22 6.16145 22H17.8386C18.3657 22 18.8205 22 19.195 21.9694C19.5904 21.9371 19.9836 21.8658 20.362 21.673C20.9265 21.3854 21.3854 20.9264 21.673 20.362C21.8658 19.9836 21.9371 19.5904 21.9694 19.195C22.0001 18.8204 22 18.3657 22 17.8386L22.0001 10.4667C22.0006 9.98993 22.0011 9.56992 21.889 9.1695C21.7906 8.8181 21.629 8.48759 21.412 8.19421C21.1647 7.8599 20.8329 7.6024 20.4563 7.31011L13.5963 1.97465L13.5216 1.91623C13.2546 1.7066 12.9201 1.44395 12.5227 1.33636ZM8.00003 16C7.44775 16 7.00003 16.4477 7.00003 17C7.00003 17.5523 7.44775 18 8.00003 18H16C16.5523 18 17 17.5523 17 17C17 16.4477 16.5523 16 16 16H8.00003Z", fill: "currentColor" }) }));
 };
@@ -11,11 +11,13 @@ const SettingsIcon = () => {
 };
 const BottomNavigation = () => {
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-    return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), _jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", onClick: () => {
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
+    return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), !isBetterAuth && (_jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", onClick: () => {
                         setB3ModalContentType({
                             type: "anySpend",
                             showBackButton: true,
                         });
-                    }, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
+                    }, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] })), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
 };
 export default BottomNavigation;

package/dist/esm/global-account/react/components/ManageAccount/Header.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CopyToClipboard, useAuthentication, useModalStore, } from "../../../../global-account/react/index.js";
+import { CopyToClipboard, useAuthentication, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { AnimatePresence, motion } from "framer-motion";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useActiveWallet, useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { UserAvatar } from "../UserAvatar/UserAvatar.js";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
 import LinkIcon from "../icons/LinkIcon.js";
 import SignOutIcon from "../icons/SignOutIcon.js";
@@ -39,7 +40,34 @@ function WalletItem({ wallet, isActive, onClick }) {
                         : "Wallet";
     return (_jsxs("div", { className: `b3-modal-wallet-item ${isActive ? "b3-modal-wallet-item-active dark:bg-b3-line bg-[#F4F4F5]" : "hover:bg-b3-line/50"} box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`, onClick: onClick, children: [_jsx("div", { className: "relative size-10 shrink-0 text-clip rounded-full", children: isGlobalAccount ? (_jsx("div", { className: "flex size-full items-center justify-center p-1", children: _jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : walletImage ? (_jsx("img", { src: walletImage, alt: walletName, className: "size-full object-contain p-1" })) : (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(WalletIcon, {}) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold truncate text-sm", children: walletName }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) })] }), isActive && (_jsx("div", { className: "shrink-0", children: _jsx(CheckIcon, {}) }))] }));
 }
+function BetterAuthHeader({ onLogout }) {
+    const contentType = useModalStore(state => state.contentType);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const partnerId = contentType?.partnerId;
+    const { logout, user } = useAuthentication(partnerId);
+    const [logoutLoading, setLogoutLoading] = useState(false);
+    const displayName = user?.username || user?.email || "Account";
+    const onLogoutEnhanced = async () => {
+        setLogoutLoading(true);
+        try {
+            await logout();
+            onLogout?.();
+        }
+        finally {
+            setB3ModalOpen(false);
+            setLogoutLoading(false);
+        }
+    };
+    return (_jsxs("div", { className: "bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UserAvatar, { avatarUrl: user?.avatar, name: displayName, size: 40, className: "shrink-0" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && (_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-left text-sm", children: user.username })), user?.email && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }), _jsx(CopyToClipboard, { text: user.email })] }))] })] }), _jsxs("button", { className: "border-b3-line hover:bg-b3-line flex items-center justify-center gap-1.5 rounded-xl border border-solid px-3 py-2 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, children: [logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "text-b3-grey" })), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Sign out" })] })] }));
+}
 export function Header({ onLogout }) {
+    const { authStrategy } = useB3Config();
+    if (authStrategy === "better-auth") {
+        return _jsx(BetterAuthHeader, { onLogout: onLogout });
+    }
+    return _jsx(WalletHeader, { onLogout: onLogout });
+}
+function WalletHeader({ onLogout }) {
     const activeWallet = useActiveWallet();
     const connectedWallets = useConnectedWallets();
     const setActiveWallet = useSetActiveWallet();
@@ -56,10 +84,14 @@ export function Header({ onLogout }) {
     const isActiveGlobalAccount = activeWallet?.id.includes("ecosystem");
     const onLogoutEnhanced = async () => {
         setLogoutLoading(true);
-        await logout();
-        onLogout?.();
-        setB3ModalOpen(false);
-        setLogoutLoading(false);
+        try {
+            await logout();
+            onLogout?.();
+        }
+        finally {
+            setB3ModalOpen(false);
+            setLogoutLoading(false);
+        }
     };
     const handleWalletSwitch = (wallet) => {
         setActiveWallet(wallet);

package/dist/esm/global-account/react/components/ManageAccount/HomeContent.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useB3Config } from "../../../../global-account/react/index.js";
 import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs.js";
 import { Header } from "./Header.js";
 import HomeActions from "./HomeActions.js";
@@ -6,5 +7,7 @@ import NFTContent from "./NFTContent.js";
 import ProfileSection from "./ProfileSection.js";
 import TokenContent from "./TokenContent.js";
 export function HomeContent({ showDeposit = false, showSwap = true }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), _jsx("div", { className: "b3-modal-balance-content space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { className: "b3-modal-balance-tabs-list", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) })] })] }));
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), !isBetterAuth && _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), !isBetterAuth && (_jsx("div", { className: "b3-modal-balance-content space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { className: "b3-modal-balance-tabs-list", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) }))] })] }));
 }

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

@@ -1,12 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TabsContentPrimitive, TabsPrimitive, useModalStore, } from "../../../../global-account/react/index.js";
+import { TabsContentPrimitive, TabsPrimitive, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
 import BottomNavigation from "./BottomNavigation.js";
 import { HomeContent } from "./HomeContent.js";
 import SettingsContent from "./SettingsContent.js";
 export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const contentType = useModalStore(state => state.contentType);
     const { activeTab = "home", setActiveTab } = contentType;
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    // Better Auth: single-view layout — no Home/Swap tabs, just settings content
+    if (isBetterAuth) {
+        return (_jsx("div", { className: "b3-manage-account flex-1", children: _jsx(SettingsContent, { partnerId: partnerId, onLogout: onLogout, chain: chain }) }));
+    }
     return (_jsx("div", { className: "b3-manage-account flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
                 const tab = value;
                 if (tab === "swap") {

package/dist/esm/global-account/react/components/ManageAccount/ProfileSection.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAccountWallet, useModalStore, useProfile, useSimBalance, useUser, } from "../../../../global-account/react/index.js";
+import { useAccountWallet, useB3Config, useModalStore, useProfile, useSimBalance, useUser, } from "../../../../global-account/react/index.js";
 import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
+import { AVATAR_COLORS } from "../../../../shared/constants/index.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
 import Avatar from "boring-avatars";
@@ -9,8 +10,9 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA.js";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
-const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
 const ProfileSection = () => {
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const account = useActiveAccount();
     const { address: eoaAddress } = useFirstEOA();
     const { address: smartWalletAddress } = useAccountWallet();
@@ -45,7 +47,7 @@ const ProfileSection = () => {
         setImgError(false);
     }, [avatarSrc]);
     const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
-    const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || "user";
-    return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx("div", { className: "border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border", children: avatarSrc && !imgError ? (_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "h-full w-full object-cover", onError: handleImgError })) : (_jsx(Avatar, { name: avatarSeed, variant: "beam", size: 56, colors: AVATAR_COLORS })) }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] }), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
+    const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || user?.email || "user";
+    return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx("div", { className: "border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border", children: avatarSrc && !imgError ? (_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "h-full w-full object-cover", onError: handleImgError })) : (_jsx(Avatar, { name: avatarSeed, variant: "beam", size: 56, colors: AVATAR_COLORS })) }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [!isBetterAuth && (_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] })), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername }), isBetterAuth && user?.email && (_jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }))] })] }) }));
 };
 export default ProfileSection;

package/dist/esm/global-account/react/components/ManageAccount/SettingsContent.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuthentication, useModalStore } from "../../../../global-account/react/index.js";
+import { useAuthentication, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
 import { getSessionDurationDays, SESSION_DURATION_LABELS } from "../../../../shared/utils/session-duration.js";
-import { Loader2 } from "lucide-react";
+import { Bell, Clock, Link, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useProfiles } from "thirdweb/react";
 import SignOutIcon from "../icons/SignOutIcon.js";
@@ -10,6 +10,8 @@ import ModalHeader from "../ModalHeader/ModalHeader.js";
 import SettingsMenuItem from "./SettingsMenuItem.js";
 import SettingsProfileCard from "./SettingsProfileCard.js";
 const SettingsContent = ({ partnerId, onLogout, chain, }) => {
+    const { authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const { logout, user } = useAuthentication(partnerId);
@@ -45,7 +47,7 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Stay signed in", subtitle: SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [!isBetterAuth && _jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [!isBetterAuth && (_jsx(SettingsMenuItem, { icon: _jsx(Link, { size: 18, className: "text-[#51525c]" }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") })), _jsx(SettingsMenuItem, { icon: _jsx(Bell, { size: 18, className: "text-[#51525c]" }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), _jsx(SettingsMenuItem, { icon: _jsx(Clock, { size: 18, className: "text-[#51525c]" }), title: "Stay signed in", subtitle: SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
                         boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
                     }, children: [logoutLoading ? (_jsx(Loader2, { className: "text-b3-grey animate-spin", size: 20 })) : (_jsx(SignOutIcon, { size: 20, className: "text-b3-grey", color: "currentColor" })), _jsx("p", { className: "text-b3-grey dark:text-b3-foreground-muted font-neue-montreal-semibold text-base", children: "Sign out" })] }) })] }));
 };

package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js

@@ -16,7 +16,8 @@ const SettingsProfileCard = () => {
         address: eoaAddress || account?.address,
         fresh: true,
     });
-    const { partnerId } = useB3Config();
+    const { partnerId, authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const { user, setUser } = useAuthentication(partnerId);
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
@@ -66,19 +67,29 @@ const SettingsProfileCard = () => {
         }
         setIsSaving(true);
         try {
-            const sanitizedUsername = ens_normalize(editedUsername.trim());
-            const b3Username = `${sanitizedUsername}.b3.fun`;
-            const usernameSignMessage = `Register "${b3Username}"`;
-            const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
-            if (!usernameSignature) {
-                throw new Error("Failed to sign username registration message");
+            let updatedUser;
+            if (isBetterAuth) {
+                // Better Auth: register username without wallet signing (DB-only, no ENS)
+                // Skip ens_normalize — it rejects underscores/mixed-case that are valid non-ENS usernames
+                const sanitizedUsername = editedUsername.trim().toLowerCase();
+                // Type assertion needed: b3-mono now accepts message/hash as optional for Better Auth users
+                updatedUser = (await app
+                    .service("users")
+                    .registerUsername({ username: sanitizedUsername }, {}));
+            }
+            else {
+                // Thirdweb: register username with wallet signature + on-chain ENS
+                const sanitizedUsername = ens_normalize(editedUsername.trim());
+                const b3Username = `${sanitizedUsername}.b3.fun`;
+                const usernameSignMessage = `Register "${b3Username}"`;
+                const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
+                if (!usernameSignature) {
+                    throw new Error("Failed to sign username registration message");
+                }
+                updatedUser = (await app
+                    .service("users")
+                    .registerUsername({ username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature }, {}));
             }
-            console.log("@@usernameSignature", usernameSignature);
-            // Register username with ENS
-            // Note: Type assertion needed until @b3dotfun/b3-api package is updated with RegisterUsername type
-            const updatedUser = (await app
-                .service("users")
-                .registerUsername({ username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature }, {}));
             // Update user state - registerUsername returns an array with single user
             setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
             // Refresh profile to get updated data
@@ -107,6 +118,6 @@ const SettingsProfileCard = () => {
                 /* Edit mode - inline input */
                 _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { ref: inputRef, type: "text", value: editedUsername, onChange: e => setEditedUsername(e.target.value), onKeyDown: handleKeyDown, disabled: isSaving, className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue text-md w-full rounded-md border px-2 py-1 leading-none transition-colors focus:outline-none disabled:opacity-50", placeholder: "Enter username" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: handleSaveUsername, disabled: isSaving, className: "text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Save username", children: isSaving ? _jsx(Loader2, { size: 18, className: "animate-spin" }) : _jsx(Check, { size: 18, strokeWidth: 2.5 }) }), _jsx("button", { onClick: handleCancelEdit, disabled: isSaving, className: "text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Cancel editing", children: _jsx(X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
                 /* Display mode */
-                _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C] dark:text-white", children: "Edit Username" }) })] })) })] }));
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername || user?.email }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C] dark:text-white", children: "Edit Username" }) })] })) })] }));
 };
 export default SettingsProfileCard;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input } from "../../../../global-account/react/index.js";
+import { Button } from "../../../../global-account/react/index.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { useState } from "react";
 import { useBetterAuth } from "../../hooks/useBetterAuth.js";
+import { PasswordInput } from "./components/PasswordInput.js";
 const debug = debugB3React("BetterAuthResetPassword");
 /**
  * Standalone reset password form. Render this on your reset password page.
@@ -57,8 +58,8 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
     if (!token) {
         return (_jsx("div", { className: `w-full max-w-[400px] px-6 text-center ${className || ""}`, children: _jsx("p", { className: "text-sm text-red-500", children: "Invalid or missing reset token." }) }));
     }
-    return (_jsxs("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: [_jsxs("div", { className: "mb-10 text-center", children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: success ? "Password reset" : "Set new password" }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: success ? "Your password has been updated." : "Enter your new password below." })] }), success ? (_jsx("div", { className: "space-y-4 text-center", children: _jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) })) : (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "New password" }), _jsx(Input, { type: "password", placeholder: "At least 8 characters", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Confirm password" }), _jsx(Input, { type: "password", placeholder: "Repeat your password", value: confirmPassword, onChange: e => setConfirmPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
+    return (_jsxs("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: [_jsxs("div", { className: "mb-10 text-center", children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: success ? "Password reset" : "Set new password" }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: success ? "Your password has been updated." : "Enter your new password below." })] }), success ? (_jsx("div", { className: "space-y-4 text-center", children: _jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) })) : (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "New password" }), _jsx(PasswordInput, { placeholder: "At least 8 characters", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, className: "h-11 px-4 pr-11 text-[15px]" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Confirm password" }), _jsx(PasswordInput, { placeholder: "Repeat your password", value: confirmPassword, onChange: e => setConfirmPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
                                     if (e.key === "Enter")
                                         handleSubmit();
-                                }, className: "h-11 px-4 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, 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", children: isLoading ? "Resetting..." : "Reset password" })] }))] }));
+                                }, className: "h-11 px-4 pr-11 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, 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", children: isLoading ? "Resetting..." : "Reset password" })] }))] }));
 }

package/dist/esm/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/esm/global-account/react/components/SignInWithB3/BetterAuthSignIn.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Input, useAuthStore } from "../../../../global-account/react/index.js";
+import { Button, Input, Loading, useAuthStore } from "../../../../global-account/react/index.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { useState } from "react";
 import { EmailVerificationRequiredError, useBetterAuth, } from "../../hooks/useBetterAuth.js";
+import { PasswordInput } from "./components/PasswordInput.js";
 import { strategyIcons, strategyLabels } from "./utils/signInUtils.js";
 const debug = debugB3React("BetterAuthSignIn");
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -27,9 +28,11 @@ const DEFAULT_SOCIAL_PROVIDERS = [
  * />
  * ```
  */
-export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to access your account", socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id), showEmail = true, passwordResetRedirectTo, onSuccess, onError, className, }) {
+export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to access your account", socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id), showEmail = true, passwordResetRedirectTo, verifyEmailRedirectTo, onSuccess, onError, className, }) {
     const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
     const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+    const isAuthenticating = useAuthStore(state => state.isAuthenticating);
+    const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
     const [mode, setMode] = useState("sign-in");
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
@@ -42,7 +45,9 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
     const resolvedTitle = title ||
         (mode === "forgot-password" ? "Reset password" : mode === "sign-in" ? "Welcome back" : "Create an account");
     const resolvedSubtitle = mode === "forgot-password"
-        ? "Enter your email and we'll send you a reset link"
+        ? resetEmailSent
+            ? "We've sent a password reset link to your email"
+            : "Enter your email and we'll send you a reset link"
         : subtitle || "Enter your credentials to access your account";
     const handleForgotPassword = async () => {
         const normalizedEmail = email.trim().toLowerCase();
@@ -67,6 +72,11 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
     const providers = socialProviders
         .map(id => DEFAULT_SOCIAL_PROVIDERS.find(p => p.id === id))
         .filter((p) => !!p);
+    // Show loading during session restore (before any user interaction) to prevent
+    // the login form from flashing briefly after OAuth redirect.
+    if (isAuthenticating && !hasStartedConnecting) {
+        return (_jsx("div", { className: `flex w-full max-w-[400px] items-center justify-center px-6 py-20 ${className || ""}`, children: _jsx(Loading, { variant: "primary", size: "lg" }) }));
+    }
     if (isAuthenticated) {
         return null;
     }
@@ -88,7 +98,7 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
             setIsLoading(true);
             setError(null);
             if (mode === "sign-up") {
-                await signUpWithEmail(normalizedEmail, password, name.trim());
+                await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
             }
             else {
                 await signInWithEmail(normalizedEmail, password);
@@ -145,10 +155,10 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
                             }, className: "font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Back to sign in" }) })] })), showEmail && mode !== "forgot-password" && (_jsxs("div", { className: "space-y-5", children: [mode === "sign-up" && (_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Name" }), _jsx(Input, { type: "text", placeholder: "Your name", value: name, onChange: e => setName(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] })), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Email" }), _jsx(Input, { type: "email", placeholder: "name@company.com", value: email, onChange: e => setEmail(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Password" }), mode === "sign-in" && (_jsx("button", { type: "button", onClick: () => {
                                             setMode("forgot-password");
                                             setError(null);
-                                        }, className: "text-xs font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Forgot password?" }))] }), _jsx(Input, { type: "password", placeholder: "Password", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
+                                        }, className: "text-xs font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Forgot password?" }))] }), _jsx(PasswordInput, { value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
                                     if (e.key === "Enter")
                                         handleEmailSubmit();
-                                }, className: "h-11 px-4 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, 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", children: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" })] })), providers.length > 0 && mode !== "forgot-password" && (_jsxs(_Fragment, { children: [showEmail && (_jsxs("div", { className: "my-8 flex items-center gap-4", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" }), _jsx("span", { className: "text-xs text-gray-400", children: "Or continue with" }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" })] })), _jsx("div", { className: "space-y-4", children: providers.map(provider => {
+                                }, className: "h-11 px-4 pr-11 text-[15px]" }, mode)] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, 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", children: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" })] })), providers.length > 0 && mode !== "forgot-password" && (_jsxs(_Fragment, { children: [showEmail && (_jsxs("div", { className: "my-8 flex items-center gap-4", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" }), _jsx("span", { className: "text-xs text-gray-400", children: "Or continue with" }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" })] })), _jsx("div", { className: "space-y-4", children: providers.map(provider => {
                             const icon = strategyIcons[provider.id];
                             const label = strategyLabels[provider.id] || provider.label;
                             const isProviderLoading = loadingProvider === provider.id;