feat(web): step-up modal and MFA settings controls
Adds the global re-authentication modal for guarded routes and the owner/admin MFA controls on the settings page. request() in lib/api.ts now intercepts a 403 step_up_required response, awaits re-authentication through a callback registered by StepUpModal (lib/stepup.ts), and retries the original request exactly once. The modal offers TOTP, recovery code and password, since the webauthn step-up routes (/me/step-up/webauthn/begin and /finish) are not registered server-side yet; it omits the passkey option rather than calling a route that does not exist. me.stepUp posts one factor to /api/me/step-up. The settings page gains an owner-only "Require MFA" toggle and the members table gains an MFA column and a "Reset MFA" action, both routed through the existing PUT /api/settings and DELETE /api/org/users/:id/mfa.
This commit is contained in:
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { me } from "@/lib/api";
|
||||
import { registerStepUpPrompt } from "@/lib/stepup";
|
||||
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;
|
||||
type SupportedMethod = (typeof SUPPORTED)[number];
|
||||
|
||||
const LABELS: Record<SupportedMethod, string> = {
|
||||
totp: "Authenticator app",
|
||||
recovery: "Recovery code",
|
||||
password: "Password",
|
||||
};
|
||||
|
||||
const INPUT_LABELS: Record<SupportedMethod, string> = {
|
||||
totp: "6-digit code",
|
||||
recovery: "Recovery code",
|
||||
password: "Password",
|
||||
};
|
||||
|
||||
/**
|
||||
* Mounted once in the (app) layout. Registers itself as the step-up prompt on
|
||||
* mount, so `request()` in lib/api.ts can reach it without importing React.
|
||||
*/
|
||||
export function StepUpModal() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [methods, setMethods] = useState<SupportedMethod[]>([]);
|
||||
const [method, setMethod] = useState<SupportedMethod | null>(null);
|
||||
const [value, setValue] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const resolveRef = useRef<(() => void) | null>(null);
|
||||
const rejectRef = useRef<((e: Error) => void) | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
registerStepUpPrompt((requested) => {
|
||||
const supported = requested.filter((m): m is SupportedMethod => (SUPPORTED as readonly string[]).includes(m));
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
setMethods(supported);
|
||||
setMethod(supported[0] ?? null);
|
||||
setValue("");
|
||||
setError("");
|
||||
resolveRef.current = resolve;
|
||||
rejectRef.current = reject;
|
||||
setOpen(true);
|
||||
});
|
||||
});
|
||||
// Unregistering on unmount matches "no prompt registered fails rather
|
||||
// than hangs": outside the app shell there is nothing to reach.
|
||||
return () => registerStepUpPrompt(null);
|
||||
}, []);
|
||||
|
||||
function cancel(reason: string) {
|
||||
setOpen(false);
|
||||
rejectRef.current?.(new Error(reason));
|
||||
resolveRef.current = null;
|
||||
rejectRef.current = null;
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!method) 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;
|
||||
} catch (err) {
|
||||
setError(friendlyMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={open} title="Confirm it's you" onClose={() => cancel("re-authentication was cancelled")}>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-text-secondary">This action reveals a credential, so please confirm it is you.</p>
|
||||
|
||||
{methods.length === 0 ? (
|
||||
<>
|
||||
<p className="text-sm text-danger">No supported re-authentication method is available for this account.</p>
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" variant="secondary" onClick={() => cancel("no re-authentication method available")}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{methods.length > 1 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{methods.map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMethod(m);
|
||||
setValue("");
|
||||
setError("");
|
||||
}}
|
||||
className={`rounded px-3 py-1.5 text-sm transition-colors ${
|
||||
method === m ? "bg-accent text-white" : "bg-surface-2 text-text-secondary hover:text-text-primary"
|
||||
}`}
|
||||
>
|
||||
{LABELS[m]}
|
||||
</button>
|
||||
))}
|
||||
</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>
|
||||
|
||||
{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>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user