@better-auth-ui/heroui 1.6.7 → 1.6.9

package/src/components/auth/passkey/passkey-skeleton.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@heroui/react"
+
+export 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-28 rounded-lg" />
+          <Skeleton className="h-3 w-32 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,29 +1,22 @@
-import {
-  type PasskeyAuthClient,
-  useAuth,
-  useAuthPlugin,
-  useDeletePasskey
-} from "@better-auth-ui/react"
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
 import { Fingerprint, Xmark } from "@gravity-ui/icons"
-import { Button, Spinner } from "@heroui/react"
+import { Button } from "@heroui/react"
+import { useState } from "react"
 
 import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+import {
+  DeletePasskeyDialog,
+  type ListedPasskey
+} from "./delete-passkey-dialog"
 
 export type PasskeyProps = {
-  passkey: {
-    id: string
-    name?: string | null
-    createdAt: Date
-  }
+  passkey: ListedPasskey
 }
 
 export function Passkey({ passkey }: PasskeyProps) {
-  const { authClient, localization } = useAuth()
+  const { localization } = useAuth()
   const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
-
-  const { mutate: deletePasskey, isPending } = useDeletePasskey(
-    authClient as PasskeyAuthClient
-  )
+  const [deleteOpen, setDeleteOpen] = useState(false)
 
   const passkeyName = passkey.name || passkeyLocalization.passkey
 
@@ -33,8 +26,10 @@ export function Passkey({ passkey }: PasskeyProps) {
         <Fingerprint className="size-4.5" />
       </div>
 
-      <div className="flex flex-col min-w-0">
-        <span className="text-sm font-medium leading-tight">{passkeyName}</span>
+      <div className="flex min-w-0 flex-col">
+        <span className="truncate text-sm font-medium leading-tight">
+          {passkeyName}
+        </span>
 
         <span className="text-xs text-muted">
           {new Date(passkey.createdAt).toLocaleString(undefined, {
@@ -48,16 +43,22 @@ export function Passkey({ passkey }: PasskeyProps) {
         className="ml-auto shrink-0"
         variant="outline"
         size="sm"
-        isPending={isPending}
-        onPress={() => deletePasskey({ id: passkey.id })}
+        onPress={() => setDeleteOpen(true)}
         aria-label={passkeyLocalization.deletePasskey.replace(
           "{{name}}",
           passkeyName
         )}
       >
-        {isPending ? <Spinner color="current" size="sm" /> : <Xmark />}
+        <Xmark />
+
         {localization.settings.delete}
       </Button>
+
+      <DeletePasskeyDialog
+        isOpen={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        passkey={passkey}
+      />
     </div>
   )
 }

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

@@ -0,0 +1,35 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type PasskeysEmptyProps = {
+  onAddPress: () => void
+}
+
+export function PasskeysEmpty({ onAddPress }: PasskeysEmptyProps) {
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex size-10 items-center justify-center rounded-xl bg-surface-secondary">
+        <Fingerprint className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-1 text-center">
+        <p className="text-sm font-semibold">
+          {passkeyLocalization.noPasskeys}
+        </p>
+
+        <p className="text-muted text-xs">
+          {passkeyLocalization.passkeysDescription}
+        </p>
+      </div>
+
+      <Button size="sm" onPress={onAddPress}>
+        {passkeyLocalization.addPasskey}
+      </Button>
+    </div>
+  )
+}

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

@@ -1,29 +1,17 @@
 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 { Button, Card, type CardProps, cn } from "@heroui/react"
+import { useState } from "react"
 
 import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+import { AddPasskeyDialog } from "./add-passkey-dialog"
 import { Passkey } from "./passkey"
+import { PasskeySkeleton } from "./passkey-skeleton"
+import { PasskeysEmpty } from "./passkeys-empty"
 
 export type PasskeysProps = {
   className?: string
@@ -35,162 +23,53 @@ export function Passkeys({
   variant,
   ...props
 }: PasskeysProps & Omit<CardProps, "children">) {
-  const { authClient, localization } = useAuth()
+  const { authClient } = 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("")
-        }
-      }
-    )
-  }
+  const [addOpen, setAddOpen] = useState(false)
 
   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>
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="flex items-end justify-between gap-3">
+        <h2 className="text-sm font-semibold truncate">
+          {passkeyLocalization.passkeys}
+        </h2>
+
+        <Button
+          className="shrink-0"
+          size="sm"
+          isDisabled={isPending}
+          onPress={() => setAddOpen(true)}
+        >
+          {passkeyLocalization.addPasskey}
+        </Button>
+      </div>
 
+      <Card variant={variant} {...props}>
+        <Card.Content>
           {isPending ? (
-            <>
-              <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
-              <PasskeySkeleton />
-            </>
+            <PasskeySkeleton />
+          ) : !passkeys?.length ? (
+            <PasskeysEmpty onAddPress={() => setAddOpen(true)} />
           ) : (
-            passkeys?.map((passkey) => (
+            passkeys.map((passkey, index) => (
               <div key={passkey.id}>
-                <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                {index > 0 && (
+                  <div className="border-b border-dashed -mx-4 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>
+      <AddPasskeyDialog isOpen={addOpen} onOpenChange={setAddOpen} />
     </div>
   )
 }

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

@@ -64,7 +64,7 @@ export function ChangeEmail({
             <Fieldset className="w-full gap-4">
               <Fieldset.Group>
                 <TextField
-                  key={session?.user.email}
+                  key={`${session?.user.id}-${session?.user.email}-email`}
                   name="email"
                   type="email"
                   defaultValue={session?.user.email}

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

@@ -81,7 +81,7 @@ export function UserProfile({
   return (
     <div>
       <h2 className={cn("text-sm font-semibold mb-3")}>
-        {localization.settings.profile}
+        {localization.settings.userProfile}
       </h2>
 
       <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
@@ -90,7 +90,7 @@ export function UserProfile({
             <ChangeAvatar />
 
             <TextField
-              key={session?.user?.name}
+              key={`${session?.user?.id}-${session?.user?.name}-name`}
               name="name"
               defaultValue={session?.user.name}
               isDisabled={isPending || !session}
@@ -131,9 +131,9 @@ export function UserProfile({
                   field.name
                 ]
 
-                // Re-mount when the session value loads so the field's
-                // uncontrolled `defaultValue` reflects the latest data.
-                const key = `${field.name}:${
+                // Re-mount when the user or the session value changes so the
+                // field's uncontrolled `defaultValue` reflects the latest data.
+                const key = `${session.user.id}-${field.name}-${
                   value instanceof Date
                     ? value.toISOString()
                     : String(value ?? "")

package/src/components/auth/settings/security/active-sessions.tsx

@@ -25,9 +25,11 @@ export function ActiveSessions({
 
   const { data: sessions, isPending } = useListSessions(authClient)
 
-  const activeSessions = sessions?.toSorted((activeSession) =>
-    activeSession.id === session?.session.id ? -1 : 1
-  )
+  const activeSessions =
+    sessions &&
+    [...sessions].sort((a, b) =>
+      a.id === session?.session.id ? -1 : b.id === session?.session.id ? 1 : 0
+    )
 
   return (
     <div>
@@ -43,7 +45,7 @@ export function ActiveSessions({
             activeSessions?.map((activeSession, index) => (
               <div key={activeSession.id}>
                 {index > 0 && (
-                  <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                  <div className="border-b border-dashed -mx-4 my-4" />
                 )}
 
                 <ActiveSession activeSession={activeSession} />

package/src/components/auth/settings/security/linked-accounts.tsx

@@ -54,7 +54,7 @@ export function LinkedAccounts({
             ? socialProviders?.map((provider, index) => (
                 <div key={provider}>
                   {index > 0 && (
-                    <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                    <div className="border-b border-dashed -mx-4 my-4" />
                   )}
                   <AccountRowSkeleton />
                 </div>
@@ -62,7 +62,7 @@ export function LinkedAccounts({
             : allRows.map((row, index) => (
                 <div key={row.key}>
                   {index > 0 && (
-                    <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                    <div className="border-b border-dashed -mx-4 my-4" />
                   )}
 
                   <LinkedAccount

package/src/components/auth/settings/settings.tsx

@@ -1,8 +1,8 @@
 import type { SettingsView } from "@better-auth-ui/core"
 import { useAuth, useAuthenticate } from "@better-auth-ui/react"
+import { Person, Shield } from "@gravity-ui/icons"
 import { type CardProps, cn, Tabs } from "@heroui/react"
 import { type ComponentProps, useMemo } from "react"
-
 import { AccountSettings } from "./account/account-settings"
 import { SecuritySettings } from "./security/security-settings"
 
@@ -25,7 +25,7 @@ export type SettingsProps = {
  * @param variant - Card variant forwarded to each settings section card
  * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
  *
- * @throws Error if neither `view` nor `path` is provided
+ * @throws Error if neither `view` nor `path` is provided, or if `path` does not match any settings view
  */
 export function Settings({
   className,
@@ -35,22 +35,39 @@ export function Settings({
   view,
   ...props
 }: SettingsProps & ComponentProps<"div">) {
-  const { authClient, basePaths, localization, viewPaths } = useAuth()
-  useAuthenticate(authClient)
-
   if (!view && !path) {
     throw new Error("[Better Auth UI] Either `view` or `path` must be provided")
   }
 
-  const settingsPathViews = useMemo(
-    () =>
-      Object.fromEntries(
-        Object.entries(viewPaths.settings).map(([k, v]) => [v, k])
-      ) as Record<string, SettingsView>,
-    [viewPaths.settings]
-  )
+  const { authClient, basePaths, localization, viewPaths, plugins } = useAuth()
+  useAuthenticate(authClient)
+
+  // Built-ins first, then plugin segments
+  const currentView = useMemo(() => {
+    if (view) return view
+    if (!path) return undefined
 
-  const currentView = view || (path ? settingsPathViews[path] : undefined)
+    const match = [
+      viewPaths.settings,
+      ...plugins.map((plugin) => plugin.viewPaths?.settings)
+    ]
+      .flatMap((source) => Object.entries(source ?? {}))
+      .find(([, segment]) => segment === path)
+
+    return match?.[0] as SettingsView | undefined
+  }, [view, path, viewPaths.settings, plugins])
+
+  if (!currentView) {
+    const validPaths = [
+      viewPaths.settings,
+      ...plugins.map((plugin) => plugin.viewPaths?.settings)
+    ]
+      .flatMap((source) => Object.values(source ?? {}))
+      .join(", ")
+    throw new Error(
+      `[Better Auth UI] Unknown settings path "${path}". Valid paths are: ${validPaths}`
+    )
+  }
 
   return (
     <Tabs
@@ -62,12 +79,18 @@ export function Settings({
       <Tabs.ListContainer>
         <Tabs.List
           aria-label={localization.settings.settings}
-          className="overflow-auto w-fit"
+          className="max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
         >
           <Tabs.Tab
             id="account"
             href={`${basePaths.settings}/${viewPaths.settings.account}`}
+            className="gap-2"
+            onPress={(e) =>
+              e.target.scrollIntoView({ behavior: "smooth", inline: "center" })
+            }
           >
+            <Person className="text-muted" />
+
             {localization.settings.account}
 
             <Tabs.Indicator />
@@ -76,11 +99,39 @@ export function Settings({
           <Tabs.Tab
             id="security"
             href={`${basePaths.settings}/${viewPaths.settings.security}`}
+            className="gap-2"
+            onPress={(e) =>
+              e.target.scrollIntoView({ behavior: "smooth", inline: "center" })
+            }
           >
+            <Shield className="text-muted" />
+
             {localization.settings.security}
 
             <Tabs.Indicator />
           </Tabs.Tab>
+
+          {plugins.flatMap(
+            (plugin) =>
+              plugin.settingsTabs?.map((settingsTab, index) => (
+                <Tabs.Tab
+                  key={`${plugin.id}-${index.toString()}`}
+                  id={settingsTab.view}
+                  href={`${basePaths.settings}/${plugin.viewPaths?.settings?.[settingsTab.view]}`}
+                  className="gap-2"
+                  onPress={(e) =>
+                    e.target.scrollIntoView({
+                      behavior: "smooth",
+                      inline: "center"
+                    })
+                  }
+                >
+                  {settingsTab.label}
+
+                  <Tabs.Indicator />
+                </Tabs.Tab>
+              )) ?? []
+          )}
         </Tabs.List>
       </Tabs.ListContainer>
 
@@ -91,6 +142,18 @@ export function Settings({
       <Tabs.Panel id="security" className="px-0">
         <SecuritySettings variant={variant} />
       </Tabs.Panel>
+
+      {plugins.flatMap((plugin) =>
+        plugin.settingsTabs?.map((settingsTab, index) => (
+          <Tabs.Panel
+            key={`${plugin.id}-${index.toString()}`}
+            id={settingsTab.view}
+            className="px-0"
+          >
+            <settingsTab.component variant={variant} />
+          </Tabs.Panel>
+        ))
+      )}
     </Tabs>
   )
 }

package/src/components/auth/user/user-avatar.tsx

@@ -13,7 +13,10 @@ export type UserAvatarProps = {
   fallback?: ReactNode
   isPending?: boolean
   /** @remarks `User` */
-  user?: User & { username?: string | null; displayUsername?: string | null }
+  user?: Partial<User> & {
+    username?: string | null
+    displayUsername?: string | null
+  }
   size?: AvatarProps["size"]
 }
 

package/src/components/auth/user/user-button.tsx

@@ -46,16 +46,15 @@ export type UserButtonLink = {
 export type UserButtonProps = {
   className?: string
   size?: "default" | "icon"
-  /**
-   * The placement of the element with respect to its anchor element.
-   * @default "bottom"
-   */
+  /** The placement of the element with respect to its anchor element. */
   placement?: DropdownPopoverProps["placement"]
   variant?: ButtonProps["variant"]
   /** Additional menu entries rendered above the built-in items. */
   links?: (UserButtonLink | ReactElement)[]
   /** Hide the built-in "Settings" link. Useful when replacing it via `links`. */
   hideSettings?: boolean
+  /** When true, the subtitle line (email when name/username is shown) is hidden. */
+  hideSubtitle?: boolean
 }
 
 function renderUserLink(
@@ -91,11 +90,12 @@ function renderUserLink(
  */
 export function UserButton({
   className,
-  placement = "bottom",
+  placement,
   size = "default",
   variant = "ghost",
   links,
-  hideSettings = false
+  hideSettings,
+  hideSubtitle
 }: UserButtonProps) {
   const { authClient, basePaths, viewPaths, localization, plugins } = useAuth()
 
@@ -104,7 +104,10 @@ export function UserButton({
   const userMenuItems = plugins.flatMap(
     (plugin) =>
       plugin.userMenuItems?.map((Item, index) => (
-        <Item key={`${plugin.id}-${index.toString()}`} />
+        <Item
+          key={`${plugin.id}-${index.toString()}`}
+          hideSubtitle={hideSubtitle}
+        />
       )) ?? []
   )
 
@@ -127,12 +130,12 @@ export function UserButton({
         <Button
           variant={variant}
           className={cn(
-            "h-auto font-normal justify-start px-3 py-2 text-left",
+            "h-auto font-normal justify-start px-2 py-2 text-left",
             className
           )}
         >
           {session || sessionPending ? (
-            <UserView isPending={sessionPending} />
+            <UserView isPending={sessionPending} hideSubtitle={hideSubtitle} />
           ) : (
             <>
               <UserAvatar />
@@ -141,7 +144,7 @@ export function UserButton({
             </>
           )}
 
-          <ChevronsExpandVertical className="ml-auto size-3.5" />
+          <ChevronsExpandVertical className="ml-auto size-3 text-muted" />
         </Button>
       )}
 
@@ -151,7 +154,7 @@ export function UserButton({
       >
         {session && (
           <div className="px-3 pt-3 pb-1">
-            <UserView />
+            <UserView hideSubtitle={hideSubtitle} />
           </div>
         )}