@better-auth-ui/heroui 1.6.5 → 1.6.7

package/src/components/auth/api-key/create-api-key-dialog.tsx

@@ -0,0 +1,134 @@
+import {
+  type ApiKeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useCreateApiKey
+} from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import { type SyntheticEvent, useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+import { NewApiKeyDialog } from "./new-api-key-dialog"
+
+export type CreateApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function CreateApiKeyDialog({
+  isOpen,
+  onOpenChange
+}: CreateApiKeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const { mutate: createApiKey, isPending: isCreating } = useCreateApiKey(
+    authClient as ApiKeyAuthClient
+  )
+
+  const [isNewKeyDialogOpen, setIsNewKeyDialogOpen] = useState(false)
+  const [keyName, setKeyName] = useState<string | null>(null)
+  const [secretKey, setSecretKey] = useState<string | null>(null)
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setKeyName(null)
+      setSecretKey(null)
+    }
+
+    onOpenChange(open)
+  }
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.target as HTMLFormElement)
+    const name = formData.get("name") as string
+
+    createApiKey(name ? { name: name.trim() } : undefined, {
+      onSuccess: (result) => {
+        handleOpenChange(false)
+        setKeyName(name)
+        setSecretKey(result.key)
+        setIsNewKeyDialogOpen(true)
+      }
+    })
+  }
+
+  return (
+    <>
+      <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={handleOpenChange}>
+        <AlertDialog.Container>
+          <AlertDialog.Dialog>
+            <Form onSubmit={handleSubmit}>
+              <AlertDialog.CloseTrigger />
+
+              <AlertDialog.Header>
+                <AlertDialog.Icon status="default">
+                  <Key />
+                </AlertDialog.Icon>
+
+                <AlertDialog.Heading>
+                  {apiKeyLocalization.createApiKey}
+                </AlertDialog.Heading>
+              </AlertDialog.Header>
+
+              <AlertDialog.Body className="overflow-visible">
+                <p className="text-muted text-sm">
+                  {apiKeyLocalization.apiKeysDescription}
+                </p>
+
+                <TextField
+                  className="mt-4"
+                  id="name"
+                  name="name"
+                  isDisabled={isCreating}
+                >
+                  <Label>{apiKeyLocalization.name}</Label>
+
+                  <Input
+                    autoFocus
+                    placeholder={localization.settings.optional}
+                    variant="secondary"
+                  />
+
+                  <FieldError />
+                </TextField>
+              </AlertDialog.Body>
+
+              <AlertDialog.Footer>
+                <Button slot="close" variant="tertiary" isDisabled={isCreating}>
+                  {localization.settings.cancel}
+                </Button>
+
+                <Button type="submit" isPending={isCreating}>
+                  {isCreating && <Spinner color="current" size="sm" />}
+
+                  {apiKeyLocalization.createApiKey}
+                </Button>
+              </AlertDialog.Footer>
+            </Form>
+          </AlertDialog.Dialog>
+        </AlertDialog.Container>
+      </AlertDialog.Backdrop>
+
+      <NewApiKeyDialog
+        isOpen={isNewKeyDialogOpen}
+        onOpenChange={setIsNewKeyDialogOpen}
+        secretKey={secretKey}
+        name={keyName}
+      />
+    </>
+  )
+}

package/src/components/auth/api-key/delete-api-key-dialog.tsx

@@ -0,0 +1,92 @@
+import {
+  type ApiKeyAuthClient,
+  type ListedApiKey,
+  useAuth,
+  useAuthPlugin,
+  useDeleteApiKey
+} from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type DeleteApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  apiKey: ListedApiKey
+}
+
+export function DeleteApiKeyDialog({
+  isOpen,
+  onOpenChange,
+  apiKey
+}: DeleteApiKeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+  const preview = `${apiKey.start}${"*".repeat(16)}`
+  const { mutate: deleteApiKey, isPending: isDeleting } = useDeleteApiKey(
+    authClient as ApiKeyAuthClient,
+    {
+      onSuccess: () => onOpenChange(false)
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <Key />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {apiKeyLocalization.deleteApiKey}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {apiKeyLocalization.deleteApiKeyWarning}
+            </p>
+
+            <TextField
+              value={preview}
+              className="font-mono text-xs"
+              variant="secondary"
+            >
+              <Label>{apiKey.name || apiKeyLocalization.apiKey}</Label>
+
+              <Input readOnly className="font-mono text-xs" />
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isDeleting}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              onPress={() => deleteApiKey({ keyId: apiKey.id })}
+              isPending={isDeleting}
+            >
+              {isDeleting && <Spinner color="current" size="sm" />}
+
+              {apiKeyLocalization.deleteApiKey}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/api-key/new-api-key-dialog.tsx

@@ -0,0 +1,94 @@
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
+import { Check, Copy, Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  InputGroup,
+  Label,
+  TextField,
+  toast
+} from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type NewApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  name: string | null
+  secretKey: string | null
+}
+
+export function NewApiKeyDialog({
+  isOpen,
+  onOpenChange,
+  name,
+  secretKey
+}: NewApiKeyDialogProps) {
+  const { localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const [copied, setCopied] = useState(false)
+
+  const copySecretKey = async () => {
+    if (!secretKey) return
+
+    try {
+      await navigator.clipboard.writeText(secretKey)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch (error) {
+      toast.danger(error instanceof Error ? error.message : String(error))
+    }
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="warning">
+              <Key />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {apiKeyLocalization.newApiKey}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {apiKeyLocalization.newApiKeyWarning}
+            </p>
+
+            <TextField value={secretKey ?? ""} className="font-mono text-xs">
+              <Label>{name || apiKeyLocalization.apiKey}</Label>
+
+              <InputGroup variant="secondary">
+                <InputGroup.Input readOnly className="font-mono text-xs" />
+
+                <InputGroup.Suffix className="px-0">
+                  <Button
+                    isIconOnly
+                    aria-label={localization.settings.copyToClipboard}
+                    size="sm"
+                    variant="ghost"
+                    onPress={copySecretKey}
+                  >
+                    {copied ? <Check /> : <Copy />}
+                  </Button>
+                </InputGroup.Suffix>
+              </InputGroup>
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close">{apiKeyLocalization.dismissNewKey}</Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/delete-user/danger-zone.tsx

@@ -22,7 +22,7 @@ export function DangerZone({
 
   return (
     <div className={cn("flex w-full flex-col", className)} {...props}>
-      <h2 className={cn("text-sm font-semibold mb-3")}>
+      <h2 className={cn("text-sm font-semibold mb-3 text-danger")}>
         {localization.settings.dangerZone}
       </h2>
 

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

@@ -11,7 +11,6 @@ import {
   Button,
   Card,
   type CardProps,
-  cn,
   FieldError,
   Form,
   Input,
@@ -91,11 +90,7 @@ export function DeleteUser({
   }
 
   return (
-    <Card
-      className={cn("border border-danger", className)}
-      variant={variant}
-      {...props}
-    >
+    <Card className={className} variant={variant} {...props}>
       <Card.Content className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <p className="text-sm font-medium leading-tight">
@@ -111,7 +106,7 @@ export function DeleteUser({
           <Button
             isDisabled={!accounts}
             size="sm"
-            variant="danger"
+            variant="danger-soft"
             onPress={() => setConfirmOpen(true)}
           >
             {deleteUserLocalization.deleteUser}

package/src/components/auth/multi-session/switch-account-submenu-content.tsx

@@ -6,7 +6,7 @@ import {
   useSession
 } from "@better-auth-ui/react"
 import { Check, CirclePlus } from "@gravity-ui/icons"
-import { Dropdown, Label, Separator } from "@heroui/react"
+import { Dropdown, Label } from "@heroui/react"
 
 import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
 import { UserView } from "../user/user-view"
@@ -50,8 +50,6 @@ export function SwitchAccountSubmenuContent() {
             />
           ))}
 
-        <Separator />
-
         <Dropdown.Item
           textValue={multiSessionLocalization.addAccount}
           href={`${basePaths.auth}/${viewPaths.auth.signIn}`}

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

@@ -60,11 +60,9 @@ export function LinkedAccount({ account, provider }: LinkedAccountProps) {
         )}
       >
         {ProviderIcon ? (
-          <ProviderIcon className={cn("size-4.5", !account && "opacity-50")} />
+          <ProviderIcon className="size-4.5" />
         ) : (
-          <PlugConnection
-            className={cn("size-4.5", !account && "opacity-50")}
-          />
+          <PlugConnection className="size-4.5" />
         )}
       </div>
 

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

@@ -1,5 +1,5 @@
 import { useAuthPlugin } from "@better-auth-ui/react"
-import { Display, Moon, Sun } from "@gravity-ui/icons"
+import { Display, Moon, Palette, Sun } from "@gravity-ui/icons"
 import { Dropdown, Label, Tabs } from "@heroui/react"
 
 import { themePlugin } from "../../../lib/auth/theme-plugin"
@@ -67,6 +67,7 @@ export function ThemeToggleItem() {
       // menu-item activation.
       shouldCloseOnSelect={false}
     >
+      <Palette className="text-muted" />
       <Label>{localization.theme}</Label>
 
       <Tabs

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

@@ -11,14 +11,38 @@ import {
   type ButtonProps,
   cn,
   Dropdown,
+  type DropdownItemProps,
   type DropdownPopoverProps,
-  Label,
-  Separator
+  Label
 } from "@heroui/react"
+import { isValidElement, type ReactElement, type ReactNode } from "react"
 
 import { UserAvatar } from "./user-avatar"
 import { UserView } from "./user-view"
 
+/** Auth states a `UserButton` link can be visible in. */
+export type UserButtonLinkVisibility =
+  | "authenticated"
+  | "unauthenticated"
+  | "always"
+
+/** A simple link entry rendered as a `Dropdown.Item` in the `UserButton` menu. */
+export type UserButtonLink = {
+  /** Visible label. */
+  label: ReactNode
+  /** Destination URL. */
+  href: string
+  /** Optional leading icon. Sized/coloured to match built-in items. */
+  icon?: ReactNode
+  /** Forwarded to the underlying `Dropdown.Item`. */
+  variant?: DropdownItemProps["variant"]
+  /**
+   * When this link is visible based on auth state.
+   * @default "always"
+   */
+  visibility?: UserButtonLinkVisibility
+}
+
 export type UserButtonProps = {
   className?: string
   size?: "default" | "icon"
@@ -28,6 +52,30 @@ export type UserButtonProps = {
    */
   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
+}
+
+function renderUserLink(
+  link: UserButtonLink | ReactElement,
+  fallbackKey: string
+): ReactNode {
+  if (isValidElement(link)) return link
+
+  const { label, href, icon, variant } = link
+  return (
+    <Dropdown.Item
+      key={fallbackKey}
+      href={href}
+      variant={variant}
+      textValue={typeof label === "string" ? label : undefined}
+    >
+      {icon}
+      <Label>{label}</Label>
+    </Dropdown.Item>
+  )
 }
 
 /**
@@ -37,13 +85,17 @@ export type UserButtonProps = {
  * @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 links - Additional menu entries rendered above the built-in items
+ * @param hideSettings - Hide the built-in "Settings" link
  * @returns The user button and its dropdown menu as a JSX element
  */
 export function UserButton({
   className,
   placement = "bottom",
   size = "default",
-  variant = "ghost"
+  variant = "ghost",
+  links,
+  hideSettings = false
 }: UserButtonProps) {
   const { authClient, basePaths, viewPaths, localization, plugins } = useAuth()
 
@@ -55,6 +107,16 @@ export function UserButton({
         <Item key={`${plugin.id}-${index.toString()}`} />
       )) ?? []
   )
+
+  const userLinks = links?.flatMap((link, index) => {
+    if (!isValidElement(link)) {
+      const visibility = link.visibility ?? "always"
+      if (visibility === "authenticated" && !session) return []
+      if (visibility === "unauthenticated" && session) return []
+    }
+    return [renderUserLink(link, `user-button-link-${index.toString()}`)]
+  })
+
   return (
     <Dropdown>
       {size === "icon" ? (
@@ -96,30 +158,35 @@ export function UserButton({
         <Dropdown.Menu>
           {session ? (
             <>
-              <Dropdown.Item
-                textValue={localization.settings.settings}
-                href={`${basePaths.settings}/${viewPaths.settings.account}`}
-              >
-                <Gear className="text-muted" />
+              {userLinks}
 
-                <Label>{localization.settings.settings}</Label>
-              </Dropdown.Item>
+              {!hideSettings && (
+                <Dropdown.Item
+                  textValue={localization.settings.settings}
+                  href={`${basePaths.settings}/${viewPaths.settings.account}`}
+                >
+                  <Gear className="text-muted" />
 
-              {userMenuItems}
+                  <Label>{localization.settings.settings}</Label>
+                </Dropdown.Item>
+              )}
 
-              <Separator />
+              {userMenuItems}
 
               <Dropdown.Item
                 textValue={localization.auth.signOut}
                 href={`${basePaths.auth}/${viewPaths.auth.signOut}`}
+                variant="danger"
               >
-                <ArrowRightFromSquare className="text-muted" />
+                <ArrowRightFromSquare className="text-danger" />
 
                 <Label>{localization.auth.signOut}</Label>
               </Dropdown.Item>
             </>
           ) : (
             <>
+              {userLinks}
+
               <Dropdown.Item
                 textValue={localization.auth.signIn}
                 href={`${basePaths.auth}/${viewPaths.auth.signIn}`}

package/src/lib/auth/api-key-plugin.ts

@@ -0,0 +1,15 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  type ApiKeyPluginOptions,
+  apiKeyPlugin as coreApiKeyPlugin
+} from "@better-auth-ui/core/plugins"
+
+import { ApiKeys } from "../../components/auth/api-key/api-keys"
+
+export const apiKeyPlugin = createAuthPlugin(
+  coreApiKeyPlugin.id,
+  (options: ApiKeyPluginOptions = {}) => ({
+    ...coreApiKeyPlugin(options),
+    securityCards: [ApiKeys]
+  })
+)

package/src/plugins.ts

@@ -1,5 +1,6 @@
 "use client"
 
+export * from "./components/auth/api-key/api-keys"
 export * from "./components/auth/delete-user/danger-zone"
 export * from "./components/auth/delete-user/delete-user"
 // Plugin-contributed components that may be used standalone
@@ -14,6 +15,7 @@ export * from "./components/auth/theme/appearance"
 export * from "./components/auth/theme/theme-toggle-item"
 export * from "./components/auth/username/sign-in-username"
 export * from "./components/auth/username/username-field"
+export * from "./lib/auth/api-key-plugin"
 export * from "./lib/auth/auth-plugin"
 export * from "./lib/auth/delete-user-plugin"
 export * from "./lib/auth/magic-link-plugin"