feat(web): account security page and MFA enrolment wizard
This commit is contained in:
@@ -0,0 +1,278 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { me, type MePasskey } from "@/lib/api";
|
||||
import { isPasskeySupported, toCreateOptions, credentialToJSON } from "@/lib/webauthn";
|
||||
import { AsyncBoundary, Badge, Button, Card, CardHeader, CardTitle, ConfirmDialog, friendlyMessage, Modal, useToast } from "@/components/ui";
|
||||
import { MfaEnrolWizard, type MfaEnrolEndpoints } from "@/components/mfa/MfaEnrolWizard";
|
||||
import { RecoveryCodes } from "@/components/mfa/RecoveryCodes";
|
||||
|
||||
/**
|
||||
* Adapts the /api/me/* client methods to the shape MfaEnrolWizard expects.
|
||||
* The only mismatch is the field name: the server calls it `otpauth_uri`
|
||||
* here (it is `otpauth_url` on the ticket-scoped enrolment endpoints from
|
||||
* Task 10, which this page does not use).
|
||||
*/
|
||||
const SESSION_ENDPOINTS: MfaEnrolEndpoints = {
|
||||
totpSetup: async () => {
|
||||
const res = await me.totpSetup();
|
||||
return { secret: res.secret, otpauth_url: res.otpauth_uri };
|
||||
},
|
||||
totpConfirm: (code) => me.totpConfirm(code),
|
||||
passkeyBegin: () => me.passkeyRegisterBegin(),
|
||||
passkeyFinish: (ceremonyId, credential, name) => me.passkeyRegisterFinish(ceremonyId, credential, name),
|
||||
};
|
||||
|
||||
function formatDate(value?: string): string {
|
||||
if (!value) return "Never";
|
||||
return new Date(value).toLocaleString();
|
||||
}
|
||||
|
||||
export default function SecurityPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const toast = useToast();
|
||||
|
||||
const { data: status, isLoading, error } = useQuery({ queryKey: ["me-mfa"], queryFn: me.mfa });
|
||||
|
||||
const [wizardOpen, setWizardOpen] = useState(false);
|
||||
const [removingTotp, setRemovingTotp] = useState(false);
|
||||
const [removingPasskey, setRemovingPasskey] = useState<MePasskey | null>(null);
|
||||
const [renamingPasskey, setRenamingPasskey] = useState<MePasskey | null>(null);
|
||||
const [renameValue, setRenameValue] = useState("");
|
||||
const [newRecoveryCodes, setNewRecoveryCodes] = useState<string[] | null>(null);
|
||||
|
||||
const invalidate = () => queryClient.invalidateQueries({ queryKey: ["me-mfa"] });
|
||||
|
||||
const removeTotp = useMutation({
|
||||
mutationFn: () => me.removeTotp(),
|
||||
onSuccess: () => {
|
||||
invalidate();
|
||||
toast.success("Authenticator app removed.");
|
||||
setRemovingTotp(false);
|
||||
},
|
||||
});
|
||||
|
||||
const deletePasskey = useMutation({
|
||||
mutationFn: (id: string) => me.deletePasskey(id),
|
||||
onSuccess: (_data, id) => {
|
||||
invalidate();
|
||||
toast.success("Passkey removed.");
|
||||
if (removingPasskey?.id === id) setRemovingPasskey(null);
|
||||
},
|
||||
});
|
||||
|
||||
const renamePasskey = useMutation({
|
||||
mutationFn: () => me.renamePasskey(renamingPasskey!.id, renameValue),
|
||||
onSuccess: () => {
|
||||
invalidate();
|
||||
setRenamingPasskey(null);
|
||||
},
|
||||
});
|
||||
|
||||
const regenerateRecovery = useMutation({
|
||||
mutationFn: () => me.regenerateRecovery(),
|
||||
onSuccess: (res) => setNewRecoveryCodes(res.recovery_codes),
|
||||
});
|
||||
|
||||
const addPasskeyDirect = useMutation({
|
||||
mutationFn: async () => {
|
||||
const { publicKey, ceremony_id } = await me.passkeyRegisterBegin();
|
||||
const cred = (await navigator.credentials.create({ publicKey: toCreateOptions(publicKey) })) as PublicKeyCredential;
|
||||
return me.passkeyRegisterFinish(ceremony_id, credentialToJSON(cred));
|
||||
},
|
||||
onSuccess: () => invalidate(),
|
||||
});
|
||||
|
||||
function factorCount(s: NonNullable<typeof status>): number {
|
||||
return (s.totp_enabled ? 1 : 0) + s.passkeys.length;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6 p-4 sm:p-6 lg:p-8">
|
||||
<h1 className="text-2xl font-bold text-text-primary">Security</h1>
|
||||
|
||||
<AsyncBoundary isLoading={isLoading} error={error}>
|
||||
{status && !status.applicable ? (
|
||||
<Card>
|
||||
<p className="text-sm text-text-secondary">
|
||||
Your sign-in is managed by this instance's identity provider. Two-factor authentication and passkeys are configured there, not here.
|
||||
</p>
|
||||
</Card>
|
||||
) : status ? (
|
||||
<>
|
||||
{status.require_mfa && (
|
||||
<div className="rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-sm text-warning">
|
||||
This instance requires a second sign-in factor. You cannot remove your last one.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader className="mb-4">
|
||||
<CardTitle>Authenticator app</CardTitle>
|
||||
<Badge variant={status.totp_enabled ? "success" : "neutral"}>{status.totp_enabled ? "Enabled" : "Not set up"}</Badge>
|
||||
</CardHeader>
|
||||
<p className="mb-4 text-sm text-text-secondary">Generates a 6-digit code every 30 seconds in an app like Google Authenticator or 1Password.</p>
|
||||
{status.totp_enabled ? (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
disabled={status.require_mfa && factorCount(status) <= 1}
|
||||
title={status.require_mfa && factorCount(status) <= 1 ? "This instance requires at least one factor." : undefined}
|
||||
onClick={() => setRemovingTotp(true)}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="secondary" size="sm" onClick={() => setWizardOpen(true)}>
|
||||
Set up
|
||||
</Button>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="mb-4">
|
||||
<CardTitle>Passkeys</CardTitle>
|
||||
{isPasskeySupported() && (
|
||||
<Button variant="secondary" size="sm" loading={addPasskeyDirect.isPending} onClick={() => addPasskeyDirect.mutate()}>
|
||||
Add a passkey
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
{addPasskeyDirect.error && <p className="mb-3 text-sm text-danger">{friendlyMessage(addPasskeyDirect.error)}</p>}
|
||||
{status.passkeys.length === 0 ? (
|
||||
<p className="text-sm text-text-secondary">No passkeys registered.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-border">
|
||||
{status.passkeys.map((pk) => {
|
||||
const lastFactor = status.require_mfa && !status.totp_enabled && status.passkeys.length <= 1;
|
||||
return (
|
||||
<li key={pk.id} className="flex flex-col gap-2 py-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-text-primary">{pk.name}</p>
|
||||
<p className="text-xs text-text-secondary">
|
||||
Added {formatDate(pk.created_at)} · Last used {formatDate(pk.last_used_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setRenamingPasskey(pk);
|
||||
setRenameValue(pk.name);
|
||||
}}
|
||||
>
|
||||
Rename
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
disabled={lastFactor}
|
||||
title={lastFactor ? "This instance requires at least one factor." : undefined}
|
||||
onClick={() => setRemovingPasskey(pk)}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="mb-4">
|
||||
<CardTitle>Recovery codes</CardTitle>
|
||||
</CardHeader>
|
||||
<p className="mb-4 text-sm text-text-secondary">
|
||||
{status.recovery_remaining} unused code{status.recovery_remaining === 1 ? "" : "s"} remaining. Regenerating invalidates every existing code.
|
||||
</p>
|
||||
<Button variant="secondary" size="sm" loading={regenerateRecovery.isPending} onClick={() => regenerateRecovery.mutate()}>
|
||||
Regenerate
|
||||
</Button>
|
||||
{regenerateRecovery.error && <p className="mt-3 text-sm text-danger">{friendlyMessage(regenerateRecovery.error)}</p>}
|
||||
</Card>
|
||||
</>
|
||||
) : null}
|
||||
</AsyncBoundary>
|
||||
|
||||
<Modal open={wizardOpen} title="Set up a second factor" onClose={() => setWizardOpen(false)}>
|
||||
<MfaEnrolWizard
|
||||
mode="session"
|
||||
endpoints={SESSION_ENDPOINTS}
|
||||
onCancel={() => setWizardOpen(false)}
|
||||
onComplete={() => {
|
||||
invalidate();
|
||||
setWizardOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<Modal open={newRecoveryCodes !== null} title="New recovery codes" onClose={() => setNewRecoveryCodes(null)}>
|
||||
{newRecoveryCodes && (
|
||||
<RecoveryCodes
|
||||
codes={newRecoveryCodes}
|
||||
onAcknowledge={() => {
|
||||
invalidate();
|
||||
setNewRecoveryCodes(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
<Modal open={renamingPasskey !== null} title="Rename passkey" onClose={() => setRenamingPasskey(null)}>
|
||||
<form
|
||||
className="space-y-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
renamePasskey.mutate();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
autoFocus
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
|
||||
/>
|
||||
{renamePasskey.error && <p className="text-sm text-danger">{friendlyMessage(renamePasskey.error)}</p>}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="secondary" onClick={() => setRenamingPasskey(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" loading={renamePasskey.isPending} disabled={!renameValue.trim()}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
open={removingTotp}
|
||||
title="Remove authenticator app"
|
||||
confirmLabel="Remove"
|
||||
loading={removeTotp.isPending}
|
||||
error={removeTotp.error ? friendlyMessage(removeTotp.error) : null}
|
||||
onClose={() => setRemovingTotp(false)}
|
||||
onConfirm={() => removeTotp.mutate()}
|
||||
body={<p>You will no longer be asked for a code from your authenticator app when signing in.</p>}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
open={removingPasskey !== null}
|
||||
title="Remove passkey"
|
||||
confirmLabel="Remove"
|
||||
loading={deletePasskey.isPending}
|
||||
error={deletePasskey.error ? friendlyMessage(deletePasskey.error) : null}
|
||||
onClose={() => setRemovingPasskey(null)}
|
||||
onConfirm={() => removingPasskey && deletePasskey.mutate(removingPasskey.id)}
|
||||
body={
|
||||
<p>
|
||||
<span className="text-text-primary">{removingPasskey?.name}</span> will no longer be accepted for sign-in.
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user