Refactor: Implement full authentication overhaul

src/hooks/useRequireMFA.ts

@@ -1,21 +1,45 @@
 import { useAuth } from './useAuth';
 import { useUserRole } from './useUserRole';
+import { useEffect, useState } from 'react';
+import { getEnrolledFactors } from '@/lib/authService';
 
 export function useRequireMFA() {
-  const { aal } = useAuth();
-  const { isModerator, isAdmin, loading } = useUserRole();
+  const { aal, session } = useAuth();
+  const { isModerator, isAdmin, loading: roleLoading } = useUserRole();
+  const [isEnrolled, setIsEnrolled] = useState(false);
+  const [loading, setLoading] = useState(true);
+  
+  // Check actual enrollment status
+  useEffect(() => {
+    const checkEnrollment = async () => {
+      if (!session) {
+        setIsEnrolled(false);
+        setLoading(false);
+        return;
+      }
+      
+      const factors = await getEnrolledFactors();
+      setIsEnrolled(factors.length > 0);
+      setLoading(false);
+    };
+    
+    if (!roleLoading) {
+      checkEnrollment();
+    }
+  }, [session, roleLoading]);
   
   // MFA is required for moderators and admins
   const requiresMFA = isModerator() || isAdmin();
   
-  // User has MFA if they have AAL2
-  const hasMFA = aal === 'aal2';
+  // User has MFA if they have AAL2 AND have enrolled factors
+  const hasMFA = aal === 'aal2' && isEnrolled;
   
   return {
     requiresMFA,
     hasMFA,
-    needsEnrollment: requiresMFA && !hasMFA,
+    isEnrolled,
+    needsEnrollment: requiresMFA && !isEnrolled,
     aal,
-    loading,
+    loading: loading || roleLoading,
   };
 }