feat(auth): mandatory 2FA (TOTP + WebAuthn passkeys) with hard enrollment gate, AAL2 step-up, and single-use recovery codes

app/security/enroll/enroll-client.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { createSupabaseBrowserClient } from '@/lib/supabase/browser';
+import {
+  PasskeyEnrollPanel,
+  RecoveryCodesPanel,
+  TotpEnrollPanel,
+} from '../mfa-components';
+
+/**
+ * Drives the mandatory first-factor enrollment: pick TOTP and/or passkey, then
+ * (once a factor is verified and the session is aal2) generate and display the
+ * one-time recovery codes before releasing the user to the dashboard.
+ */
+export function EnrollClient() {
+  const router = useRouter();
+  const supabase = useMemo(() => createSupabaseBrowserClient(), []);
+  const [phase, setPhase] = useState<'choose' | 'recovery'>('choose');
+  const [codes, setCodes] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleVerified() {
+    setError(null);
+    try {
+      const res = await fetch('/api/security/recovery/generate', {
+        method: 'POST',
+      });
+      const json = (await res.json()) as { codes?: string[]; error?: string };
+      if (!res.ok || !json.codes) {
+        throw new Error(json.error || 'Could not generate recovery codes.');
+      }
+      setCodes(json.codes);
+    } catch (e) {
+      // The factor is already enabled; surface the error but still let the
+      // user proceed (they can regenerate codes later in Security settings).
+      setError(
+        `${(e as Error).message} You can generate recovery codes later in Security settings.`,
+      );
+      setCodes([]);
+    } finally {
+      setPhase('recovery');
+    }
+  }
+
+  function finish() {
+    router.replace('/dashboard');
+    router.refresh();
+  }
+
+  if (phase === 'recovery') {
+    return (
+      <div className="stack">
+        {error && <p className="error">{error}</p>}
+        {codes.length > 0 ? (
+          <RecoveryCodesPanel codes={codes} />
+        ) : (
+          <div className="card">
+            <h2>Two-factor authentication enabled</h2>
+            <p className="muted">Your account is now protected.</p>
+          </div>
+        )}
+        <div className="row">
+          <button type="button" onClick={finish}>
+            Continue to dashboard
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="stack">
+      <TotpEnrollPanel supabase={supabase} onVerified={handleVerified} />
+      <PasskeyEnrollPanel supabase={supabase} onVerified={handleVerified} />
+    </div>
+  );
+}

app/security/enroll/page.tsx

@@ -0,0 +1,34 @@
+import { redirect } from 'next/navigation';
+import { createSupabaseServerClient } from '@/lib/supabase/server';
+import { EnrollClient } from './enroll-client';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * Mandatory MFA enrollment gate. Reachable only by authenticated users (the
+ * middleware sends users here when they have zero verified factors). If the
+ * user already has a verified factor, there is nothing to enroll, so we send
+ * them on to the dashboard.
+ */
+export default async function EnrollPage() {
+  const supabase = createSupabaseServerClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) redirect('/login');
+
+  const { data: factors } = await supabase.auth.mfa.listFactors();
+  const verified = factors?.all.filter((f) => f.status === 'verified') ?? [];
+  if (verified.length > 0) redirect('/dashboard');
+
+  return (
+    <main className="container">
+      <h1>Secure your account</h1>
+      <p className="muted">
+        Two-factor authentication is required. Add at least one method below to
+        continue.
+      </p>
+      <EnrollClient />
+    </main>
+  );
+}