Passkey

1"use client"
2 
3import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
4import { Fingerprint, X } from "lucide-react"
5import { useState } from "react"
6 
7import { Button } from "@/components/ui/button"
8import {
9  Item,
10  ItemActions,
11  ItemContent,
12  ItemDescription,
13  ItemMedia,
14  ItemTitle
15} from "@/components/ui/item"
16import { passkeyPlugin } from "@/lib/auth/passkey-plugin"
17 
18import {
19  DeletePasskeyDialog,
20  type ListedPasskey
21} from "./delete-passkey-dialog"
22 
23export type PasskeyProps = {
24  passkey: ListedPasskey
25}
26 
27export function Passkey({ passkey }: PasskeyProps) {
28  const { localization } = useAuth()
29  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
30  const [deleteOpen, setDeleteOpen] = useState(false)
31 
32  const passkeyName = passkey.name || passkeyLocalization.passkey
33 
34  return (
35    <Item>
36      <ItemMedia variant="icon">
37        <Fingerprint />
38      </ItemMedia>
39      <ItemContent>
40        <ItemTitle>{passkeyName}</ItemTitle>
41        <ItemDescription>
42          {new Date(passkey.createdAt).toLocaleString(undefined, {
43            dateStyle: "medium",
44            timeStyle: "short"
45          })}
46        </ItemDescription>
47      </ItemContent>
48      <ItemActions>
49        <Button
50          variant="outline"
51          size="sm"
52          onClick={() => setDeleteOpen(true)}
53          aria-label={passkeyLocalization.deletePasskey.replace(
54            "{{name}}",
55            passkeyName
56          )}
57        >
58          <X />
59 
60          {localization.settings.delete}
61        </Button>
62 
63        <DeletePasskeyDialog
64          open={deleteOpen}
65          onOpenChange={setDeleteOpen}
66          passkey={passkey}
67        />
68      </ItemActions>
69    </Item>
70  )
71}