📦 v5.0.18 - https://docs.rxresu.me/changelog (Passkeys Support)

src/routes/dashboard/settings/authentication/-components/hooks.tsx

@@ -1,7 +1,14 @@
 import type { ReactNode } from "react";
 
 import { t } from "@lingui/core/macro";
-import { GithubLogoIcon, GoogleLogoIcon, LinkedinLogoIcon, PasswordIcon, VaultIcon } from "@phosphor-icons/react";
+import {
+  FingerprintIcon,
+  GithubLogoIcon,
+  GoogleLogoIcon,
+  LinkedinLogoIcon,
+  PasswordIcon,
+  VaultIcon,
+} from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { toast } from "sonner";
@@ -18,6 +25,7 @@ import { orpc } from "@/integrations/orpc/client";
 export function getProviderName(providerId: AuthProvider): string {
   return match(providerId)
     .with("credential", () => "Password")
+    .with("passkey", () => "Passkey")
     .with("google", () => "Google")
     .with("github", () => "GitHub")
     .with("linkedin", () => "LinkedIn")
@@ -31,6 +39,7 @@ export function getProviderName(providerId: AuthProvider): string {
 export function getProviderIcon(providerId: AuthProvider): ReactNode {
   return match(providerId)
     .with("credential", () => <PasswordIcon />)
+    .with("passkey", () => <FingerprintIcon />)
     .with("google", () => <GoogleLogoIcon />)
     .with("github", () => <GithubLogoIcon />)
     .with("linkedin", () => <LinkedinLogoIcon />)

src/routes/dashboard/settings/authentication/-components/passkeys.tsx

@@ -0,0 +1,146 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { KeyIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { motion } from "motion/react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { usePrompt } from "@/hooks/use-prompt";
+import { authClient } from "@/integrations/auth/client";
+
+export function PasskeysSection() {
+  const queryClient = useQueryClient();
+  const prompt = usePrompt();
+
+  const { data: passkeys = [] } = useQuery({
+    queryKey: ["auth", "passkeys"],
+    queryFn: () => authClient.passkey.listUserPasskeys(),
+    select: ({ data }) => data ?? [],
+  });
+
+  const registerPasskeyMutation = useMutation({
+    mutationFn: async () => {
+      return await authClient.passkey.addPasskey();
+    },
+    onSuccess: async ({ data, error }) => {
+      if (error) {
+        toast.error(error.message);
+        return;
+      }
+
+      toast.success(t`Passkey registered successfully.`);
+      await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+
+      const name = await prompt(t`Name your passkey`, {
+        description: t`You can skip this and keep the default name.`,
+        defaultValue: "",
+        confirmText: t`Save`,
+        inputProps: { placeholder: t`MacBook Touch ID` },
+      });
+      if (name === null) return;
+
+      const passkeyId = typeof data?.id === "string" ? data.id : null;
+      const passkeyName = name.trim();
+      if (!passkeyId || passkeyName.length === 0) return;
+
+      const { error: renameError } = await authClient.passkey.updatePasskey({ id: passkeyId, name: passkeyName });
+      if (renameError) {
+        toast.error(renameError.message);
+        return;
+      }
+
+      await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+    },
+    onError: () => {
+      toast.error(t`Failed to register passkey. Please try again.`);
+    },
+  });
+
+  const deletePasskeyMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return await authClient.passkey.deletePasskey({ id });
+    },
+    onSuccess: async ({ error }) => {
+      if (error) {
+        toast.error(error.message);
+        return;
+      }
+
+      toast.success(t`Passkey deleted successfully.`);
+      await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+    },
+    onError: () => {
+      toast.error(t`Failed to delete passkey. Please try again.`);
+    },
+  });
+
+  const handleRegisterPasskey = () => {
+    if (registerPasskeyMutation.isPending) return;
+    registerPasskeyMutation.mutate();
+  };
+
+  const handleDeletePasskey = (id: string) => {
+    if (deletePasskeyMutation.isPending) return;
+    deletePasskeyMutation.mutate(id);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, delay: 0.3, ease: "easeOut" }}
+      className="will-change-[transform,opacity]"
+    >
+      <Separator />
+
+      <div className="mt-4 grid gap-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h2 className="flex items-center gap-x-3 text-base font-medium">
+            <KeyIcon />
+            <Trans>Passkeys</Trans>
+          </h2>
+
+          <Button variant="outline" onClick={handleRegisterPasskey} disabled={registerPasskeyMutation.isPending}>
+            <PlusIcon />
+            <Trans>Register New Device</Trans>
+          </Button>
+        </div>
+
+        {passkeys.length === 0 && (
+          <p className="text-sm text-muted-foreground">
+            <Trans>No passkeys registered yet.</Trans>
+          </p>
+        )}
+
+        {passkeys.length > 0 && (
+          <div className="grid gap-2">
+            {passkeys.map((passkey) => {
+              return (
+                <div
+                  key={passkey.id}
+                  className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 px-3 py-2"
+                >
+                  <p className="truncate text-sm font-medium">{passkey.name ?? t`Unnamed passkey`}</p>
+
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => handleDeletePasskey(passkey.id)}
+                      disabled={deletePasskeyMutation.isPending}
+                    >
+                      <TrashIcon />
+                      <Trans>Delete</Trans>
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}