@b3dotfun/sdk 0.1.69-alpha.17 → 0.1.69-alpha.18

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

@@ -0,0 +1,375 @@
+import { Button, Input, useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useState } from "react";
+import { type BetterAuthSocialProvider, useBetterAuth } from "../../hooks/useBetterAuth";
+import { strategyIcons, strategyLabels } from "./utils/signInUtils";
+
+const debug = debugB3React("BetterAuthSignIn");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+type SocialProviderConfig = { id: BetterAuthSocialProvider; label: string };
+
+const DEFAULT_SOCIAL_PROVIDERS: SocialProviderConfig[] = [
+  { id: "google", label: "Google" },
+  { id: "github", label: "GitHub" },
+  { id: "discord", label: "Discord" },
+  { id: "microsoft", label: "Microsoft" },
+  { id: "slack", label: "Slack" },
+];
+
+export interface BetterAuthSignInProps {
+  /** Title displayed above the form. Default: "Welcome back" for sign-in, "Create an account" for sign-up */
+  title?: string;
+  /** Subtitle displayed below the title */
+  subtitle?: string;
+  /** Which social providers to show. Defaults to all. Pass empty array to hide. */
+  socialProviders?: BetterAuthSocialProvider[];
+  /** Show email/password form. Default: true */
+  showEmail?: boolean;
+  /** URL to redirect to after password reset link is clicked. Token is appended as ?token=... */
+  passwordResetRedirectTo?: string;
+  /** Called after successful authentication */
+  onSuccess?: () => void;
+  /** Called on authentication error */
+  onError?: (error: Error) => void;
+  /** Optional class name for the root container */
+  className?: string;
+}
+
+/**
+ * Standalone inline sign-in component for Better Auth.
+ *
+ * Renders directly — no modal, no button wrapper. Designed for full-page
+ * sign-in layouts (e.g., B3OS web with branding on the left, form on the right).
+ *
+ * Usage:
+ * ```tsx
+ * <BetterAuthSignIn
+ *   socialProviders={["google", "github"]}
+ *   onSuccess={() => router.push("/dashboard")}
+ * />
+ * ```
+ */
+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,
+}: BetterAuthSignInProps) {
+  const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+
+  const [mode, setMode] = useState<"sign-in" | "sign-up" | "forgot-password">("sign-in");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingProvider, setLoadingProvider] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [resetEmailSent, setResetEmailSent] = useState(false);
+
+  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"
+      : subtitle || "Enter your credentials to access your account";
+
+  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, passwordResetRedirectTo);
+      setResetEmailSent(true);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to send reset email";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const providers: SocialProviderConfig[] = socialProviders
+    .map(id => DEFAULT_SOCIAL_PROVIDERS.find(p => p.id === id))
+    .filter((p): p is SocialProviderConfig => !!p);
+
+  if (isAuthenticated) {
+    return null;
+  }
+
+  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") {
+        await signUpWithEmail(normalizedEmail, password, name.trim());
+      } else {
+        await signInWithEmail(normalizedEmail, password);
+      }
+
+      debug("Auth successful");
+      onSuccess?.();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Authentication failed";
+      setError(message);
+      debug("Auth failed", err);
+      onError?.(err as Error);
+    } finally {
+      setPassword("");
+      setIsLoading(false);
+    }
+  };
+
+  const handleSocialSignIn = async (provider: BetterAuthSocialProvider) => {
+    try {
+      setIsLoading(true);
+      setLoadingProvider(provider);
+      setError(null);
+      await signInWithSocial(provider);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : `Sign in failed`;
+      setError(message);
+      onError?.(err as Error);
+      setIsLoading(false);
+      setLoadingProvider(null);
+    }
+  };
+
+  return (
+    <div className={`w-full max-w-[400px] px-6 ${className || ""}`}>
+      {/* Header */}
+      <div className="mb-10 text-center">
+        <h1 className="text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100">{resolvedTitle}</h1>
+        <p className="mt-3 text-[15px] text-gray-500 dark:text-gray-400">{resolvedSubtitle}</p>
+      </div>
+
+      {/* Forgot password view */}
+      {mode === "forgot-password" && (
+        <div className="space-y-5">
+          {resetEmailSent ? (
+            <div className="space-y-4 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="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <p className="text-[15px] text-gray-600 dark:text-gray-300">Check your email for a reset link.</p>
+            </div>
+          ) : (
+            <>
+              <div>
+                <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+                  Email
+                </label>
+                <Input
+                  type="email"
+                  placeholder="name@company.com"
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                  disabled={isLoading}
+                  onKeyDown={e => {
+                    if (e.key === "Enter") handleForgotPassword();
+                  }}
+                  className="h-11 px-4 text-[15px]"
+                />
+              </div>
+
+              {error && <p className="text-sm text-red-500">{error}</p>}
+
+              <Button
+                onClick={handleForgotPassword}
+                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"
+              >
+                {isLoading ? "Sending..." : "Send reset link"}
+              </Button>
+            </>
+          )}
+
+          <p className="mt-8 text-center text-[14px] text-gray-500 dark:text-gray-400">
+            <button
+              onClick={() => {
+                setMode("sign-in");
+                setError(null);
+                setResetEmailSent(false);
+              }}
+              className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+            >
+              Back to sign in
+            </button>
+          </p>
+        </div>
+      )}
+
+      {/* Email/Password form */}
+      {showEmail && mode !== "forgot-password" && (
+        <div className="space-y-5">
+          {mode === "sign-up" && (
+            <div>
+              <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+                Name
+              </label>
+              <Input
+                type="text"
+                placeholder="Your name"
+                value={name}
+                onChange={e => setName(e.target.value)}
+                disabled={isLoading}
+                className="h-11 px-4 text-[15px]"
+              />
+            </div>
+          )}
+
+          <div>
+            <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+              Email
+            </label>
+            <Input
+              type="email"
+              placeholder="name@company.com"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              disabled={isLoading}
+              className="h-11 px-4 text-[15px]"
+            />
+          </div>
+
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <label className="block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+                Password
+              </label>
+              {mode === "sign-in" && (
+                <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"
+                >
+                  Forgot password?
+                </button>
+              )}
+            </div>
+            <Input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              disabled={isLoading}
+              onKeyDown={e => {
+                if (e.key === "Enter") handleEmailSubmit();
+              }}
+              className="h-11 px-4 text-[15px]"
+            />
+          </div>
+
+          {error && <p className="text-sm text-red-500">{error}</p>}
+
+          <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"
+          >
+            {isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up"}
+          </Button>
+        </div>
+      )}
+
+      {/* Social providers */}
+      {providers.length > 0 && mode !== "forgot-password" && (
+        <>
+          {showEmail && (
+            <div className="my-8 flex items-center gap-4">
+              <div className="h-px flex-1 bg-gray-200 dark:bg-gray-700" />
+              <span className="text-xs text-gray-400">Or continue with</span>
+              <div className="h-px flex-1 bg-gray-200 dark:bg-gray-700" />
+            </div>
+          )}
+
+          <div className="space-y-4">
+            {providers.map(provider => {
+              const icon = strategyIcons[provider.id];
+              const label = strategyLabels[provider.id] || provider.label;
+
+              const isProviderLoading = loadingProvider === provider.id;
+
+              return (
+                <button
+                  key={provider.id}
+                  onClick={() => handleSocialSignIn(provider.id)}
+                  disabled={isLoading}
+                  style={{ paddingTop: "12px", paddingBottom: "12px" }}
+                  className="flex w-full items-center justify-center gap-3 rounded-lg border border-gray-200 bg-white px-4 text-[14px] font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+                >
+                  {isProviderLoading ? (
+                    <svg className="h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                      />
+                    </svg>
+                  ) : (
+                    icon && <img src={icon} alt="" className="h-5 w-5" />
+                  )}
+                  <span>{isProviderLoading ? "Redirecting..." : label}</span>
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {/* Toggle sign-in / sign-up */}
+      {showEmail && mode !== "forgot-password" && (
+        <p className="mt-8 text-center text-[14px] text-gray-500 dark:text-gray-400">
+          {mode === "sign-in" ? "Don't have an account? " : "Already have an account? "}
+          <button
+            onClick={() => {
+              setMode(mode === "sign-in" ? "sign-up" : "sign-in");
+              setError(null);
+            }}
+            disabled={isLoading}
+            className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+          >
+            {mode === "sign-in" ? "Sign up" : "Sign in"}
+          </button>
+        </p>
+      )}
+    </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";
@@ -34,7 +35,7 @@ export function SignInWithB3Flow({
   source = "signInWithB3Button",
   signersEnabled = false,
 }: 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 +43,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 +57,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);
@@ -292,6 +296,8 @@ export function SignInWithB3Flow({
           </div>
         </LoginStepContainer>
       );
+    } else if (authStrategy === "better-auth") {
+      content = <LoginStepBetterAuth onSuccess={() => handleLoginSuccess({} as Account)} onError={onError} />;
     } else {
       // Custom strategy
       if (strategies?.[0] === "privy") {

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

@@ -0,0 +1,263 @@
+import { Button, Input, LoginStepContainer, useB3Config } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useState } from "react";
+import { type BetterAuthSocialProvider, useBetterAuth } from "../../../hooks/useBetterAuth";
+import { AuthButton } from "../components/AuthButton";
+
+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>;
+}
+
+export function LoginStepBetterAuth({ onSuccess, onError }: 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 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());
+      } else {
+        debug("Signing in", { email: normalizedEmail });
+        await signInWithEmail(normalizedEmail, password);
+      }
+
+      debug("Auth successful");
+      onSuccess?.();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Authentication failed";
+      setError(message);
+      debug("Auth failed", err);
+      await onError?.(err as Error);
+    } 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);
+    }
+  };
+
+  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">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}
+          />
+
+          <Input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={event => setPassword(event.target.value)}
+            disabled={isLoading}
+            onKeyDown={event => {
+              if (event.key === "Enter") handleEmailSubmit();
+            }}
+          />
+
+          {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>
+  );
+}