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

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/SignIn.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
+import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthStore, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
 import Icon from "../../../../global-account/react/components/custom/Icon.js";
-import { ecosystemWalletId } from "../../../../shared/constants/index.js";
+import { AVATAR_COLORS, ecosystemWalletId } from "../../../../shared/constants/index.js";
 import { cn, truncateAddress } from "../../../../shared/utils/index.js";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
+import Avatar from "boring-avatars";
 import { useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { useUser } from "../../hooks/useUser.js";
 import { ManageAccountButton } from "../custom/ManageAccountButton.js";
 export function SignIn(props) {
     const { className } = props;
-    const { automaticallySetFirstEoa, partnerId } = useB3Config();
+    const { automaticallySetFirstEoa, partnerId, authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
     const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
     const isMobile = useIsMobile();
@@ -19,6 +22,10 @@ export function SignIn(props) {
     };
     const connectedWallets = useConnectedWallets();
     const setActiveWallet = useSetActiveWallet();
+    // Better Auth state
+    const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+    const { user } = useUser();
+    const userDisplayName = user?.username || user?.email || "Account";
     const handleSetActiveAccount = (selectedWalletId) => {
         if (!selectedWalletId ||
             !connectedWallets ||
@@ -34,12 +41,15 @@ export function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+    const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
     // Desktop version - original dropdown menu
-    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
+    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: isLoggedIn ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [isBetterAuth ? (_jsx(Avatar, { name: userDisplayName, variant: "beam", size: 24, colors: AVATAR_COLORS })) : (!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" }))), _jsx("div", { className: "text-as-primary", children: isBetterAuth ? userDisplayName : ensName ? ensName : truncateAddress(globalAddress ?? "") })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
-                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [isBetterAuth ? (
+                                    /* Better Auth: show user info instead of wallet switching */
+                                    _jsxs("div", { className: "flex items-center gap-3 rounded-xl p-3", children: [_jsx(Avatar, { name: userDisplayName, variant: "beam", size: 48, colors: AVATAR_COLORS }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && _jsx("div", { className: "text-b3-react-primary font-semibold", children: user.username }), user?.email && _jsx("div", { className: "text-b3-react-secondary text-sm", children: user.email })] })] })) : connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"
-                                            : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
+                                            : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: isBetterAuth ? "Sign out" : "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);
                 }, ...props })) }) }));
 }

package/dist/esm/shared/constants/index.d.ts

@@ -16,3 +16,4 @@ export declare const CLIENT_APP_BUNDLE_ID: string;
 export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
 export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
 export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
+export declare const AVATAR_COLORS: string[];

package/dist/esm/shared/constants/index.js

@@ -21,3 +21,4 @@ export const CLIENT_APP_BUNDLE_ID = process.env.EXPO_PUBLIC_B3_BUNDLE_ID || "";
 export const B3_AUTH_COOKIE_NAME = "b3-auth";
 export const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
 export const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
+export const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];

package/dist/types/shared/constants/index.d.ts

@@ -16,3 +16,4 @@ export declare const CLIENT_APP_BUNDLE_ID: string;
 export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
 export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
 export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
+export declare const AVATAR_COLORS: string[];

package/package.json

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

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

@@ -62,6 +62,8 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const contentType = useModalStore(state => state.contentType);
 
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const account = useActiveAccount();
   const { data: profile, refetch: refreshProfile } = useProfile({
     address: account?.address,
@@ -162,7 +164,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   };
 
   const handleSaveChanges = async () => {
-    if (!account?.address) {
+    if (!isBetterAuth && !account?.address) {
       toast.error("No account connected");
       return;
     }

package/src/global-account/react/components/ManageAccount/BottomNavigation.tsx

@@ -1,4 +1,4 @@
-import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { TabsListPrimitive, TabTriggerPrimitive, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 
 const HomeIcon = () => {
   return (
@@ -42,6 +42,8 @@ const SettingsIcon = () => {
 
 const BottomNavigation = () => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
 
   return (
     <div className="b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
@@ -54,19 +56,21 @@ const BottomNavigation = () => {
           <span className="text-b3-grey font-neue-montreal-semibold text-xs">Home</span>
         </TabTriggerPrimitive>
 
-        <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,
-            });
-          }}
-        >
-          <SwapIcon />
-          <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
-        </TabTriggerPrimitive>
+        {!isBetterAuth && (
+          <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,
+              });
+            }}
+          >
+            <SwapIcon />
+            <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
+          </TabTriggerPrimitive>
+        )}
 
         <TabTriggerPrimitive
           value="settings"

package/src/global-account/react/components/ManageAccount/Header.tsx

@@ -2,10 +2,13 @@ import {
   CopyToClipboard,
   ManageAccountModalProps,
   useAuthentication,
+  useB3Config,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { AnimatePresence, motion } from "framer-motion";
+import Avatar from "boring-avatars";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useActiveWallet, useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
@@ -89,7 +92,71 @@ function WalletItem({ wallet, isActive, onClick }: { wallet: Wallet; isActive: b
   );
 }
 
+function BetterAuthHeader({ onLogout }: { onLogout?: () => void }) {
+  const contentType = useModalStore(state => state.contentType) as ManageAccountModalProps;
+  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 (
+    <div className="bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3">
+      <div className="flex items-center gap-2">
+        <div className="size-10 shrink-0 overflow-hidden rounded-full">
+          <Avatar name={displayName} variant="beam" size={40} colors={AVATAR_COLORS} />
+        </div>
+        <div className="flex flex-col gap-0.5">
+          {user?.username && (
+            <p className="text-b3-grey font-neue-montreal-semibold text-left text-sm">{user.username}</p>
+          )}
+          {user?.email && (
+            <div className="flex items-center gap-1">
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{user.email}</p>
+              <CopyToClipboard text={user.email} />
+            </div>
+          )}
+        </div>
+      </div>
+      <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}
+      >
+        {logoutLoading ? (
+          <Loader2 className="animate-spin" size={16} />
+        ) : (
+          <SignOutIcon size={16} className="text-b3-grey" />
+        )}
+        <p className="text-b3-grey font-neue-montreal-semibold text-sm">Sign out</p>
+      </button>
+    </div>
+  );
+}
+
 export function Header({ onLogout }: { onLogout?: () => void }) {
+  const { authStrategy } = useB3Config();
+
+  if (authStrategy === "better-auth") {
+    return <BetterAuthHeader onLogout={onLogout} />;
+  }
+
+  return <WalletHeader onLogout={onLogout} />;
+}
+
+function WalletHeader({ onLogout }: { onLogout?: () => void }) {
   const activeWallet = useActiveWallet();
 
   const connectedWallets = useConnectedWallets();
@@ -110,10 +177,13 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
 
   const onLogoutEnhanced = async () => {
     setLogoutLoading(true);
-    await logout();
-    onLogout?.();
-    setB3ModalOpen(false);
-    setLogoutLoading(false);
+    try {
+      await logout();
+      onLogout?.();
+    } finally {
+      setB3ModalOpen(false);
+      setLogoutLoading(false);
+    }
   };
 
   const handleWalletSwitch = (wallet: Wallet) => {

package/src/global-account/react/components/ManageAccount/HomeContent.tsx

@@ -1,3 +1,4 @@
+import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs";
 import { Header } from "./Header";
 import HomeActions from "./HomeActions";
@@ -11,31 +12,36 @@ interface HomeContentProps {
 }
 
 export function HomeContent({ showDeposit = false, showSwap = true }: HomeContentProps) {
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
+
   return (
     <div className="flex flex-col">
       <Header />
       <div className="flex flex-col">
         <ProfileSection />
 
-        <HomeActions showDeposit={showDeposit} showSwap={showSwap} />
-        <div className="b3-modal-balance-content space-y-2 p-5">
-          <Tabs defaultValue={"balance"}>
-            <TabsList className="b3-modal-balance-tabs-list">
-              <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
-                Balance
-              </TabTrigger>
-              <TabTrigger value="nfts" className="font-neue-montreal-semibold p-0 pr-3">
-                NFTs
-              </TabTrigger>
-            </TabsList>
-            <TabsContent value="balance" className="px-0 pb-4 pt-2">
-              <TokenContent />
-            </TabsContent>
-            <TabsContent value="nfts" className="px-0 pb-4 pt-2">
-              <NFTContent />
-            </TabsContent>
-          </Tabs>
-        </div>
+        {!isBetterAuth && <HomeActions showDeposit={showDeposit} showSwap={showSwap} />}
+        {!isBetterAuth && (
+          <div className="b3-modal-balance-content space-y-2 p-5">
+            <Tabs defaultValue={"balance"}>
+              <TabsList className="b3-modal-balance-tabs-list">
+                <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
+                  Balance
+                </TabTrigger>
+                <TabTrigger value="nfts" className="font-neue-montreal-semibold p-0 pr-3">
+                  NFTs
+                </TabTrigger>
+              </TabsList>
+              <TabsContent value="balance" className="px-0 pb-4 pt-2">
+                <TokenContent />
+              </TabsContent>
+              <TabsContent value="nfts" className="px-0 pb-4 pt-2">
+                <NFTContent />
+              </TabsContent>
+            </Tabs>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/global-account/react/components/ManageAccount/ProfileSection.tsx

@@ -1,11 +1,13 @@
 import {
   useAccountWallet,
+  useB3Config,
   useModalStore,
   useProfile,
   useSimBalance,
   useUser,
 } from "@b3dotfun/sdk/global-account/react";
 import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import Avatar from "boring-avatars";
@@ -15,9 +17,9 @@ import { useActiveAccount } from "thirdweb/react";
 import { useFirstEOA } from "../../hooks/useFirstEOA";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 
-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();
@@ -60,7 +62,7 @@ const ProfileSection = () => {
   }, [avatarSrc]);
 
   const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
-  const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || "user";
+  const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || user?.email || "user";
 
   return (
     <div className="flex items-center justify-between px-5 py-6">
@@ -87,13 +89,18 @@ const ProfileSection = () => {
           </button>
         </div>
         <div className="global-account-profile-info flex flex-col gap-1">
-          <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
-            <div className="text-b3-foreground-muted"> $</div>
-            <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
-          </h2>
+          {!isBetterAuth && (
+            <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
+              <div className="text-b3-foreground-muted"> $</div>
+              <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
+            </h2>
+          )}
           <div className="b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">
             {currentUsername}
           </div>
+          {isBetterAuth && user?.email && (
+            <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{user.email}</div>
+          )}
         </div>
       </div>
     </div>

package/src/global-account/react/components/ManageAccount/SettingsContent.tsx

@@ -1,4 +1,4 @@
-import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { getSessionDurationDays, SESSION_DURATION_LABELS } from "@b3dotfun/sdk/shared/utils/session-duration";
 import { Loader2 } from "lucide-react";
@@ -19,6 +19,8 @@ const SettingsContent = ({
   onLogout?: () => void;
   chain: 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);
@@ -69,19 +71,21 @@ const SettingsContent = ({
 
       {/* Menu Items */}
       <div className="space-y-3 px-5">
-        <SettingsMenuItem
-          icon={
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <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"
-              />
-            </svg>
-          }
-          title="Linked Accounts"
-          subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
-          onClick={() => handleNavigate("linkAccount")}
-        />
+        {!isBetterAuth && (
+          <SettingsMenuItem
+            icon={
+              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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"
+                />
+              </svg>
+            }
+            title="Linked Accounts"
+            subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
+            onClick={() => handleNavigate("linkAccount")}
+          />
+        )}
         <SettingsMenuItem
           icon={
             <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx

@@ -18,7 +18,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);
@@ -78,25 +79,33 @@ 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: Users;
+      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 } as any, {} as any)) as unknown as Users;
+      } 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 },
+            {} as any,
+          )) as unknown as Users;
       }
-
-      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 },
-          {} as any,
-        )) as unknown as Users;
       // Update user state - registerUsername returns an array with single user
       setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
 
@@ -179,7 +188,7 @@ const SettingsProfileCard = () => {
           <>
             <div className="flex items-center gap-1">
               <p className="b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">
-                {currentUsername}
+                {currentUsername || user?.email}
               </p>
             </div>
             <button