@better-auth-ui/heroui 1.6.0 → 1.6.2

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

@@ -2,7 +2,8 @@ import {
   useAuth,
   useSendVerificationEmail,
   useSignInEmail,
-  useSignInSocial
+  useSignInSocial,
+  useSignInUsername
 } from "@better-auth-ui/react"
 import {
   Button,
@@ -24,6 +25,7 @@ import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
 import { MagicLinkButton } from "./magic-link-button"
+import { PasskeyButton } from "./passkey-button"
 import { ProviderButtons, type SocialLayout } from "./provider-buttons"
 
 export interface SignInProps {
@@ -33,6 +35,10 @@ export interface SignInProps {
   variant?: CardProps["variant"]
 }
 
+function isEmail(value: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+}
+
 /**
  * Render the sign-in UI using auth context for configuration and localization.
  *
@@ -51,8 +57,10 @@ export function SignIn({
     emailAndPassword,
     localization,
     magicLink,
+    passkey,
     redirectTo,
     socialProviders,
+    username: usernameConfig,
     viewPaths,
     navigate
   } = useAuth()
@@ -64,27 +72,38 @@ export function SignIn({
     onSuccess: () => toast.success(localization.auth.verificationEmailSent)
   })
 
-  const { mutate: signInEmail, isPending: signInPending } = useSignInEmail({
-    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 {
+  const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(
+    {
+      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)
+        }
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    }
+  )
+
+  const { mutate: signInUsername, isPending: signInUsernamePending } =
+    useSignInUsername({
+      onError: (error) => {
+        setPassword("")
         toast.danger(error.error?.message || error.message)
-      }
-    },
-    onSuccess: () => navigate({ to: redirectTo })
-  })
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    })
 
   const [socialRedirecting, setSocialRedirecting] = useState(false)
 
@@ -106,13 +125,21 @@ export function SignIn({
     const email = formData.get("email") as string
     const rememberMe = formData.get("rememberMe") === "on"
 
-    signInEmail({
-      email,
-      password,
-      ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
-    })
+    if (usernameConfig?.enabled && !isEmail(email)) {
+      signInUsername({
+        username: email,
+        password
+      })
+    } else {
+      signInEmail({
+        email,
+        password,
+        ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+      })
+    }
   }
 
+  const signInPending = signInEmailPending || signInUsernamePending
   const isPending = signInPending || socialPending || socialRedirecting
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
@@ -150,14 +177,22 @@ export function SignIn({
           <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
             <TextField
               name="email"
-              type="email"
-              autoComplete="email"
+              type={usernameConfig?.enabled ? "text" : "email"}
+              autoComplete={usernameConfig?.enabled ? "username" : "email"}
               isDisabled={isPending}
             >
-              <Label>{localization.auth.email}</Label>
+              <Label>
+                {usernameConfig?.enabled
+                  ? localization.auth.username
+                  : localization.auth.email}
+              </Label>
 
               <Input
-                placeholder={localization.auth.emailPlaceholder}
+                placeholder={
+                  usernameConfig?.enabled
+                    ? localization.auth.usernameOrEmailPlaceholder
+                    : localization.auth.emailPlaceholder
+                }
                 variant={variant === "transparent" ? "primary" : "secondary"}
                 required
               />
@@ -212,6 +247,8 @@ export function SignIn({
               {magicLink && (
                 <MagicLinkButton view="signIn" isPending={isPending} />
               )}
+
+              {passkey && <PasskeyButton isPending={isPending} />}
             </div>
           </Form>
         )}

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

@@ -1,5 +1,10 @@
-import { useAuth, useSignInSocial, useSignUpEmail } from "@better-auth-ui/react"
-import { Eye, EyeSlash } from "@gravity-ui/icons"
+import {
+  useAuth,
+  useIsUsernameAvailable,
+  useSignInSocial,
+  useSignUpEmail
+} from "@better-auth-ui/react"
+import { Check, Eye, EyeSlash, Xmark } from "@gravity-ui/icons"
 import {
   Button,
   Card,
@@ -16,6 +21,7 @@ import {
   TextField,
   toast
 } from "@heroui/react"
+import { useDebouncer } from "@tanstack/react-pacer"
 import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
@@ -53,12 +59,42 @@ export function SignUp({
     magicLink,
     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
+      }
+
+      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) => {
@@ -109,7 +145,19 @@ export function SignUp({
       return
     }
 
-    signUpEmail({ name, email, password })
+    signUpEmail({
+      name,
+      email,
+      password,
+      ...(usernameConfig?.enabled
+        ? {
+            username: username.trim(),
+            ...(usernameConfig.displayUsername
+              ? { displayUsername: username.trim() }
+              : {})
+          }
+        : {})
+    })
   }
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
@@ -162,6 +210,52 @@ export function SignUp({
               <FieldError />
             </TextField>
 
+            {usernameConfig?.enabled && (
+              <TextField
+                name="username"
+                type="text"
+                autoComplete="username"
+                minLength={usernameConfig.minUsernameLength}
+                maxLength={usernameConfig.maxUsernameLength}
+                isDisabled={isPending}
+                value={username}
+                onChange={handleUsernameChange}
+                isInvalid={
+                  !!usernameError || (usernameData && !usernameData.available)
+                }
+              >
+                <Label>{localization.auth.username}</Label>
+
+                <InputGroup
+                  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)}
+                </FieldError>
+              </TextField>
+            )}
+
             <TextField
               name="email"
               type="email"

package/src/components/settings/account/user-profile.tsx

@@ -1,4 +1,10 @@
-import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react"
+import {
+  useAuth,
+  useIsUsernameAvailable,
+  useSession,
+  useUpdateUser
+} from "@better-auth-ui/react"
+import { Check, Xmark } from "@gravity-ui/icons"
 import {
   Button,
   Card,
@@ -8,13 +14,16 @@ import {
   Fieldset,
   Form,
   Input,
+  InputGroup,
   Label,
   Skeleton,
   Spinner,
   TextField,
   toast
 } from "@heroui/react"
-import type { SyntheticEvent } from "react"
+import { useDebouncer } from "@tanstack/react-pacer"
+import { type SyntheticEvent, useEffect, useState } from "react"
+
 import { ChangeAvatar } from "./change-avatar"
 
 export type UserProfileProps = {
@@ -23,18 +32,57 @@ export type UserProfileProps = {
 }
 
 /**
- * Render a profile card that lets the authenticated user view and update their display name and avatar.
+ * Render a profile card that lets the authenticated user view and update their display name, username, and avatar.
  *
- * @returns A JSX element containing the user profile card with avatar upload and an editable name form
+ * @returns A JSX element containing the user profile card with avatar upload and editable form fields
  */
 export function UserProfile({
   className,
   variant,
   ...props
 }: UserProfileProps & CardProps) {
-  const { localization } = useAuth()
+  const { localization, username: usernameConfig } = useAuth()
   const { data: session } = useSession()
 
+  const currentUsername =
+    (usernameConfig?.displayUsername
+      ? session?.user?.displayUsername
+      : session?.user?.username) || ""
+
+  const [username, setUsername] = useState(currentUsername)
+
+  useEffect(() => {
+    setUsername(currentUsername)
+  }, [currentUsername])
+
+  const {
+    mutate: isUsernameAvailable,
+    data: usernameData,
+    error: usernameError,
+    reset: resetUsername
+  } = useIsUsernameAvailable()
+
+  const usernameDebouncer = useDebouncer(
+    (value: string) => {
+      if (!value.trim() || value.trim() === currentUsername) {
+        resetUsername()
+        return
+      }
+
+      isUsernameAvailable({ username: value.trim() })
+    },
+    { wait: 500 }
+  )
+
+  function handleUsernameChange(value: string) {
+    setUsername(value)
+    resetUsername()
+
+    if (usernameConfig?.isUsernameAvailable) {
+      usernameDebouncer.maybeExecute(value)
+    }
+  }
+
   const { mutate: updateUser, isPending } = useUpdateUser({
     onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
@@ -43,7 +91,19 @@ export function UserProfile({
   function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)
-    updateUser({ name: formData.get("name") as string })
+    const name = formData.get("name") as string
+
+    updateUser({
+      name,
+      ...(usernameConfig?.enabled
+        ? {
+            username: username.trim(),
+            ...(usernameConfig.displayUsername
+              ? { displayUsername: username.trim() }
+              : {})
+          }
+        : {})
+    })
   }
 
   return (
@@ -59,6 +119,61 @@ export function UserProfile({
               <ChangeAvatar />
 
               <Fieldset.Group>
+                {usernameConfig?.enabled && (
+                  <TextField
+                    type="text"
+                    autoComplete="username"
+                    minLength={usernameConfig.minUsernameLength}
+                    maxLength={usernameConfig.maxUsernameLength}
+                    isDisabled={isPending || !session}
+                    value={username}
+                    onChange={handleUsernameChange}
+                    isInvalid={
+                      !!usernameError ||
+                      (usernameData && !usernameData.available)
+                    }
+                  >
+                    <Label>{localization.auth.username}</Label>
+
+                    {session ? (
+                      <InputGroup
+                        variant={
+                          variant === "transparent" ? "primary" : "secondary"
+                        }
+                      >
+                        <InputGroup.Input
+                          placeholder={localization.auth.usernamePlaceholder}
+                          name="username"
+                        />
+
+                        {usernameConfig.isUsernameAvailable &&
+                          username.trim() &&
+                          username.trim() !== currentUsername && (
+                            <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>
+                    ) : (
+                      <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+                    )}
+
+                    <FieldError>
+                      {usernameError?.error?.message ||
+                        usernameError?.message ||
+                        (usernameData?.available === false &&
+                          localization.auth.usernameTaken)}
+                    </FieldError>
+                  </TextField>
+                )}
+
                 <TextField
                   key={session?.user?.name}
                   name="name"

package/src/components/settings/security/passkey.tsx

@@ -0,0 +1,51 @@
+import { useAuth, useDeletePasskey } from "@better-auth-ui/react"
+import { Fingerprint, Xmark } from "@gravity-ui/icons"
+import { Button, Spinner, toast } from "@heroui/react"
+
+export type PasskeyProps = {
+  passkey: {
+    id: string
+    name?: string | null
+    createdAt: Date
+  }
+}
+
+export function Passkey({ passkey }: PasskeyProps) {
+  const { localization } = useAuth()
+
+  const { mutate: deletePasskey, isPending } = useDeletePasskey({
+    onError: (error) => toast.danger(error.error?.message || error.message)
+  })
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary">
+        <Fingerprint className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col min-w-0">
+        <span className="text-sm font-medium leading-tight">
+          {passkey.name || localization.auth.passkey}
+        </span>
+
+        <span className="text-xs text-muted">
+          {new Date(passkey.createdAt).toLocaleString(undefined, {
+            dateStyle: "medium",
+            timeStyle: "short"
+          })}
+        </span>
+      </div>
+
+      <Button
+        className="ml-auto shrink-0"
+        variant="outline"
+        size="sm"
+        isPending={isPending}
+        onPress={() => deletePasskey({ id: passkey.id })}
+      >
+        {isPending ? <Spinner color="current" size="sm" /> : <Xmark />}
+        {localization.settings.delete}
+      </Button>
+    </div>
+  )
+}

package/src/components/settings/security/passkeys.tsx

@@ -0,0 +1,104 @@
+import {
+  useAddPasskey,
+  useAuth,
+  useListUserPasskeys
+} from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  Skeleton,
+  Spinner,
+  toast
+} from "@heroui/react"
+
+import { Passkey } from "./passkey"
+
+export type PasskeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+export function Passkeys({
+  className,
+  variant,
+  ...props
+}: PasskeysProps & CardProps) {
+  const { localization } = useAuth()
+
+  const { data: passkeys, isPending } = useListUserPasskeys({
+    throwOnError: (error) => {
+      if (error.error) toast.danger(error.error.message)
+      return false
+    }
+  })
+
+  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey({
+    onError: (error) => toast.danger(error.error?.message || error.message)
+  })
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.passkeys}
+      </h2>
+
+      <Card className={cn(className)} variant={variant} {...props}>
+        <Card.Content className="gap-0">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <p className="text-sm font-medium leading-tight">
+                {localization.settings.passkeysDescription}
+              </p>
+
+              <p className="text-muted text-xs mt-0.5">
+                {localization.settings.passkeysInstructions}
+              </p>
+            </div>
+
+            <Button
+              className="shrink-0"
+              size="sm"
+              isPending={isAdding}
+              isDisabled={isPending}
+              onPress={() => addPasskey()}
+            >
+              {isAdding && <Spinner color="current" size="sm" />}
+              {localization.settings.addPasskey}
+            </Button>
+          </div>
+
+          {isPending ? (
+            <>
+              <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+              <PasskeySkeleton />
+            </>
+          ) : (
+            passkeys?.map((passkey) => (
+              <div key={passkey.id}>
+                <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                <Passkey passkey={passkey} />
+              </div>
+            ))
+          )}
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}
+
+function PasskeySkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-xl" />
+
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-24 rounded-lg" />
+          <Skeleton className="h-3 w-20 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/settings/security/security-settings.tsx

@@ -6,6 +6,7 @@ import { ActiveSessions } from "./active-sessions"
 import { ChangePassword } from "./change-password"
 import { DangerZone } from "./danger-zone"
 import { LinkedAccounts } from "./linked-accounts"
+import { Passkeys } from "./passkeys"
 
 export type SecuritySettingsProps = {
   className?: string
@@ -27,7 +28,7 @@ export function SecuritySettings({
   variant,
   ...props
 }: SecuritySettingsProps & ComponentProps<"div">) {
-  const { deleteUser, emailAndPassword, socialProviders } = useAuth()
+  const { deleteUser, emailAndPassword, passkey, socialProviders } = useAuth()
 
   return (
     <div
@@ -36,6 +37,7 @@ export function SecuritySettings({
     >
       {emailAndPassword?.enabled && <ChangePassword variant={variant} />}
       {!!socialProviders?.length && <LinkedAccounts variant={variant} />}
+      {passkey && <Passkeys variant={variant} />}
       <ActiveSessions variant={variant} />
       {deleteUser?.enabled && <DangerZone variant={variant} />}
     </div>

package/src/components/settings/settings.tsx

@@ -1,5 +1,5 @@
+import type { SettingsView } from "@better-auth-ui/core"
 import { useAuth, useAuthenticate } from "@better-auth-ui/react"
-import type { SettingsView } from "@better-auth-ui/react/core"
 import { type CardProps, cn, Tabs } from "@heroui/react"
 import { type ComponentProps, useMemo } from "react"
 

package/src/index.tsx

@@ -5,6 +5,7 @@ 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-buttons"
 export * from "./components/auth/reset-password"
 export * from "./components/auth/sign-in"
@@ -28,6 +29,7 @@ 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"

package/dist/components/account/account.d.ts

@@ -1,18 +0,0 @@
-import type { AnyAuthConfig } from "@better-auth-ui/react";
-import type { AccountView } from "@better-auth-ui/react/core";
-import { type TabsProps } from "@heroui/react";
-export type AccountProps = AnyAuthConfig & {
-    className?: string;
-    path?: string;
-    view?: AccountView;
-    hideNav?: boolean;
-};
-/**
- * Selects and renders the appropriate account view component.
- *
- * @param path - Route path used to resolve an account view when `view` is not provided
- * @param view - Explicit auth view to render (e.g., "userProfile")
- * @param hideNav - Hide the navigation tabs
- */
-export declare function Account({ className, view, path, hideNav, ...config }: AccountProps): import("react/jsx-runtime").JSX.Element;
-export declare function ResponsiveTabs({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;