@better-auth-ui/heroui 1.6.3 → 1.6.5

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

@@ -3,12 +3,8 @@ import {
   ArrowRightFromSquare,
   ArrowRightToSquare,
   ChevronsExpandVertical,
-  Display,
   Gear,
-  Moon,
-  PersonPlus,
-  Persons,
-  Sun
+  PersonPlus
 } from "@gravity-ui/icons"
 import {
   Button,
@@ -17,11 +13,9 @@ import {
   Dropdown,
   type DropdownPopoverProps,
   Label,
-  Separator,
-  Tabs
+  Separator
 } from "@heroui/react"
 
-import { SwitchAccountMenu } from "./switch-account-menu"
 import { UserAvatar } from "./user-avatar"
 import { UserView } from "./user-view"
 
@@ -33,39 +27,34 @@ export type UserButtonProps = {
    * @default "bottom"
    */
   placement?: DropdownPopoverProps["placement"]
-  themeToggle?: boolean
   variant?: ButtonProps["variant"]
 }
 
 /**
- * Render a user account dropdown button that shows account actions, session switching, and theme controls.
- *
- * Renders either an icon-only trigger or a full button showing the current user state; its dropdown contains account settings, multi-session switching (when enabled), theme selection (when enabled), and sign-in/sign-out flows depending on authentication state.
+ * Render a user account dropdown button that shows account actions.
  *
  * @param className - Additional CSS classes applied to the trigger element
  * @param placement - Dropdown popover placement (e.g., "bottom", "top-start", "bottom-end")
  * @param size - "icon" renders an avatar-only trigger; "default" renders a button with label and chevron
  * @param variant - Button visual variant passed to the underlying Button component
- * @param themeToggle - When true and theming is available, show theme selection controls in the menu
  * @returns The user button and its dropdown menu as a JSX element
  */
 export function UserButton({
   className,
   placement = "bottom",
   size = "default",
-  variant = "ghost",
-  themeToggle = true
+  variant = "ghost"
 }: UserButtonProps) {
-  const {
-    basePaths,
-    viewPaths,
-    localization,
-    multiSession,
-    appearance: { theme, setTheme, themes }
-  } = useAuth()
+  const { authClient, basePaths, viewPaths, localization, plugins } = useAuth()
 
-  const { data: session, isPending: sessionPending } = useSession()
+  const { data: session, isPending: sessionPending } = useSession(authClient)
 
+  const userMenuItems = plugins.flatMap(
+    (plugin) =>
+      plugin.userMenuItems?.map((Item, index) => (
+        <Item key={`${plugin.id}-${index.toString()}`} />
+      )) ?? []
+  )
   return (
     <Dropdown>
       {size === "icon" ? (
@@ -116,71 +105,7 @@ export function UserButton({
                 <Label>{localization.settings.settings}</Label>
               </Dropdown.Item>
 
-              {multiSession && (
-                <Dropdown.SubmenuTrigger>
-                  <Dropdown.Item textValue={localization.auth.switchAccount}>
-                    <Persons className="text-muted" />
-
-                    <Label>{localization.auth.switchAccount}</Label>
-
-                    <Dropdown.SubmenuIndicator />
-                  </Dropdown.Item>
-
-                  <Dropdown.Popover className="min-w-40 md:min-w-56 max-w-[48svw]">
-                    <SwitchAccountMenu />
-                  </Dropdown.Popover>
-                </Dropdown.SubmenuTrigger>
-              )}
-
-              {themeToggle && theme && setTheme && !!themes?.length && (
-                <Dropdown.Item className="py-1 pe-2">
-                  <Label>{localization.settings.theme}</Label>
-
-                  <Tabs
-                    className="ml-auto"
-                    selectedKey={theme}
-                    onSelectionChange={(key) => setTheme(key as string)}
-                  >
-                    <Tabs.ListContainer>
-                      <Tabs.List
-                        aria-label={localization.settings.theme}
-                        className="*:h-5 *:w-5 *:p-0"
-                      >
-                        {themes.includes("system") && (
-                          <Tabs.Tab
-                            id="system"
-                            aria-label={localization.settings.system}
-                          >
-                            <Display className="size-3" />
-
-                            <Tabs.Indicator />
-                          </Tabs.Tab>
-                        )}
-                        {themes.includes("light") && (
-                          <Tabs.Tab
-                            id="light"
-                            aria-label={localization.settings.light}
-                          >
-                            <Sun className="size-3" />
-
-                            <Tabs.Indicator />
-                          </Tabs.Tab>
-                        )}
-                        {themes.includes("dark") && (
-                          <Tabs.Tab
-                            id="dark"
-                            aria-label={localization.settings.dark}
-                          >
-                            <Moon className="size-3" />
-
-                            <Tabs.Indicator />
-                          </Tabs.Tab>
-                        )}
-                      </Tabs.List>
-                    </Tabs.ListContainer>
-                  </Tabs>
-                </Dropdown.Item>
-              )}
+              {userMenuItems}
 
               <Separator />
 
@@ -212,6 +137,8 @@ export function UserButton({
 
                 <Label>{localization.auth.signUp}</Label>
               </Dropdown.Item>
+
+              {userMenuItems}
             </>
           )}
         </Dropdown.Menu>

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

@@ -1,4 +1,8 @@
-import { useSession } from "@better-auth-ui/react"
+import {
+  type UsernameAuthClient,
+  useAuth,
+  useSession
+} from "@better-auth-ui/react"
 import { type AvatarProps, cn, Skeleton } from "@heroui/react"
 import type { User } from "better-auth"
 import type { ComponentProps } from "react"
@@ -27,9 +31,13 @@ export function UserView({
   user,
   ...props
 }: UserViewProps & ComponentProps<"div">) {
-  const { data: session, isPending: sessionPending } = useSession({
-    enabled: !user && !isPending
-  })
+  const { authClient } = useAuth()
+  const { data: session, isPending: sessionPending } = useSession(
+    authClient as UsernameAuthClient,
+    {
+      enabled: !user && !isPending
+    }
+  )
 
   const resolvedUser = user ?? session?.user
 

package/src/components/auth/username/sign-in-username.tsx

@@ -0,0 +1,299 @@
+import { authMutationKeys } from "@better-auth-ui/core"
+import {
+  type UsernameAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useFetchOptions,
+  useSendVerificationEmail,
+  useSignInEmail,
+  useSignInUsername
+} from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  Checkbox,
+  cn,
+  Description,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Link,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import { useIsMutating } from "@tanstack/react-query"
+import { type SyntheticEvent, useState } from "react"
+import { usernamePlugin } from "../../../lib/auth/username-plugin"
+import { FieldSeparator } from "../field-separator"
+import { ProviderButtons, type SocialLayout } from "../provider-buttons"
+
+export interface SignInUsernameProps {
+  className?: string
+  socialLayout?: SocialLayout
+  socialPosition?: "top" | "bottom"
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render the username-based sign-in UI.
+ *
+ * @returns The sign-in JSX element containing username/password fields, optional magic-link button, and social provider buttons.
+ */
+export function SignInUsername({
+  className,
+  socialLayout,
+  socialPosition = "bottom",
+  variant,
+  ...props
+}: SignInUsernameProps & Omit<CardProps, "children">) {
+  const {
+    authClient,
+    basePaths,
+    baseURL,
+    emailAndPassword,
+    localization,
+    plugins,
+    redirectTo,
+    socialProviders,
+    viewPaths,
+    navigate
+  } = useAuth()
+
+  const { fetchOptions, resetFetchOptions } = useFetchOptions()
+
+  const { localization: usernameLocalization } = useAuthPlugin(usernamePlugin)
+
+  const [password, setPassword] = useState("")
+
+  const { mutate: sendVerificationEmail } = useSendVerificationEmail(
+    authClient,
+    {
+      onSuccess: () => toast.success(localization.auth.verificationEmailSent)
+    }
+  )
+
+  function isEmail(value: string): boolean {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+  }
+
+  const { mutate: signInEmail, isPending: isSignInEmailPending } =
+    useSignInEmail(authClient, {
+      onError: (error, { email }) => {
+        setPassword("")
+
+        if (error.error?.code === "EMAIL_NOT_VERIFIED") {
+          toast.danger(error.error?.message || error.message, {
+            actionProps: {
+              children: localization.auth.resend,
+              onClick: () =>
+                sendVerificationEmail({
+                  email,
+                  callbackURL: `${baseURL}${redirectTo}`
+                })
+            }
+          })
+        } else {
+          toast.danger(error.error?.message || error.message)
+        }
+
+        resetFetchOptions()
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    })
+
+  const { mutate: signInUsername, isPending: isSignInUsernamePending } =
+    useSignInUsername(authClient as UsernameAuthClient, {
+      onError: (error) => {
+        setPassword("")
+        toast.danger(error.error?.message || error.message)
+        resetFetchOptions()
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    })
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get("email") as string
+    const rememberMe = formData.get("rememberMe") === "on"
+
+    if (isEmail(email)) {
+      signInEmail({
+        email,
+        password,
+        ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+        fetchOptions
+      })
+    } else {
+      signInUsername({
+        username: email,
+        password,
+        ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+        fetchOptions
+      })
+    }
+  }
+
+  const signInMutating = useIsMutating({
+    mutationKey: authMutationKeys.signIn.all
+  })
+  const signUpMutating = useIsMutating({
+    mutationKey: authMutationKeys.signUp.all
+  })
+  const isPending = signInMutating + signUpMutating > 0
+  const isSignInPending = isSignInEmailPending || isSignInUsernamePending
+
+  const Captcha = plugins.find(
+    (plugin) => plugin.captchaComponent
+  )?.captchaComponent
+
+  const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
+
+  return (
+    <Card
+      className={cn("w-full max-w-sm gap-4 md:p-6", className)}
+      variant={variant}
+      {...props}
+    >
+      <Card.Header>
+        <Card.Title className="text-xl font-semibold mb-1">
+          {localization.auth.signIn}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content className="gap-4">
+        {socialPosition === "top" && (
+          <>
+            {!!socialProviders?.length && (
+              <ProviderButtons socialLayout={socialLayout} />
+            )}
+
+            {showSeparator && (
+              <FieldSeparator>{localization.auth.or}</FieldSeparator>
+            )}
+          </>
+        )}
+
+        {emailAndPassword?.enabled && (
+          <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            <TextField
+              name="email"
+              type="text"
+              autoComplete="username email"
+              isDisabled={isPending}
+            >
+              <Label>{usernameLocalization.username}</Label>
+
+              <Input
+                placeholder={usernameLocalization.usernameOrEmailPlaceholder}
+                variant={variant === "transparent" ? "primary" : "secondary"}
+                required
+              />
+
+              <FieldError />
+            </TextField>
+
+            <TextField
+              minLength={emailAndPassword?.minPasswordLength}
+              maxLength={emailAndPassword?.maxPasswordLength}
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              isDisabled={isPending}
+              value={password}
+              onChange={setPassword}
+            >
+              <Label>{localization.auth.password}</Label>
+
+              <Input
+                placeholder={localization.auth.passwordPlaceholder}
+                variant={variant === "transparent" ? "primary" : "secondary"}
+                required
+              />
+
+              <FieldError />
+            </TextField>
+
+            {emailAndPassword?.rememberMe && (
+              <Checkbox
+                name="rememberMe"
+                isDisabled={isPending}
+                variant={variant === "transparent" ? "primary" : "secondary"}
+              >
+                <Checkbox.Control>
+                  <Checkbox.Indicator />
+                </Checkbox.Control>
+
+                <Checkbox.Content>
+                  <Label>{localization.auth.rememberMe}</Label>
+                </Checkbox.Content>
+              </Checkbox>
+            )}
+
+            {Captcha && <div className="flex justify-center">{Captcha}</div>}
+
+            <div className="flex flex-col gap-3">
+              <Button
+                type="submit"
+                className="w-full"
+                isPending={isSignInPending || isPending}
+              >
+                {isSignInPending && <Spinner color="current" size="sm" />}
+
+                {localization.auth.signIn}
+              </Button>
+
+              {plugins.flatMap((plugin) =>
+                plugin.authButtons?.map((AuthButton, index) => (
+                  <AuthButton
+                    key={`${plugin.id}-${index.toString()}`}
+                    view="signIn"
+                  />
+                ))
+              )}
+            </div>
+          </Form>
+        )}
+
+        {socialPosition === "bottom" && (
+          <>
+            {showSeparator && (
+              <FieldSeparator>{localization.auth.or}</FieldSeparator>
+            )}
+
+            {!!socialProviders?.length && (
+              <ProviderButtons socialLayout={socialLayout} />
+            )}
+          </>
+        )}
+      </Card.Content>
+
+      <Card.Footer className="flex-col gap-3">
+        {emailAndPassword?.forgotPassword && (
+          <Link
+            href={`${basePaths.auth}/${viewPaths.auth.forgotPassword}`}
+            className="no-underline hover:underline"
+          >
+            {localization.auth.forgotPasswordLink}
+          </Link>
+        )}
+
+        {emailAndPassword?.enabled && (
+          <Description className="text-sm">
+            {localization.auth.needToCreateAnAccount}{" "}
+            <Link
+              href={`${basePaths.auth}/${viewPaths.auth.signUp}`}
+              className="text-accent no-underline hover:underline decoration-accent-hover"
+            >
+              {localization.auth.signUp}
+            </Link>
+          </Description>
+        )}
+      </Card.Footer>
+    </Card>
+  )
+}

package/src/components/auth/username/username-field.tsx

@@ -0,0 +1,124 @@
+import {
+  type UsernameAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useIsUsernameAvailable
+} from "@better-auth-ui/react"
+import { Check, Xmark } from "@gravity-ui/icons"
+import {
+  FieldError,
+  InputGroup,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import { useDebouncer } from "@tanstack/react-pacer"
+import { useState } from "react"
+import { usernamePlugin } from "../../../lib/auth/username-plugin"
+import type { AdditionalFieldProps } from "../additional-field"
+
+/**
+ * Renderer for the `username` additional field. Owns availability checking,
+ * length limits, and visual indicators. `FieldError` automatically surfaces
+ * native validation messages. Availability feedback is shown via the icon and
+ * aria-label without affecting the field's invalid state.
+ */
+export function UsernameField({
+  name,
+  field,
+  isPending,
+  variant
+}: AdditionalFieldProps) {
+  const { authClient } = useAuth()
+  const {
+    localization,
+    minUsernameLength,
+    maxUsernameLength,
+    isUsernameAvailable: checkAvailability
+  } = useAuthPlugin(usernamePlugin)
+
+  const currentUsername = String(field.defaultValue ?? "")
+  const [value, setValue] = useState(currentUsername)
+
+  const {
+    mutate: requestAvailability,
+    data: availability,
+    error: availabilityError,
+    reset: resetAvailability
+  } = useIsUsernameAvailable(authClient as UsernameAuthClient, {
+    // Bypass global error toast
+    onError: () => {}
+  })
+
+  const debouncer = useDebouncer(
+    (next: string) => {
+      const trimmed = next.trim()
+      // Skip blank input and the user's own current username (profile view).
+      if (!trimmed || trimmed === currentUsername) {
+        resetAvailability()
+        return
+      }
+
+      requestAvailability({ username: trimmed })
+    },
+    { wait: 500 }
+  )
+
+  function handleChange(next: string) {
+    setValue(next)
+    resetAvailability()
+
+    if (checkAvailability) {
+      debouncer.maybeExecute(next)
+    }
+  }
+
+  const isCheckingAvailability =
+    !!checkAvailability && !!value.trim() && value.trim() !== currentUsername
+
+  return (
+    <TextField
+      name={name}
+      type="text"
+      autoComplete="username"
+      minLength={minUsernameLength}
+      maxLength={maxUsernameLength}
+      isDisabled={isPending}
+      isReadOnly={field.readOnly}
+      value={value}
+      onChange={handleChange}
+    >
+      <Label>{field.label}</Label>
+
+      <InputGroup variant={variant === "transparent" ? "primary" : "secondary"}>
+        <InputGroup.Input
+          placeholder={field.placeholder}
+          required={field.required}
+        />
+
+        {isCheckingAvailability && (
+          <InputGroup.Suffix
+            aria-label={
+              availability?.available
+                ? localization.usernameAvailable
+                : availability?.available === false
+                  ? localization.usernameTaken
+                  : undefined
+            }
+            className="px-2"
+          >
+            {availability?.available ? (
+              <Check className="text-success" />
+            ) : availabilityError || availability?.available === false ? (
+              <Xmark className="text-danger" />
+            ) : (
+              <Spinner size="sm" color="current" />
+            )}
+          </InputGroup.Suffix>
+        )}
+      </InputGroup>
+
+      <FieldError />
+    </TextField>
+  )
+}

package/src/email.ts

@@ -0,0 +1,9 @@
+"use client"
+
+export * from "./components/auth/email/email-changed-email"
+export * from "./components/auth/email/email-verification-email"
+export * from "./components/auth/email/magic-link-email"
+export * from "./components/auth/email/new-device-email"
+export * from "./components/auth/email/otp-email"
+export * from "./components/auth/email/password-changed-email"
+export * from "./components/auth/email/reset-password-email"

package/src/index.tsx

@@ -1,38 +1,23 @@
 "use client"
 
+export * from "./components/auth/additional-field"
 export * from "./components/auth/auth"
 export * from "./components/auth/auth-provider"
 export * from "./components/auth/forgot-password"
-export * from "./components/auth/magic-link"
-export * from "./components/auth/magic-link-button"
-export * from "./components/auth/passkey-button"
 export * from "./components/auth/provider-button"
 export * from "./components/auth/provider-buttons"
 export * from "./components/auth/reset-password"
+export * from "./components/auth/settings/account/account-settings"
+export * from "./components/auth/settings/account/change-email"
+export * from "./components/auth/settings/account/user-profile"
+export * from "./components/auth/settings/security/active-sessions"
+export * from "./components/auth/settings/security/change-password"
+export * from "./components/auth/settings/security/linked-accounts"
+export * from "./components/auth/settings/security/security-settings"
+export * from "./components/auth/settings/settings"
 export * from "./components/auth/sign-in"
 export * from "./components/auth/sign-out"
 export * from "./components/auth/sign-up"
-export * from "./components/email/email-changed-email"
-export * from "./components/email/email-verification-email"
-export * from "./components/email/magic-link-email"
-export * from "./components/email/new-device-email"
-export * from "./components/email/otp-email"
-export * from "./components/email/password-changed-email"
-export * from "./components/email/reset-password-email"
-export * from "./components/settings/account/account-settings"
-export * from "./components/settings/account/appearance"
-export * from "./components/settings/account/change-email"
-export * from "./components/settings/account/manage-account"
-export * from "./components/settings/account/manage-accounts"
-export * from "./components/settings/account/user-profile"
-export * from "./components/settings/security/active-sessions"
-export * from "./components/settings/security/change-password"
-export * from "./components/settings/security/danger-zone"
-export * from "./components/settings/security/delete-user"
-export * from "./components/settings/security/linked-accounts"
-export * from "./components/settings/security/passkeys"
-export * from "./components/settings/security/security-settings"
-export * from "./components/settings/settings"
-export * from "./components/user/user-avatar"
-export * from "./components/user/user-button"
-export * from "./components/user/user-view"
+export * from "./components/auth/user/user-avatar"
+export * from "./components/auth/user/user-button"
+export * from "./components/auth/user/user-view"