@better-auth-ui/heroui 1.6.2 → 1.6.4

package/src/components/auth/passkey/passkeys.tsx

@@ -0,0 +1,196 @@
+import {
+  type PasskeyAuthClient,
+  useAddPasskey,
+  useAuth,
+  useAuthPlugin,
+  useListPasskeys
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Skeleton,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import { type SyntheticEvent, useState } from "react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+import { Passkey } from "./passkey"
+
+export type PasskeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+export function Passkeys({
+  className,
+  variant,
+  ...props
+}: PasskeysProps & Omit<CardProps, "children">) {
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const { data: passkeys, isPending } = useListPasskeys(
+    authClient as PasskeyAuthClient
+  )
+  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey(
+    authClient as PasskeyAuthClient
+  )
+
+  const [nameOpen, setNameOpen] = useState(false)
+  const [name, setName] = useState("")
+
+  const handleDialogOpenChange = (open: boolean) => {
+    setNameOpen(open)
+    setName("")
+  }
+
+  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    addPasskey(
+      { name: name.trim() || undefined },
+      {
+        onSuccess: () => {
+          setNameOpen(false)
+          setName("")
+        }
+      }
+    )
+  }
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {passkeyLocalization.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">
+                {passkeyLocalization.passkeysDescription}
+              </p>
+
+              <p className="text-muted text-xs mt-0.5">
+                {passkeyLocalization.passkeysInstructions}
+              </p>
+            </div>
+
+            <AlertDialog>
+              <Button
+                className="shrink-0"
+                size="sm"
+                isDisabled={isPending}
+                onPress={() => setNameOpen(true)}
+              >
+                {passkeyLocalization.addPasskey}
+              </Button>
+
+              <AlertDialog.Backdrop
+                isOpen={nameOpen}
+                onOpenChange={handleDialogOpenChange}
+              >
+                <AlertDialog.Container>
+                  <AlertDialog.Dialog>
+                    <Form onSubmit={handleSubmit}>
+                      <AlertDialog.CloseTrigger />
+
+                      <AlertDialog.Header>
+                        <AlertDialog.Icon status="default">
+                          <Fingerprint />
+                        </AlertDialog.Icon>
+
+                        <AlertDialog.Heading>
+                          {passkeyLocalization.addPasskey}
+                        </AlertDialog.Heading>
+                      </AlertDialog.Header>
+
+                      <AlertDialog.Body className="overflow-visible">
+                        <p className="text-muted text-sm">
+                          {passkeyLocalization.passkeysInstructions}
+                        </p>
+
+                        <TextField
+                          className="mt-4"
+                          name="passkey-name"
+                          isDisabled={isAdding}
+                          value={name}
+                          onChange={setName}
+                        >
+                          <Label>{passkeyLocalization.passkey}</Label>
+
+                          <Input
+                            autoFocus
+                            placeholder={localization.settings.optional}
+                            variant="secondary"
+                          />
+
+                          <FieldError />
+                        </TextField>
+                      </AlertDialog.Body>
+
+                      <AlertDialog.Footer>
+                        <Button
+                          slot="close"
+                          variant="tertiary"
+                          isDisabled={isAdding}
+                        >
+                          {localization.settings.cancel}
+                        </Button>
+
+                        <Button type="submit" isPending={isAdding}>
+                          {isAdding && <Spinner color="current" size="sm" />}
+
+                          {passkeyLocalization.addPasskey}
+                        </Button>
+                      </AlertDialog.Footer>
+                    </Form>
+                  </AlertDialog.Dialog>
+                </AlertDialog.Container>
+              </AlertDialog.Backdrop>
+            </AlertDialog>
+          </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/auth/provider-button.tsx

@@ -0,0 +1,65 @@
+import { authMutationKeys, getProviderName } from "@better-auth-ui/core"
+import { providerIcons, useAuth, useSignInSocial } from "@better-auth-ui/react"
+import { Button, type ButtonProps, Spinner } from "@heroui/react"
+import { useIsMutating } from "@tanstack/react-query"
+import type { SocialProvider } from "better-auth/social-providers"
+
+export type ProviderButtonProps = {
+  provider: SocialProvider
+  display?: "full" | "name" | "icon"
+} & Omit<ButtonProps, "children" | "onPress" | "isPending" | "isDisabled">
+
+/**
+ * Social provider sign-in button.
+ *
+ * @param provider - Provider to sign in with.
+ * @param display - `"full"` (e.g. "Continue with Google"), `"name"` (just the provider name), or `"icon"` (icon only).
+ */
+export function ProviderButton({
+  provider,
+  display = "full",
+  variant = "tertiary",
+  ...props
+}: ProviderButtonProps) {
+  const { authClient, baseURL, localization, redirectTo } = useAuth()
+
+  const callbackURL = `${baseURL}${redirectTo}`
+
+  const { mutate: signInSocial, isPending: signInSocialPending } =
+    useSignInSocial(authClient)
+
+  const ProviderIcon = providerIcons[provider]
+
+  const signInMutating = useIsMutating({
+    mutationKey: authMutationKeys.signIn.all
+  })
+  const signUpMutating = useIsMutating({
+    mutationKey: authMutationKeys.signUp.all
+  })
+  const isPending = signInMutating + signUpMutating > 0
+
+  return (
+    <Button
+      variant={variant}
+      isPending={isPending}
+      onPress={() => signInSocial({ provider, callbackURL })}
+      {...props}
+      aria-label={getProviderName(provider)}
+    >
+      {signInSocialPending ? (
+        <Spinner color="current" size="sm" />
+      ) : (
+        <ProviderIcon />
+      )}
+
+      {display === "full"
+        ? localization.auth.continueWith.replace(
+            "{{provider}}",
+            getProviderName(provider)
+          )
+        : display === "name"
+          ? getProviderName(provider)
+          : null}
+    </Button>
+  )
+}

package/src/components/auth/provider-buttons.tsx

@@ -1,36 +1,24 @@
-import { getProviderName } from "@better-auth-ui/core"
-import { providerIcons, useAuth } from "@better-auth-ui/react"
-import { Button, cn } from "@heroui/react"
-import type { SocialProvider } from "better-auth/social-providers"
+import { useAuth } from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
 import { useMemo } from "react"
-
+import { ProviderButton } from "./provider-button"
 export type ProviderButtonsProps = {
-  isPending: boolean
   socialLayout?: SocialLayout
-  signInSocial: (params: {
-    provider: SocialProvider
-    callbackURL: string
-  }) => void
 }
 
 export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid"
 
 /**
- * Render social provider sign-in buttons and handle initiation and pending state.
+ * Render social provider sign-in buttons. Each button owns its own sign-in
+ * mutation and reads shared auth pending state from React Query.
  *
- * @param isPending - Disables all provider buttons when true.
  * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
- * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
  * @returns The JSX element that renders the configured social provider buttons.
  */
 export function ProviderButtons({
-  isPending,
-  socialLayout = "auto",
-  signInSocial
+  socialLayout = "auto"
 }: ProviderButtonsProps) {
-  const { baseURL, localization, redirectTo, socialProviders } = useAuth()
-
-  const callbackURL = `${baseURL}${redirectTo}`
+  const { socialProviders } = useAuth()
 
   const resolvedSocialLayout = useMemo(() => {
     if (socialLayout === "auto") {
@@ -53,33 +41,23 @@ export function ProviderButtons({
         resolvedSocialLayout === "horizontal" && "flex flex-wrap"
       )}
     >
-      {socialProviders?.map((provider) => {
-        const ProviderIcon = providerIcons[provider]
-
-        return (
-          <Button
-            key={provider}
-            className={cn(
-              "w-full",
-              resolvedSocialLayout === "horizontal" && "flex-1"
-            )}
-            variant="tertiary"
-            isPending={isPending}
-            onPress={() => signInSocial({ provider, callbackURL })}
-          >
-            <ProviderIcon />
-
-            {resolvedSocialLayout === "vertical"
-              ? localization.auth.continueWith.replace(
-                  "{{provider}}",
-                  getProviderName(provider)
-                )
+      {socialProviders?.map((provider) => (
+        <ProviderButton
+          key={provider}
+          provider={provider}
+          display={
+            resolvedSocialLayout === "vertical"
+              ? "full"
               : resolvedSocialLayout === "grid"
-                ? getProviderName(provider)
-                : null}
-          </Button>
-        )
-      })}
+                ? "name"
+                : "icon"
+          }
+          className={cn(
+            "w-full",
+            resolvedSocialLayout === "horizontal" && "flex-1"
+          )}
+        />
+      ))}
     </div>
   )
 }

package/src/components/auth/reset-password.tsx

@@ -31,12 +31,17 @@ export function ResetPassword({
   className,
   variant,
   ...props
-}: ResetPasswordProps & CardProps) {
-  const { basePaths, emailAndPassword, localization, viewPaths, navigate } =
-    useAuth()
+}: ResetPasswordProps & Omit<CardProps, "children">) {
+  const {
+    authClient,
+    basePaths,
+    emailAndPassword,
+    localization,
+    viewPaths,
+    navigate
+  } = useAuth()
 
-  const { mutate: resetPassword, isPending } = useResetPassword({
-    onError: (error) => toast.danger(error.error?.message || error.message),
+  const { mutate: resetPassword, isPending } = useResetPassword(authClient, {
     onSuccess: () => {
       toast.success(localization.auth.passwordResetSuccess)
       navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
@@ -88,7 +93,7 @@ export function ResetPassword({
 
   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}
     >
@@ -98,7 +103,7 @@ export function ResetPassword({
         </Card.Title>
       </Card.Header>
 
-      <Card.Content>
+      <Card.Content className="gap-4">
         <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
           <TextField
             minLength={emailAndPassword?.minPasswordLength}
@@ -194,12 +199,12 @@ export function ResetPassword({
         </Form>
       </Card.Content>
 
-      <Card.Footer className="flex-col">
+      <Card.Footer className="flex-col gap-3">
         <Description className="text-sm">
           {localization.auth.rememberYourPassword}{" "}
           <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 → auth/settings}/account/account-settings.tsx

@@ -1,9 +1,8 @@
 import { useAuth } from "@better-auth-ui/react"
 import { type CardProps, cn } from "@heroui/react"
 import type { ComponentProps } from "react"
-import { Appearance } from "./appearance"
+
 import { ChangeEmail } from "./change-email"
-import { ManageAccounts } from "./manage-accounts"
 import { UserProfile } from "./user-profile"
 
 export type AccountSettingsProps = {
@@ -12,9 +11,12 @@ export type AccountSettingsProps = {
 }
 
 /**
- * Renders the account settings layout including user profile, change email, appearance, and accounts management.
+ * Renders the account settings layout.
  *
- * UserProfile, ChangeEmail, and Appearance are always rendered; Accounts is rendered when `multiSession` is enabled.
+ * `UserProfile` always renders. `ChangeEmail` renders when password auth is
+ * enabled or the `magicLink` plugin is registered. Plugin-contributed account
+ * cards (e.g. `Appearance` from the theme plugin, multi-session accounts) are
+ * rendered via the plugins array.
  *
  * @param className - Optional additional CSS class names for the outer container.
  * @param variant - Card variant forwarded to each account settings card.
@@ -25,12 +27,9 @@ export function AccountSettings({
   variant,
   ...props
 }: AccountSettingsProps & ComponentProps<"div">) {
-  const {
-    multiSession,
-    emailAndPassword,
-    magicLink,
-    appearance: { setTheme }
-  } = useAuth()
+  const { emailAndPassword, plugins } = useAuth()
+
+  const hasMagicLink = plugins.some((plugin) => plugin.id === "magicLink")
 
   return (
     <div
@@ -38,11 +37,14 @@ export function AccountSettings({
       {...props}
     >
       <UserProfile variant={variant} />
-      {(emailAndPassword?.enabled || magicLink) && (
+      {(emailAndPassword?.enabled || hasMagicLink) && (
         <ChangeEmail variant={variant} />
       )}
-      {setTheme && <Appearance variant={variant} />}
-      {multiSession && <ManageAccounts variant={variant} />}
+      {plugins.flatMap((plugin) =>
+        plugin.accountCards?.map((Card, index) => (
+          <Card key={`${plugin.id}-${index.toString()}`} variant={variant} />
+        ))
+      )}
     </div>
   )
 }

package/src/components/{settings → auth/settings}/account/change-avatar.tsx

@@ -11,12 +11,11 @@ export type ChangeAvatarProps = {
 }
 
 export function ChangeAvatar({ className }: ChangeAvatarProps) {
-  const { localization, avatar } = useAuth()
-  const { data: session } = useSession()
+  const { authClient, localization, avatar } = useAuth()
+  const { data: session } = useSession(authClient)
 
-  const { mutate: updateUser, isPending: updatePending } = useUpdateUser({
-    onError: (error) => toast.danger(error.error?.message || error.message)
-  })
+  const { mutate: updateUser, isPending: updatePending } =
+    useUpdateUser(authClient)
 
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [isUploading, setIsUploading] = useState(false)

package/src/components/{settings → auth/settings}/account/change-email.tsx

@@ -34,13 +34,12 @@ export function ChangeEmail({
   className,
   variant,
   ...props
-}: ChangeEmailProps & CardProps) {
-  const { localization, baseURL, viewPaths } = useAuth()
-  const { data: session } = useSession()
+}: ChangeEmailProps & Omit<CardProps, "children">) {
+  const { authClient, localization, baseURL, viewPaths } = useAuth()
+  const { data: session } = useSession(authClient)
 
-  const { mutate: changeEmail, isPending } = useChangeEmail({
-    onSuccess: () => toast.success(localization.settings.changeEmailSuccess),
-    onError: (error) => toast.danger(error.error?.message || error.message)
+  const { mutate: changeEmail, isPending } = useChangeEmail(authClient, {
+    onSuccess: () => toast.success(localization.settings.changeEmailSuccess)
   })
 
   function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {

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

@@ -0,0 +1,171 @@
+import {
+  type AdditionalFieldValue,
+  parseAdditionalFieldValue
+} from "@better-auth-ui/core"
+import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Skeleton,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import type { SyntheticEvent } from "react"
+
+import { AdditionalField } from "../../additional-field"
+import { ChangeAvatar } from "./change-avatar"
+
+export type UserProfileProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a profile card that lets the authenticated user view and update their
+ * display name, avatar, and any plugin- or user-supplied additional fields.
+ */
+export function UserProfile({
+  className,
+  variant,
+  ...props
+}: UserProfileProps & Omit<CardProps, "children">) {
+  const { additionalFields, authClient, localization } = useAuth()
+  const { data: session } = useSession(authClient)
+
+  const { mutate: updateUser, isPending } = useUpdateUser(authClient, {
+    onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
+  })
+
+  async function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const name = formData.get("name") as string
+
+    const additionalFieldValues: Record<string, unknown> = {}
+
+    for (const field of additionalFields ?? []) {
+      if (field.profile === false || 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
+        }
+      }
+
+      // `null` = explicit clear (forward to backend); `undefined` = omitted.
+      if (value !== undefined) {
+        additionalFieldValues[field.name] = value
+      }
+    }
+
+    updateUser({
+      name,
+      ...additionalFieldValues
+    })
+  }
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.profile}
+      </h2>
+
+      <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
+        <Card.Content>
+          <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            <ChangeAvatar />
+
+            <TextField
+              key={session?.user?.name}
+              name="name"
+              defaultValue={session?.user.name}
+              isDisabled={isPending || !session}
+            >
+              <Label>{localization.auth.name}</Label>
+
+              <Input
+                className={cn(!session && "hidden")}
+                autoComplete="name"
+                placeholder={localization.auth.name}
+                variant={variant === "transparent" ? "primary" : "secondary"}
+              />
+
+              {!session && (
+                <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+              )}
+
+              <FieldError />
+            </TextField>
+
+            {additionalFields
+              ?.filter((field) => field.profile !== false)
+              .map((field) => {
+                if (!session) {
+                  if (field.inputType === "hidden") {
+                    return null
+                  }
+
+                  return (
+                    <Skeleton
+                      key={field.name}
+                      className="h-10 md:h-9 w-full rounded-xl"
+                    />
+                  )
+                }
+
+                const value = (session.user as Record<string, unknown>)[
+                  field.name
+                ]
+
+                // Re-mount when the session value loads so the field's
+                // uncontrolled `defaultValue` reflects the latest data.
+                const key = `${field.name}:${
+                  value instanceof Date
+                    ? value.toISOString()
+                    : String(value ?? "")
+                }`
+
+                return (
+                  <AdditionalField
+                    key={key}
+                    name={field.name}
+                    field={{
+                      ...field,
+                      defaultValue: value as AdditionalFieldValue | null
+                    }}
+                    isPending={isPending}
+                    variant={variant}
+                  />
+                )
+              })}
+
+            <Button
+              type="submit"
+              isPending={isPending}
+              isDisabled={!session}
+              size="sm"
+              className="self-start mt-1"
+            >
+              {isPending && <Spinner color="current" size="sm" />}
+              {localization.settings.saveChanges}
+            </Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}