diff --git a/frontend/src/components/settings/PasskeySection.tsx b/frontend/src/components/settings/PasskeySection.tsx
new file mode 100644
index 0000000..935606d
--- /dev/null
+++ b/frontend/src/components/settings/PasskeySection.tsx
@@ -0,0 +1,415 @@
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Fingerprint, Loader2, Trash2, Cloud } from 'lucide-react';
+import api, { getErrorMessage } from '@/lib/api';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogFooter,
+} from '@/components/ui/dialog';
+import { Separator } from '@/components/ui/separator';
+import { useConfirmAction } from '@/hooks/useConfirmAction';
+import type { PasskeyCredential } from '@/types';
+
+function formatRelativeTime(dateStr: string | null): string {
+ if (!dateStr) return 'Never';
+ const date = new Date(dateStr);
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffMins = Math.floor(diffMs / 60000);
+ if (diffMins < 1) return 'Just now';
+ if (diffMins < 60) return `${diffMins}m ago`;
+ const diffHours = Math.floor(diffMins / 60);
+ if (diffHours < 24) return `${diffHours}h ago`;
+ const diffDays = Math.floor(diffHours / 24);
+ if (diffDays < 30) return `${diffDays}d ago`;
+ return date.toLocaleDateString();
+}
+
+function formatDate(dateStr: string | null): string {
+ if (!dateStr) return '';
+ return new Date(dateStr).toLocaleDateString(undefined, {
+ day: 'numeric', month: 'short', year: 'numeric',
+ });
+}
+
+function detectDeviceName(): string {
+ const ua = navigator.userAgent;
+ let browser = 'Browser';
+ if (ua.includes('Chrome') && !ua.includes('Edg')) browser = 'Chrome';
+ else if (ua.includes('Safari') && !ua.includes('Chrome')) browser = 'Safari';
+ else if (ua.includes('Firefox')) browser = 'Firefox';
+ else if (ua.includes('Edg')) browser = 'Edge';
+
+ let os = '';
+ if (ua.includes('Mac')) os = 'macOS';
+ else if (ua.includes('Windows')) os = 'Windows';
+ else if (ua.includes('Linux')) os = 'Linux';
+ else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'iOS';
+ else if (ua.includes('Android')) os = 'Android';
+
+ return os ? `${os} \u2014 ${browser}` : browser;
+}
+
+interface DeleteConfirmProps {
+ credential: PasskeyCredential;
+ onDelete: (id: number, password: string) => void;
+ isDeleting: boolean;
+}
+
+function PasskeyDeleteButton({ credential, onDelete, isDeleting }: DeleteConfirmProps) {
+ const [showPasswordDialog, setShowPasswordDialog] = useState(false);
+ const [password, setPassword] = useState('');
+
+ const { confirming, handleClick } = useConfirmAction(() => {
+ setShowPasswordDialog(true);
+ });
+
+ const handleSubmitDelete = () => {
+ onDelete(credential.id, password);
+ setPassword('');
+ setShowPasswordDialog(false);
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default function PasskeySection() {
+ const queryClient = useQueryClient();
+ const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
+ const [ceremonyState, setCeremonyState] = useState<'password' | 'waiting' | 'naming'>('password');
+ const [registerPassword, setRegisterPassword] = useState('');
+ const [passkeyName, setPasskeyName] = useState('');
+ const [pendingCredential, setPendingCredential] = useState<{
+ credential: string;
+ challenge_token: string;
+ } | null>(null);
+
+ const passkeysQuery = useQuery({
+ queryKey: ['passkeys'],
+ queryFn: async () => {
+ const { data } = await api.get
('/auth/passkeys');
+ return data;
+ },
+ });
+
+ const registerMutation = useMutation({
+ mutationFn: async ({ password }: { password: string }) => {
+ const { startRegistration } = await import('@simplewebauthn/browser');
+
+ // Step 1: Get registration options (requires password V-02)
+ const { data: beginResp } = await api.post('/auth/passkeys/register/begin', { password });
+
+ // Step 2: Browser WebAuthn ceremony
+ setCeremonyState('waiting');
+ const credential = await startRegistration(beginResp.options);
+
+ return {
+ credential: JSON.stringify(credential),
+ challenge_token: beginResp.challenge_token,
+ };
+ },
+ onSuccess: (data) => {
+ setPendingCredential(data);
+ setPasskeyName(detectDeviceName());
+ setCeremonyState('naming');
+ },
+ onError: (error: unknown) => {
+ if (error instanceof Error && error.name === 'NotAllowedError') {
+ toast.info('Passkey setup cancelled');
+ } else if (error instanceof Error && error.name === 'AbortError') {
+ toast.info('Cancelled');
+ } else {
+ toast.error(getErrorMessage(error, 'Failed to create passkey'));
+ }
+ setRegisterDialogOpen(false);
+ resetRegisterState();
+ },
+ });
+
+ const completeMutation = useMutation({
+ mutationFn: async ({ credential, challenge_token, name }: {
+ credential: string; challenge_token: string; name: string;
+ }) => {
+ const { data } = await api.post('/auth/passkeys/register/complete', {
+ credential, challenge_token, name,
+ });
+ return data;
+ },
+ onSuccess: () => {
+ toast.success('Passkey registered');
+ queryClient.invalidateQueries({ queryKey: ['passkeys'] });
+ queryClient.invalidateQueries({ queryKey: ['auth'] });
+ setRegisterDialogOpen(false);
+ resetRegisterState();
+ },
+ onError: (error: unknown) => {
+ toast.error(getErrorMessage(error, 'Failed to save passkey'));
+ },
+ });
+
+ const deleteMutation = useMutation({
+ mutationFn: async ({ id, password }: { id: number; password: string }) => {
+ await api.delete(`/auth/passkeys/${id}`, { data: { password } });
+ },
+ onSuccess: () => {
+ toast.success('Passkey removed');
+ queryClient.invalidateQueries({ queryKey: ['passkeys'] });
+ queryClient.invalidateQueries({ queryKey: ['auth'] });
+ },
+ onError: (error: unknown) => {
+ toast.error(getErrorMessage(error, 'Failed to remove passkey'));
+ },
+ });
+
+ const resetRegisterState = useCallback(() => {
+ setCeremonyState('password');
+ setRegisterPassword('');
+ setPasskeyName('');
+ setPendingCredential(null);
+ }, []);
+
+ const handleStartRegister = () => {
+ resetRegisterState();
+ setRegisterDialogOpen(true);
+ };
+
+ const handlePasswordSubmit = () => {
+ if (!registerPassword) return;
+ registerMutation.mutate({ password: registerPassword });
+ };
+
+ const handleSaveName = () => {
+ if (!pendingCredential || !passkeyName.trim()) return;
+ completeMutation.mutate({
+ ...pendingCredential,
+ name: passkeyName.trim(),
+ });
+ };
+
+ const handleDelete = (id: number, password: string) => {
+ deleteMutation.mutate({ id, password });
+ };
+
+ const passkeys = passkeysQuery.data ?? [];
+ const hasPasskeys = passkeys.length > 0;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Sign in with your fingerprint, face, or security key
+
+
+
+ {hasPasskeys && (
+
+ {passkeys.length} registered
+
+ )}
+
+ {passkeys.map((pk) => (
+ -
+
+
+
+
+
+ {pk.name}
+ {pk.backed_up && (
+
+ )}
+
+
+ Added {formatDate(pk.created_at)} · Last used {formatRelativeTime(pk.last_used_at)}
+
+
+ ))}
+
+ )}
+
+
+
+
+
+ {/* Registration ceremony dialog */}
+
+
+
+ );
+}
diff --git a/frontend/src/components/settings/SecurityTab.tsx b/frontend/src/components/settings/SecurityTab.tsx
index 22c9627..f8ccca3 100644
--- a/frontend/src/components/settings/SecurityTab.tsx
+++ b/frontend/src/components/settings/SecurityTab.tsx
@@ -5,6 +5,7 @@ import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import TotpSetupSection from './TotpSetupSection';
+import PasskeySection from './PasskeySection';
import type { Settings } from '@/types';
interface SecurityTabProps {
@@ -86,6 +87,9 @@ export default function SecurityTab({ settings, updateSettings, isUpdating }: Se
+ {/* Passkeys */}
+
+
{/* Password + TOTP */}