@better-auth-ui/heroui 1.6.3 → 1.6.4

package/src/components/auth/sign-up.tsx

@@ -1,9 +1,9 @@
 import {
-  useAuth,
-  useIsUsernameAvailable,
-  useSignUpEmail
-} from "@better-auth-ui/react"
-import { Check, Eye, EyeSlash, Xmark } from "@gravity-ui/icons"
+  authMutationKeys,
+  parseAdditionalFieldValue
+} from "@better-auth-ui/core"
+import { useAuth, useSignUpEmail } from "@better-auth-ui/react"
+import { Eye, EyeSlash } from "@gravity-ui/icons"
 import {
   Button,
   Card,
@@ -20,11 +20,10 @@ import {
   TextField,
   toast
 } from "@heroui/react"
-import { useDebouncer } from "@tanstack/react-pacer"
+import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
-
+import { AdditionalField } from "./additional-field"
 import { FieldSeparator } from "./field-separator"
-import { MagicLinkButton } from "./magic-link-button"
 import { ProviderButtons, type SocialLayout } from "./provider-buttons"
 
 export type SignUpProps = {
@@ -52,76 +51,58 @@ export function SignUp({
   ...props
 }: SignUpProps & Omit<CardProps, "children">) {
   const {
+    additionalFields,
+    authClient,
     basePaths,
     emailAndPassword,
     localization,
-    magicLink,
+    plugins,
     redirectTo,
     socialProviders,
-    username: usernameConfig,
     viewPaths,
     navigate
   } = useAuth()
 
   const [password, setPassword] = useState("")
   const [confirmPassword, setConfirmPassword] = useState("")
-  const [username, setUsername] = useState("")
 
-  const {
-    mutate: isUsernameAvailable,
-    data: usernameData,
-    error: usernameError,
-    reset: resetUsername
-  } = useIsUsernameAvailable()
-
-  const usernameDebouncer = useDebouncer(
-    (value: string) => {
-      if (!value.trim()) {
-        resetUsername()
-        return
+  const { mutate: signUpEmail, isPending: signUpEmailPending } = useSignUpEmail(
+    authClient,
+    {
+      onError: (error) => {
+        setPassword("")
+        setConfirmPassword("")
+        toast.danger(error.error?.message || error.message)
+      },
+      onSuccess: () => {
+        if (emailAndPassword?.requireEmailVerification) {
+          toast.success(localization.auth.verifyYourEmail)
+          navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+        } else {
+          navigate({ to: redirectTo })
+        }
       }
-
-      isUsernameAvailable({ username: value.trim() })
-    },
-    { wait: 500 }
-  )
-
-  function handleUsernameChange(value: string) {
-    setUsername(value)
-    resetUsername()
-
-    if (usernameConfig?.isUsernameAvailable) {
-      usernameDebouncer.maybeExecute(value)
     }
-  }
-
-  const { mutate: signUpEmail, isPending: signUpPending } = useSignUpEmail({
-    onError: (error) => {
-      setPassword("")
-      setConfirmPassword("")
-      toast.danger(error.error?.message || error.message)
-    },
-    onSuccess: () => {
-      if (emailAndPassword?.requireEmailVerification) {
-        toast.success(localization.auth.verifyYourEmail)
-        navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
-      } else {
-        navigate({ to: redirectTo })
-      }
-    }
-  })
+  )
 
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
   const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
     useState(false)
 
-  const isPending = signUpPending
+  const signInMutating = useIsMutating({
+    mutationKey: authMutationKeys.signIn.all
+  })
+  const signUpMutating = useIsMutating({
+    mutationKey: authMutationKeys.signUp.all
+  })
+  const isPending = signInMutating + signUpMutating > 0
 
-  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     const formData = new FormData(e.currentTarget)
-    const name = formData.get("name") as string
+    // `emailAndPassword.name === false` hides the name field and submits "".
+    const name = (formData.get("name") as string | null) ?? ""
     const email = formData.get("email") as string
 
     if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
@@ -131,18 +112,34 @@ export function SignUp({
       return
     }
 
+    const additionalFieldValues: Record<string, unknown> = {}
+
+    for (const field of additionalFields ?? []) {
+      if (!field.signUp || field.readOnly) continue
+      const value = parseAdditionalFieldValue(
+        field,
+        formData.get(field.name) as string | null
+      )
+
+      if (field.validate) {
+        try {
+          await field.validate(value)
+        } catch (error) {
+          toast.danger(error instanceof Error ? error.message : String(error))
+          return
+        }
+      }
+
+      if (value !== undefined) {
+        additionalFieldValues[field.name] = value
+      }
+    }
+
     signUpEmail({
       name,
       email,
       password,
-      ...(usernameConfig?.enabled
-        ? {
-            username: username.trim(),
-            ...(usernameConfig.displayUsername
-              ? { displayUsername: username.trim() }
-              : {})
-          }
-        : {})
+      ...additionalFieldValues
     })
   }
 
@@ -150,7 +147,7 @@ export function SignUp({
 
   return (
     <Card
-      className={cn("w-full max-w-sm p-4 md:p-6", className)}
+      className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
       {...props}
     >
@@ -164,10 +161,7 @@ export function SignUp({
         {socialPosition === "top" && (
           <>
             {!!socialProviders?.length && (
-              <ProviderButtons
-                isPending={isPending}
-                socialLayout={socialLayout}
-              />
+              <ProviderButtons socialLayout={socialLayout} />
             )}
 
             {showSeparator && (
@@ -178,67 +172,22 @@ export function SignUp({
 
         {emailAndPassword?.enabled && (
           <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
-            <TextField
-              name="name"
-              type="text"
-              autoComplete="name"
-              isDisabled={isPending}
-            >
-              <Label>{localization.auth.name}</Label>
-
-              <Input
-                placeholder={localization.auth.namePlaceholder}
-                required
-                variant={variant === "transparent" ? "primary" : "secondary"}
-              />
-
-              <FieldError />
-            </TextField>
-
-            {usernameConfig?.enabled && (
+            {emailAndPassword.name !== false && (
               <TextField
-                name="username"
+                name="name"
                 type="text"
-                autoComplete="username"
-                minLength={usernameConfig.minUsernameLength}
-                maxLength={usernameConfig.maxUsernameLength}
+                autoComplete="name"
                 isDisabled={isPending}
-                value={username}
-                onChange={handleUsernameChange}
-                isInvalid={
-                  !!usernameError || (usernameData && !usernameData.available)
-                }
               >
-                <Label>{localization.auth.username}</Label>
+                <Label>{localization.auth.name}</Label>
 
-                <InputGroup
+                <Input
+                  placeholder={localization.auth.namePlaceholder}
+                  required
                   variant={variant === "transparent" ? "primary" : "secondary"}
-                >
-                  <InputGroup.Input
-                    placeholder={localization.auth.usernamePlaceholder}
-                    required
-                  />
-
-                  {usernameConfig.isUsernameAvailable && username.trim() && (
-                    <InputGroup.Suffix className="px-2">
-                      {usernameData?.available ? (
-                        <Check className="text-success" />
-                      ) : usernameError || usernameData?.available === false ? (
-                        <Xmark className="text-danger" />
-                      ) : (
-                        <Spinner size="sm" color="current" />
-                      )}
-                    </InputGroup.Suffix>
-                  )}
-                </InputGroup>
+                />
 
-                <FieldError>
-                  {usernameError?.error?.message ||
-                    usernameError?.message ||
-                    (usernameData?.available === false
-                      ? localization.auth.usernameTaken
-                      : null)}
-                </FieldError>
+                <FieldError />
               </TextField>
             )}
 
@@ -259,6 +208,19 @@ export function SignUp({
               <FieldError />
             </TextField>
 
+            {additionalFields?.map(
+              (field) =>
+                field.signUp === "above" && (
+                  <AdditionalField
+                    key={field.name}
+                    name={field.name}
+                    field={field}
+                    isPending={isPending}
+                    variant={variant}
+                  />
+                )
+            )}
+
             <TextField
               minLength={emailAndPassword?.minPasswordLength}
               maxLength={emailAndPassword?.maxPasswordLength}
@@ -347,15 +309,34 @@ export function SignUp({
               </TextField>
             )}
 
+            {additionalFields?.map(
+              (field) =>
+                field.signUp &&
+                field.signUp !== "above" && (
+                  <AdditionalField
+                    key={field.name}
+                    name={field.name}
+                    field={field}
+                    isPending={isPending}
+                    variant={variant}
+                  />
+                )
+            )}
+
             <div className="flex flex-col gap-3">
               <Button type="submit" className="w-full" isPending={isPending}>
-                {isPending && <Spinner color="current" size="sm" />}
+                {signUpEmailPending && <Spinner color="current" size="sm" />}
 
                 {localization.auth.signUp}
               </Button>
 
-              {magicLink && (
-                <MagicLinkButton view="signUp" isPending={isPending} />
+              {plugins.flatMap((plugin) =>
+                plugin.authButtons?.map((AuthButton, index) => (
+                  <AuthButton
+                    key={`${plugin.id}-${index.toString()}`}
+                    view="signUp"
+                  />
+                ))
               )}
             </div>
           </Form>
@@ -368,21 +349,18 @@ export function SignUp({
             )}
 
             {!!socialProviders?.length && (
-              <ProviderButtons
-                socialLayout={socialLayout}
-                isPending={isPending}
-              />
+              <ProviderButtons socialLayout={socialLayout} />
             )}
           </>
         )}
       </Card.Content>
 
-      <Card.Footer className="flex-col">
+      <Card.Footer className="flex-col gap-3">
         <Description className="text-sm">
           {localization.auth.alreadyHaveAnAccount}{" "}
           <Link
             href={`${basePaths.auth}/${viewPaths.auth.signIn}`}
-            className="text-accent decoration-accent no-underline hover:underline"
+            className="text-accent no-underline hover:underline decoration-accent-hover"
           >
             {localization.auth.signIn}
           </Link>

package/src/components/{settings/account → auth/theme}/appearance.tsx

@@ -2,8 +2,7 @@ import {
   ThemePreviewDark,
   ThemePreviewLight,
   ThemePreviewSystem,
-  useAuth,
-  useSession
+  useAuthPlugin
 } from "@better-auth-ui/react"
 import { Display, Moon, Sun } from "@gravity-ui/icons"
 import {
@@ -12,9 +11,12 @@ import {
   cn,
   Label,
   Radio,
-  RadioGroup
+  RadioGroup,
+  useIsHydrated
 } from "@heroui/react"
 
+import { themePlugin } from "../../../lib/auth/theme-plugin"
+
 export type AppearanceProps = {
   className?: string
   variant?: CardProps["variant"]
@@ -24,42 +26,33 @@ export type AppearanceProps = {
  * Renders a theme selector card with visual theme previews.
  *
  * Displays a card containing radio buttons for selecting between system, light,
- * and dark themes. Each option shows a visual preview of the theme. Only renders
- * if theme settings are configured (theme, setTheme, and themes are provided).
- *
- * @param className - Optional additional CSS class names for the card container.
- * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
+ * and dark themes. Each option shows a visual preview of the theme. Theme options
+ * are conditionally shown based on the `themes` array provided via the theme plugin.
  */
 export function Appearance({
   className,
   variant,
   ...props
 }: AppearanceProps & Omit<CardProps, "children">) {
-  const {
-    localization,
-    appearance: { theme, setTheme, themes }
-  } = useAuth()
-  const { data: session } = useSession()
-
-  if (!setTheme || !themes?.length) {
-    return null
-  }
+  const { useTheme, localization } = useAuthPlugin(themePlugin)
+  const { theme, setTheme, themes = [] } = useTheme()
+  const hydrated = useIsHydrated()
 
   return (
     <div>
       <h2 className={cn("text-sm font-semibold mb-3")}>
-        {localization.settings.appearance}
+        {localization.appearance}
       </h2>
 
       <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
         <Card.Content>
-          <Label>{localization.settings.theme}</Label>
+          <Label>{localization.theme}</Label>
 
           <RadioGroup
             variant={variant === "transparent" ? "secondary" : "primary"}
-            value={session ? theme : ""}
+            value={hydrated ? theme : ""}
             onChange={setTheme}
-            isDisabled={!session || !theme}
+            isDisabled={!hydrated || !theme}
           >
             <div className="grid gap-3 grid-cols-2 sm:grid-cols-3">
               {themes.includes("system") && (
@@ -78,7 +71,7 @@ export function Appearance({
                     <div className="flex gap-2 justify-between">
                       <Label className="flex gap-2 items-center">
                         <Display className="text-muted" />
-                        {localization.settings.system}
+                        {localization.system}
                       </Label>
 
                       <Radio.Control>
@@ -107,7 +100,7 @@ export function Appearance({
                     <div className="flex gap-2 justify-between">
                       <Label className="flex gap-2 items-center">
                         <Sun className="text-muted" />
-                        {localization.settings.light}
+                        {localization.light}
                       </Label>
 
                       <Radio.Control>
@@ -136,7 +129,7 @@ export function Appearance({
                     <div className="flex gap-2 justify-between">
                       <Label className="flex gap-2 items-center">
                         <Moon className="text-muted" />
-                        {localization.settings.dark}
+                        {localization.dark}
                       </Label>
 
                       <Radio.Control>

package/src/components/auth/theme/theme-toggle-item.tsx

@@ -0,0 +1,110 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Display, Moon, Sun } from "@gravity-ui/icons"
+import { Dropdown, Label, Tabs } from "@heroui/react"
+
+import { themePlugin } from "../../../lib/auth/theme-plugin"
+
+const ACTIVE_TAB_SELECTOR = '[role="tab"][aria-selected="true"]'
+
+/**
+ * Theme toggle dropdown item used inside `UserButton`. Callers are responsible
+ * for ensuring theming is configured before rendering this component.
+ */
+export function ThemeToggleItem() {
+  const { useTheme, localization } = useAuthPlugin(themePlugin)
+  const { theme, setTheme, themes = [] } = useTheme()
+
+  // The Tabs aren't part of the menu's keyboard-navigation list, so arrow-key
+  // nav can't reach them on its own. When the wrapper menu item receives focus
+  // we delegate focus to the active Tab so the user can switch themes with the
+  // Left/Right arrows. React's synthetic `onFocus` bubbles (it's wired to
+  // `focusin`), so we must guard against child-originated events: without the
+  // `target === currentTarget` check, an arrow-key focus move between tabs
+  // bubbles up here and the still-stale `aria-selected="true"` lookup yanks
+  // focus back to the previously selected tab.
+  const focusActiveTab = (event: React.FocusEvent<Element>) => {
+    if (event.target !== event.currentTarget) return
+    const activeTab =
+      event.currentTarget.querySelector<HTMLElement>(ACTIVE_TAB_SELECTOR)
+    activeTab?.focus({ preventScroll: true })
+  }
+
+  // Up/Down on a Tab escapes back to the previous/next sibling menu item so
+  // users can keep navigating the menu with the arrow keys after they've
+  // entered the Tabs.
+  const handleTabsKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return
+
+    const target = event.target as HTMLElement
+    if (target.getAttribute("role") !== "tab") return
+
+    const wrapper = target.closest<HTMLElement>('[role="menuitem"]')
+    const menu = wrapper?.closest<HTMLElement>('[role="menu"]')
+    if (!wrapper || !menu) return
+
+    const items = Array.from(
+      menu.querySelectorAll<HTMLElement>(
+        '[role="menuitem"]:not([data-disabled])'
+      )
+    )
+    const currentIndex = items.indexOf(wrapper)
+    if (currentIndex === -1) return
+    const nextIndex =
+      event.key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1
+    const next = items[nextIndex]
+    if (!next) return
+
+    event.preventDefault()
+    next.focus()
+  }
+
+  return (
+    <Dropdown.Item
+      className="py-1 pe-2"
+      onFocus={focusActiveTab}
+      // Without `shouldCloseOnSelect={false}` the menu auto-closes after the
+      // user changes themes, because clicking on a Tab bubbles up as a
+      // menu-item activation.
+      shouldCloseOnSelect={false}
+    >
+      <Label>{localization.theme}</Label>
+
+      <Tabs
+        className="ml-auto"
+        selectedKey={theme}
+        onSelectionChange={(key) => setTheme(key as string)}
+      >
+        <Tabs.ListContainer onKeyDown={handleTabsKeyDown}>
+          <Tabs.List
+            aria-label={localization.theme}
+            className="*:h-5 *:w-5 *:p-0"
+          >
+            {themes.includes("system") && (
+              <Tabs.Tab id="system" aria-label={localization.system}>
+                <Display className="size-3" />
+
+                <Tabs.Indicator />
+              </Tabs.Tab>
+            )}
+
+            {themes.includes("light") && (
+              <Tabs.Tab id="light" aria-label={localization.light}>
+                <Sun className="size-3" />
+
+                <Tabs.Indicator />
+              </Tabs.Tab>
+            )}
+
+            {themes.includes("dark") && (
+              <Tabs.Tab id="dark" aria-label={localization.dark}>
+                <Moon className="size-3" />
+
+                <Tabs.Indicator />
+              </Tabs.Tab>
+            )}
+          </Tabs.List>
+        </Tabs.ListContainer>
+      </Tabs>
+    </Dropdown.Item>
+  )
+}

package/src/components/{user → auth/user}/user-avatar.tsx

@@ -1,4 +1,8 @@
-import { useSession } from "@better-auth-ui/react"
+import {
+  type UsernameAuthClient,
+  useAuth,
+  useSession
+} from "@better-auth-ui/react"
 import { Person } from "@gravity-ui/icons"
 import { Avatar, type AvatarProps, cn, Skeleton } from "@heroui/react"
 import type { User } from "better-auth"
@@ -32,9 +36,13 @@ export function UserAvatar({
   style,
   ...props
 }: UserAvatarProps & AvatarProps) {
-  const { data: session, isPending: sessionPending } = useSession({
-    enabled: !user && !isPending
-  })
+  const { authClient } = useAuth()
+  const { data: session, isPending: sessionPending } = useSession(
+    authClient as UsernameAuthClient,
+    {
+      enabled: !user && !isPending
+    }
+  )
 
   if ((isPending || sessionPending) && !user) {
     return (