@better-auth-ui/heroui 1.6.6 → 1.6.8

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/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/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"