fix(mfa): wire up webauthn step-up routes
The missing /me/step-up/webauthn/begin and /finish were a plan defect, not an acceptable gap: a user whose only factor is a passkey was offered only recovery codes for step-up, burning one every ten minutes. Adds the handlers in package auth (session-authenticated, not themselves behind RequireStepUp, modeled on HandleMFAWebAuthnBegin/finishAssertion) and registers both routes behind the same RateLimitAuth() as /me/step-up. StepUpModal now offers "Use passkey" when the server names webauthn and the browser supports WebAuthn.
This commit is contained in:
@@ -3,23 +3,23 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { me } from "@/lib/api";
|
||||
import { registerStepUpPrompt } from "@/lib/stepup";
|
||||
import { isPasskeySupported, toRequestOptions, credentialToJSON } from "@/lib/webauthn";
|
||||
import { Button, Modal, friendlyMessage } from "@/components/ui";
|
||||
|
||||
// The server may also offer "webauthn" (a passkey), but /me/step-up/webauthn
|
||||
// isn't wired up server-side yet, so this modal only ever offers the three
|
||||
// methods it can actually complete.
|
||||
const SUPPORTED = ["totp", "recovery", "password"] as const;
|
||||
const SUPPORTED = ["totp", "recovery", "webauthn", "password"] as const;
|
||||
type SupportedMethod = (typeof SUPPORTED)[number];
|
||||
|
||||
const LABELS: Record<SupportedMethod, string> = {
|
||||
totp: "Authenticator app",
|
||||
recovery: "Recovery code",
|
||||
webauthn: "Passkey",
|
||||
password: "Password",
|
||||
};
|
||||
|
||||
const INPUT_LABELS: Record<SupportedMethod, string> = {
|
||||
totp: "6-digit code",
|
||||
recovery: "Recovery code",
|
||||
webauthn: "",
|
||||
password: "Password",
|
||||
};
|
||||
|
||||
@@ -40,7 +40,12 @@ export function StepUpModal() {
|
||||
|
||||
useEffect(() => {
|
||||
registerStepUpPrompt((requested) => {
|
||||
const supported = requested.filter((m): m is SupportedMethod => (SUPPORTED as readonly string[]).includes(m));
|
||||
// "webauthn" only counts as offered when this browser can actually
|
||||
// complete it - otherwise it would sit there as a dead option.
|
||||
const supported = requested.filter(
|
||||
(m): m is SupportedMethod =>
|
||||
(SUPPORTED as readonly string[]).includes(m) && (m !== "webauthn" || isPasskeySupported()),
|
||||
);
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
setMethods(supported);
|
||||
setMethod(supported[0] ?? null);
|
||||
@@ -63,18 +68,37 @@ export function StepUpModal() {
|
||||
rejectRef.current = null;
|
||||
}
|
||||
|
||||
function succeed() {
|
||||
setOpen(false);
|
||||
resolveRef.current?.();
|
||||
resolveRef.current = null;
|
||||
rejectRef.current = null;
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!method) return;
|
||||
if (!method || method === "webauthn") return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const factor = method === "totp" ? { totp: value } : method === "recovery" ? { recovery: value } : { password: value };
|
||||
await me.stepUp(factor);
|
||||
setOpen(false);
|
||||
resolveRef.current?.();
|
||||
resolveRef.current = null;
|
||||
rejectRef.current = null;
|
||||
succeed();
|
||||
} catch (err) {
|
||||
setError(friendlyMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function usePasskey() {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const { publicKey, ceremony_id } = await me.stepUpWebAuthnBegin();
|
||||
const cred = (await navigator.credentials.get({ publicKey: toRequestOptions(publicKey) })) as PublicKeyCredential;
|
||||
await me.stepUpWebAuthnFinish(ceremony_id, credentialToJSON(cred));
|
||||
succeed();
|
||||
} catch (err) {
|
||||
setError(friendlyMessage(err));
|
||||
} finally {
|
||||
@@ -119,36 +143,53 @@ export function StepUpModal() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="step-up-value" className="mb-1.5 block text-sm font-medium text-text-secondary">
|
||||
{method ? INPUT_LABELS[method] : ""}
|
||||
</label>
|
||||
<input
|
||||
id="step-up-value"
|
||||
type={method === "password" ? "password" : "text"}
|
||||
inputMode={method === "totp" ? "numeric" : undefined}
|
||||
autoComplete={method === "password" ? "current-password" : "one-time-code"}
|
||||
autoFocus
|
||||
required
|
||||
maxLength={method === "totp" ? 6 : undefined}
|
||||
value={value}
|
||||
onChange={(e) => setValue(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"
|
||||
/>
|
||||
</div>
|
||||
{method === "webauthn" ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-text-secondary">Use your device's passkey to confirm it is you.</p>
|
||||
|
||||
{error && <div className="rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">{error}</div>}
|
||||
{error && <div className="rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">{error}</div>}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" onClick={() => cancel("re-authentication was cancelled")}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" loading={busy}>
|
||||
Confirm
|
||||
</Button>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" onClick={() => cancel("re-authentication was cancelled")}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="button" variant="primary" loading={busy} onClick={usePasskey}>
|
||||
Use passkey
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="step-up-value" className="mb-1.5 block text-sm font-medium text-text-secondary">
|
||||
{method ? INPUT_LABELS[method] : ""}
|
||||
</label>
|
||||
<input
|
||||
id="step-up-value"
|
||||
type={method === "password" ? "password" : "text"}
|
||||
inputMode={method === "totp" ? "numeric" : undefined}
|
||||
autoComplete={method === "password" ? "current-password" : "one-time-code"}
|
||||
autoFocus
|
||||
required
|
||||
maxLength={method === "totp" ? 6 : undefined}
|
||||
value={value}
|
||||
onChange={(e) => setValue(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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">{error}</div>}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" onClick={() => cancel("re-authentication was cancelled")}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" loading={busy}>
|
||||
Confirm
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user