API Key

1"use client"
2 
3import {
4  type ListedApiKey,
5  useAuth,
6  useAuthPlugin
7} from "@better-auth-ui/react"
8import { Key, X } from "lucide-react"
9import { useState } from "react"
10 
11import { Button } from "@/components/ui/button"
12import {
13  Item,
14  ItemActions,
15  ItemContent,
16  ItemDescription,
17  ItemMedia,
18  ItemTitle
19} from "@/components/ui/item"
20import { apiKeyPlugin } from "@/lib/auth/api-key-plugin"
21import { DeleteApiKeyDialog } from "./delete-api-key-dialog"
22 
23export type ApiKeyProps = {
24  apiKey: ListedApiKey
25  /** Hide the row's delete button (e.g., when caller lacks `apiKey:delete`). */
26  hideDelete?: boolean
27  /** Scope the delete payload to an organization (sets `configId`). */
28  organizationId?: string
29}
30 
31export function ApiKey({ apiKey, hideDelete, organizationId }: ApiKeyProps) {
32  const { localization } = useAuth()
33  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
34  const [deleteOpen, setDeleteOpen] = useState(false)
35 
36  const preview = `${apiKey.start}${"*".repeat(16)}`
37 
38  return (
39    <Item>
40      <ItemMedia variant="icon">
41        <Key />
42      </ItemMedia>
43      <ItemContent>
44        <ItemTitle>{apiKey.name || apiKeyLocalization.apiKey}</ItemTitle>
45        <ItemDescription className="font-mono">{preview}</ItemDescription>
46        <ItemDescription>
47          {apiKeyLocalization.created}{" "}
48          {new Date(apiKey.createdAt).toLocaleString(undefined, {
49            dateStyle: "medium",
50            timeStyle: "short"
51          })}
52        </ItemDescription>
53        <ItemDescription>
54          {apiKey.expiresAt
55            ? `${apiKeyLocalization.expires} ${new Date(
56                apiKey.expiresAt
57              ).toLocaleString(undefined, {
58                dateStyle: "medium",
59                timeStyle: "short"
60              })}`
61            : apiKeyLocalization.neverExpires}
62        </ItemDescription>
63      </ItemContent>
64      <ItemActions>
65        {!hideDelete && (
66          <>
67            <Button
68              variant="outline"
69              size="sm"
70              onClick={() => setDeleteOpen(true)}
71              aria-label={apiKeyLocalization.deleteApiKey}
72            >
73              <X />
74 
75              {localization.settings.delete}
76            </Button>
77 
78            <DeleteApiKeyDialog
79              open={deleteOpen}
80              onOpenChange={setDeleteOpen}
81              apiKey={apiKey}
82              organizationId={organizationId}
83            />
84          </>
85        )}
86      </ItemActions>
87    </Item>
88  )
89}