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

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

@@ -4,16 +4,19 @@ import {
   SignInWithB3ModalProps,
   StyleRoot,
   useAccountWallet,
+  useAuthStore,
   useAuthentication,
   useB3Config,
   useIsMobile,
 } from "@b3dotfun/sdk/global-account/react";
 import Icon from "@b3dotfun/sdk/global-account/react/components/custom/Icon";
-import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { AVATAR_COLORS, ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
+import Avatar from "boring-avatars";
 import { ReactNode, useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { useUser } from "../../hooks/useUser";
 import { ManageAccountButton } from "../custom/ManageAccountButton";
 
 type SignInProps = {
@@ -30,7 +33,9 @@ type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton">
 
 export function SignIn(props: SignInWithB3Props) {
   const { className } = props;
-  const { automaticallySetFirstEoa, partnerId } = useB3Config();
+  const { automaticallySetFirstEoa, partnerId, authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
+
   const {
     address: globalAddress,
     ensName,
@@ -53,6 +58,11 @@ export function SignIn(props: SignInWithB3Props) {
 
   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: string | undefined) => {
     if (
       !selectedWalletId ||
@@ -72,21 +82,29 @@ export function SignIn(props: SignInWithB3Props) {
     }
   }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
 
+  const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
+
   // Desktop version - original dropdown menu
   return (
     <StyleRoot>
       <Menu className={`relative flex items-center ${className || ""}`} as="div">
-        {globalAddress ? (
+        {isLoggedIn ? (
           <>
             <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none">
-              {!!walletImage && (
-                <IPFSMediaRenderer
-                  src={walletImage}
-                  alt="Wallet Image"
-                  className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
-                />
+              {isBetterAuth ? (
+                <Avatar name={userDisplayName} variant="beam" size={24} colors={AVATAR_COLORS} />
+              ) : (
+                !!walletImage && (
+                  <IPFSMediaRenderer
+                    src={walletImage}
+                    alt="Wallet Image"
+                    className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
+                  />
+                )
               )}
-              <div className="text-as-primary">{ensName ? ensName : truncateAddress(globalAddress)}</div>
+              <div className="text-as-primary">
+                {isBetterAuth ? userDisplayName : ensName ? ensName : truncateAddress(globalAddress ?? "")}
+              </div>
             </MenuButton>
             <Transition
               enter="duration-200 ease-out"
@@ -103,7 +121,16 @@ export function SignIn(props: SignInWithB3Props) {
                 anchor={isMobile ? "top end" : undefined}
               >
                 <div className="bg-b3-react-background">
-                  {connectedEOAWallet ? (
+                  {isBetterAuth ? (
+                    /* Better Auth: show user info instead of wallet switching */
+                    <div className="flex items-center gap-3 rounded-xl p-3">
+                      <Avatar name={userDisplayName} variant="beam" size={48} colors={AVATAR_COLORS} />
+                      <div className="flex flex-col gap-0.5">
+                        {user?.username && <div className="text-b3-react-primary font-semibold">{user.username}</div>}
+                        {user?.email && <div className="text-b3-react-secondary text-sm">{user.email}</div>}
+                      </div>
+                    </div>
+                  ) : connectedEOAWallet ? (
                     <div
                       className={cn(
                         "border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3",
@@ -118,7 +145,7 @@ export function SignIn(props: SignInWithB3Props) {
                         />
                         <div className="ml-4 grow">
                           {ensName && <div>{ensName}</div>}
-                          <div>{truncateAddress(globalAddress)}</div>
+                          <div>{truncateAddress(globalAddress ?? "")}</div>
                           {/* <div>{walletInfo?.name}</div> */}
                         </div>
                       </div>
@@ -143,7 +170,7 @@ export function SignIn(props: SignInWithB3Props) {
                           />
                           <div className="grow pl-4">
                             {ensName && <div>{ensName}</div>}
-                            <div>{truncateAddress(globalAddress)}</div>
+                            <div>{truncateAddress(globalAddress ?? "")}</div>
                             <div>Smart wallet</div>
                           </div>
                         </div>
@@ -159,7 +186,9 @@ export function SignIn(props: SignInWithB3Props) {
                   <button className="mb-2 w-full space-y-1" onClick={onDisconnect}>
                     <div className="hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors">
                       <Icon className="fill-b3-react-primary mr-4 shrink-0 transition-colors" name="logout" />
-                      <div className="text-b3-react-primary mr-auto transition-colors">Disconnect</div>
+                      <div className="text-b3-react-primary mr-auto transition-colors">
+                        {isBetterAuth ? "Sign out" : "Disconnect"}
+                      </div>
                     </div>
                   </button>
                 </div>

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

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

package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx

@@ -23,9 +23,11 @@ const SOCIAL_PROVIDERS: { id: BetterAuthSocialProvider; label: string }[] = [
 interface LoginStepBetterAuthProps {
   onSuccess?: () => void;
   onError?: (error: Error) => Promise<void>;
+  /** URL Better Auth redirects to after server-side email verification. */
+  verifyEmailRedirectTo?: string;
 }
 
-export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthProps) {
+export function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }: LoginStepBetterAuthProps) {
   const { partnerId } = useB3Config();
   const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
 
@@ -63,7 +65,7 @@ export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthP
 
       if (mode === "sign-up") {
         debug("Signing up", { email: normalizedEmail, name: name.trim() });
-        await signUpWithEmail(normalizedEmail, password, name.trim());
+        await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
       } else {
         debug("Signing in", { email: normalizedEmail });
         await signInWithEmail(normalizedEmail, password);

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

@@ -12,6 +12,11 @@ export { StyleRoot } from "./StyleRoot";
 // SignInWithB3 Components
 export { BetterAuthResetPassword, type BetterAuthResetPasswordProps } from "./SignInWithB3/BetterAuthResetPassword";
 export { BetterAuthSignIn, type BetterAuthSignInProps } from "./SignInWithB3/BetterAuthSignIn";
+export {
+  BetterAuthVerifyEmail,
+  type BetterAuthVerifyEmailProps,
+  type BetterAuthVerifyEmailState,
+} from "./SignInWithB3/BetterAuthVerifyEmail";
 export { AuthButton } from "./SignInWithB3/components/AuthButton";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
 export { WalletRow } from "./SignInWithB3/components/WalletRow";

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

@@ -87,7 +87,7 @@ export function useBetterAuth() {
   );
 
   const signUpWithEmail = useCallback(
-    async (email: string, password: string, name: string) => {
+    async (email: string, password: string, name: string, verifyCallbackURL?: string) => {
       debug("Signing up with email", { email, name });
       setHasStartedConnecting(true);
       setIsAuthenticating(true);
@@ -101,11 +101,12 @@ export function useBetterAuth() {
 
         const token = result.data?.token;
         if (!token) {
-          // requireEmailVerification is enabled — send verification email
-          // with the client's origin as callbackURL so the user returns here
+          // requireEmailVerification is enabled — send verification email with
+          // a callbackURL Better Auth redirects to after server-side verify.
+          // Pass verifyCallbackURL to land on a dedicated confirmation page.
           await betterAuthClient.sendVerificationEmail({
             email,
-            callbackURL: `${window.location.origin}?authStrategy=better-auth`,
+            callbackURL: verifyCallbackURL || `${window.location.origin}?authStrategy=better-auth`,
           });
           throw new EmailVerificationRequiredError();
         }

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

@@ -44,6 +44,8 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
   source?: "signInWithB3Button" | "requestPermissions";
   /** Whether to show the signers enabled modal */
   signersEnabled?: boolean;
+  /** URL Better Auth redirects to after server-side email verification. */
+  verifyEmailRedirectTo?: string;
 }
 
 /**

package/src/shared/constants/index.ts

@@ -32,3 +32,5 @@ 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"];