@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.2

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

@@ -4,6 +4,7 @@ import {
   SignInWithB3ModalProps,
   StyleRoot,
   useAccountWallet,
+  useAuthStore,
   useAuthentication,
   useB3Config,
   useIsMobile,
@@ -14,6 +15,8 @@ import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { ReactNode, useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { useUser } from "../../hooks/useUser";
+import { UserAvatar } from "../UserAvatar/UserAvatar";
 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 ? (
+                <UserAvatar avatarUrl={user?.avatar} name={userDisplayName} size={24} />
+              ) : (
+                !!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">
+                      <UserAvatar avatarUrl={user?.avatar} name={userDisplayName} size={48} />
+                      <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

@@ -7,6 +7,7 @@ import {
   useGetAllTWSigners,
   useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
+import { LoginStepBetterAuth } from "./steps/LoginStepBetterAuth";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
@@ -33,8 +34,9 @@ export function SignInWithB3Flow({
   closeAfterLogin = false,
   source = "signInWithB3Button",
   signersEnabled = false,
+  verifyEmailRedirectTo,
 }: SignInWithB3ModalProps) {
-  const { automaticallySetFirstEoa } = useB3Config();
+  const { automaticallySetFirstEoa, authStrategy } = useB3Config();
   // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
   // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
   const { user, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
@@ -42,10 +44,13 @@ export function SignInWithB3Flow({
   // Tracks whether the pre-login logout has finished.
   // We must not render ConnectEmbed until logout (wallet disconnect) completes,
   // otherwise the wallet state disrupts ConnectEmbed causing a blank modal.
-  const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions");
+  const [readyToShowLogin, setReadyToShowLogin] = useState(
+    source === "requestPermissions" || authStrategy === "better-auth",
+  );
   const hasLoggedOutRef = useRef(false);
   useEffect(() => {
     if (hasLoggedOutRef.current) return;
+    if (authStrategy === "better-auth") return;
     if (source !== "requestPermissions") {
       debug("Logging out before login");
       hasLoggedOutRef.current = true;
@@ -53,7 +58,7 @@ export function SignInWithB3Flow({
         setReadyToShowLogin(true);
       });
     }
-  }, [source, logout]);
+  }, [source, logout, authStrategy]);
 
   const [step, setStep] = useState<"login" | "permissions" | null>(source === "requestPermissions" ? null : "login");
   const [sessionKeyAdded, setSessionKeyAdded] = useState(source === "requestPermissions" ? true : false);
@@ -284,7 +289,18 @@ export function SignInWithB3Flow({
   } else if (step === "login") {
     // Show loading spinner while: authenticating, waiting for pre-login logout to finish,
     // or fetching signers.
-    if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
+    if (authStrategy === "better-auth") {
+      // 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}
+          verifyEmailRedirectTo={verifyEmailRedirectTo}
+        />
+      );
+    } else if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
       content = (
         <LoginStepContainer partnerId={partnerId}>
           <div className="my-8 flex min-h-[350px] items-center justify-center">

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

@@ -1,5 +1,11 @@
 import { Button } from "../../custom/Button";
-import { strategyIcons } from "../utils/signInUtils";
+import { Github, Mail } from "lucide-react";
+import { strategyIcons, strategyLabels } from "../utils/signInUtils";
+
+const fallbackIcons = {
+  github: Github,
+  email: Mail,
+} as const;
 
 export function AuthButton({
   strategy,
@@ -10,14 +16,27 @@ export function AuthButton({
   onClick: () => void;
   isLoading: boolean;
 }) {
+  const strategyIcon = strategyIcons[strategy];
+  const strategyLabel = strategyLabels[strategy] || strategy;
+  const FallbackIcon = fallbackIcons[strategy as keyof typeof fallbackIcons];
+  const buttonLabel = `Sign in with ${strategyLabel}`;
+
   return (
     <Button
       key={strategy}
       onClick={onClick}
       disabled={isLoading}
+      aria-label={buttonLabel}
+      title={buttonLabel}
       className="flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
     >
-      <img src={strategyIcons[strategy]} className="h-9 w-9" />
+      {strategyIcon ? (
+        <img src={strategyIcon} alt={`${strategyLabel} icon`} className="h-9 w-9" />
+      ) : FallbackIcon ? (
+        <FallbackIcon className="h-9 w-9 text-gray-900 dark:text-gray-100" />
+      ) : (
+        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{strategyLabel.charAt(0)}</span>
+      )}
     </Button>
   );
 }

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

@@ -0,0 +1,62 @@
+import { Input } from "@b3dotfun/sdk/global-account/react";
+import { useState } from "react";
+
+interface PasswordInputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+
+export function PasswordInput({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Password",
+  onKeyDown,
+  className,
+}: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="relative">
+      <Input
+        type={showPassword ? "text" : "password"}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={onKeyDown}
+        className={className}
+      />
+      <button
+        type="button"
+        onClick={() => setShowPassword(!showPassword)}
+        aria-label={showPassword ? "Hide password" : "Show password"}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+        tabIndex={-1}
+      >
+        {showPassword ? (
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+            />
+          </svg>
+        ) : (
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+            />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,315 @@
+import { Button, Input, LoginStepContainer, useB3Config } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useState } from "react";
+import {
+  EmailVerificationRequiredError,
+  type BetterAuthSocialProvider,
+  useBetterAuth,
+} from "../../../hooks/useBetterAuth";
+import { AuthButton } from "../components/AuthButton";
+import { PasswordInput } from "../components/PasswordInput";
+
+const debug = debugB3React("LoginStepBetterAuth");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const SOCIAL_PROVIDERS: { id: BetterAuthSocialProvider; label: string }[] = [
+  { id: "google", label: "Google" },
+  { id: "github", label: "GitHub" },
+  { id: "discord", label: "Discord" },
+  { id: "microsoft", label: "Microsoft" },
+  { id: "slack", label: "Slack" },
+];
+
+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, verifyEmailRedirectTo }: LoginStepBetterAuthProps) {
+  const { partnerId } = useB3Config();
+  const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
+
+  const [mode, setMode] = useState<"sign-in" | "sign-up" | "forgot-password">("sign-in");
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [resetEmailSent, setResetEmailSent] = useState(false);
+  const [verificationSent, setVerificationSent] = useState(false);
+
+  const handleEmailSubmit = async () => {
+    const normalizedEmail = email.trim().toLowerCase();
+
+    if (!EMAIL_REGEX.test(normalizedEmail)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    if (!password) {
+      setError("Please enter a password");
+      return;
+    }
+
+    if (mode === "sign-up" && !name.trim()) {
+      setError("Please enter your name");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      if (mode === "sign-up") {
+        debug("Signing up", { email: normalizedEmail, name: name.trim() });
+        await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
+      } else {
+        debug("Signing in", { email: normalizedEmail });
+        await signInWithEmail(normalizedEmail, password);
+      }
+
+      debug("Auth successful");
+      onSuccess?.();
+    } catch (err) {
+      if (err instanceof EmailVerificationRequiredError) {
+        setVerificationSent(true);
+        setError(null);
+      } else {
+        const message = err instanceof Error ? err.message : "Authentication failed";
+        setError(message);
+        await onError?.(err as Error);
+      }
+      debug("Auth failed", err);
+    } finally {
+      setPassword("");
+      setIsLoading(false);
+    }
+  };
+
+  const handleForgotPassword = async () => {
+    const normalizedEmail = email.trim().toLowerCase();
+
+    if (!EMAIL_REGEX.test(normalizedEmail)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      await requestPasswordReset(normalizedEmail);
+      setResetEmailSent(true);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to send reset email";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSocialSignIn = async (provider: BetterAuthSocialProvider) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await signInWithSocial(provider);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : `${provider} sign in failed`;
+      setError(message);
+      await onError?.(err as Error);
+      setIsLoading(false);
+    }
+  };
+
+  if (verificationSent) {
+    return (
+      <LoginStepContainer partnerId={partnerId}>
+        <div className="mb-6 w-full space-y-4 px-3 text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-100">Check your email</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            We sent a verification link to <span className="font-medium text-gray-700 dark:text-gray-200">{email}</span>
+            . Verify your account, then come back and sign in.
+          </p>
+          <button
+            onClick={() => {
+              setVerificationSent(false);
+              setMode("sign-in");
+              setShowEmailForm(true);
+              setPassword("");
+            }}
+            className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+          >
+            Back to sign in
+          </button>
+        </div>
+      </LoginStepContainer>
+    );
+  }
+
+  return (
+    <LoginStepContainer partnerId={partnerId}>
+      {mode === "forgot-password" ? (
+        <div className="mb-6 w-full space-y-3 px-3">
+          <p className="text-center text-sm font-medium text-gray-900 dark:text-gray-100">Reset password</p>
+          <p className="text-center text-xs text-gray-500">
+            {resetEmailSent
+              ? "We've sent a password reset link to your email"
+              : "Enter your email and we'll send you a reset link"}
+          </p>
+
+          {resetEmailSent ? (
+            <div className="space-y-3 py-4 text-center">
+              <p className="text-sm text-green-600">Check your email for a reset link.</p>
+            </div>
+          ) : (
+            <>
+              <Input
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={event => setEmail(event.target.value)}
+                disabled={isLoading}
+                onKeyDown={event => {
+                  if (event.key === "Enter") handleForgotPassword();
+                }}
+              />
+
+              {error && <p className="text-sm text-red-500">{error}</p>}
+
+              <Button onClick={handleForgotPassword} disabled={isLoading} className="w-full">
+                {isLoading ? "Sending..." : "Send reset link"}
+              </Button>
+            </>
+          )}
+
+          <button
+            onClick={() => {
+              setMode("sign-in");
+              setShowEmailForm(true);
+              setError(null);
+              setResetEmailSent(false);
+            }}
+            className="w-full text-center text-sm text-gray-500 hover:text-gray-700"
+          >
+            Back to sign in
+          </button>
+        </div>
+      ) : showEmailForm ? (
+        <div className="mb-6 w-full space-y-3 px-3">
+          <p className="text-center text-sm font-medium text-gray-900 dark:text-gray-100">
+            {mode === "sign-in" ? "Sign in with email" : "Create an account"}
+          </p>
+
+          {mode === "sign-up" && (
+            <Input
+              type="text"
+              placeholder="Your name"
+              value={name}
+              onChange={event => setName(event.target.value)}
+              disabled={isLoading}
+            />
+          )}
+
+          <Input
+            type="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={event => setEmail(event.target.value)}
+            disabled={isLoading}
+          />
+
+          <PasswordInput
+            key={mode}
+            value={password}
+            onChange={event => setPassword(event.target.value)}
+            disabled={isLoading}
+            onKeyDown={event => {
+              if (event.key === "Enter") handleEmailSubmit();
+            }}
+            className="pr-11"
+          />
+
+          {error && <p className="text-sm text-red-500">{error}</p>}
+
+          <Button onClick={handleEmailSubmit} disabled={isLoading} className="w-full">
+            {isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up"}
+          </Button>
+
+          {mode === "sign-in" && (
+            <button
+              onClick={() => {
+                setMode("forgot-password");
+                setError(null);
+              }}
+              disabled={isLoading}
+              className="w-full text-center text-xs text-gray-500 hover:text-gray-700"
+            >
+              Forgot password?
+            </button>
+          )}
+
+          <button
+            onClick={() => {
+              setMode(mode === "sign-in" ? "sign-up" : "sign-in");
+              setError(null);
+            }}
+            disabled={isLoading}
+            className="w-full text-center text-sm text-gray-500 hover:text-gray-700"
+          >
+            {mode === "sign-in" ? "Don't have an account? Sign up" : "Already have an account? Sign in"}
+          </button>
+
+          <Button
+            variant="outline"
+            onClick={() => {
+              setShowEmailForm(false);
+              setError(null);
+            }}
+            disabled={isLoading}
+            className="w-full"
+          >
+            Back
+          </Button>
+        </div>
+      ) : (
+        <div className="mb-6 w-full space-y-4 px-3">
+          {/* Social providers */}
+          <div className="grid w-full grid-cols-3 gap-4">
+            {SOCIAL_PROVIDERS.map(provider => (
+              <AuthButton
+                key={provider.id}
+                strategy={provider.id}
+                onClick={() => handleSocialSignIn(provider.id)}
+                isLoading={isLoading}
+              />
+            ))}
+          </div>
+
+          {/* Divider */}
+          <div className="flex items-center gap-3">
+            <div className="h-px flex-1 bg-gray-200" />
+            <span className="text-xs text-gray-400">or</span>
+            <div className="h-px flex-1 bg-gray-200" />
+          </div>
+
+          {/* Email option */}
+          <AuthButton strategy="email" onClick={() => setShowEmailForm(true)} isLoading={isLoading} />
+
+          {error && <p className="text-center text-sm text-red-500">{error}</p>}
+        </div>
+      )}
+    </LoginStepContainer>
+  );
+}