Function VerifyMfaPage

frontend/src/app/verify-mfa/page.tsx:25–210

()

    "rounded-2xl border border-white/70 bg-white/72 px-8 py-8 shadow-[0_4px_14px_rgba(15,23,42,0.045),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-8px_18px_rgba(255,255,255,0.12)] backdrop-blur-2xl";

export default function VerifyMfaPage() {
    const router = useRouter();
    const searchParams = useSearchParams();
    const { user, authLoading, signOut } = useAuth();
    const [factors, setFactors] = useState<MfaFactor[]>([]);
    const [selectedFactorId, setSelectedFactorId] = useState("");
    const [code, setCode] = useState("");
    const [loading, setLoading] = useState(true);
    const [verifying, setVerifying] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const nextPath = safeNextPath(searchParams.get("next"));
    const canVerify =
        !loading && !verifying && !!selectedFactorId && code.trim().length === 6;

    useEffect(() => {
        if (authLoading) return;
        if (!user) {
            router.replace("/login");
            return;
        }

        let cancelled = false;

        async function loadMfaState() {
            setLoading(true);
            setError(null);
            setCode("");
            try {
                const required = await needsMfaVerification();
                if (cancelled) return;
                if (!required) {
                    router.replace(nextPath);
                    return;
                }

                const { data, error: factorError } =
                    await supabase.auth.mfa.listFactors();
                if (cancelled) return;
                if (factorError) throw factorError;

                const verified = (data.totp ?? []) as MfaFactor[];
                setFactors(verified);
                setSelectedFactorId(verified[0]?.id ?? "");
                if (verified.length === 0) {
                    setError(
                        "No verified authenticator factor is available for this account.",
                    );
                }
            } catch (loadError) {
                if (cancelled) return;
                setError(
                    loadError instanceof Error
                        ? loadError.message
                        : "Unable to load authenticator verification.",
                );
            } finally {
                if (!cancelled) setLoading(false);