Fix error handling

src/components/auth/AutoMFAVerificationModal.tsx

@@ -4,6 +4,7 @@ import { MFAChallenge } from './MFAChallenge';
 import { Shield, AlertCircle, Loader2 } from 'lucide-react';
 import { getEnrolledFactors } from '@/lib/authService';
 import { useAuth } from '@/hooks/useAuth';
+import { handleError } from '@/lib/errorHandler';
 
 interface AutoMFAVerificationModalProps {
   open: boolean;
@@ -46,7 +47,10 @@ export function AutoMFAVerificationModal({
         }
       } catch (err) {
         setError('Failed to load MFA settings. Please try again.');
-        console.error('Failed to fetch MFA factors:', err);
+        handleError(err, {
+          action: 'Fetch MFA Factors for Auto-Verification',
+          metadata: { context: 'AutoMFAVerificationModal' }
+        });
       } finally {
         setLoading(false);
       }

src/components/auth/MFAChallenge.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { supabase } from "@/lib/supabaseClient";
 import { useToast } from "@/hooks/use-toast";
-import { getErrorMessage } from "@/lib/errorHandler";
+import { handleError } from "@/lib/errorHandler";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
@@ -45,10 +45,13 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
         onSuccess();
       }
     } catch (error: unknown) {
-      toast({
-        variant: "destructive",
-        title: "Verification Failed",
-        description: getErrorMessage(error) || "Invalid code. Please try again.",
+      handleError(error, {
+        action: 'MFA Verification',
+        metadata: { 
+          factorId, 
+          codeLength: code.length,
+          context: 'MFAChallenge'
+        }
       });
       setCode("");
     } finally {

src/components/auth/MFAGuard.tsx

@@ -3,6 +3,7 @@ import { AutoMFAVerificationModal } from './AutoMFAVerificationModal';
 import { MFAEnrollmentRequired } from './MFAEnrollmentRequired';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/hooks/use-toast';
+import { handleError } from '@/lib/errorHandler';
 
 interface MFAGuardProps {
   children: React.ReactNode;
@@ -24,13 +25,21 @@ export function MFAGuard({ children }: MFAGuardProps) {
   const { toast } = useToast();
   
   const handleVerificationSuccess = async () => {
-    // Refresh the session to get updated AAL level
-    await verifySession();
-    
-    toast({
-      title: 'Verification Successful',
-      description: 'You can now access this area.',
-    });
+    try {
+      // Refresh the session to get updated AAL level
+      await verifySession();
+      
+      toast({
+        title: 'Verification Successful',
+        description: 'You can now access this area.',
+      });
+    } catch (error: unknown) {
+      handleError(error, {
+        action: 'MFA Session Verification',
+        metadata: { context: 'MFAGuard' }
+      });
+      // Still attempt to show content - session might be valid despite refresh error
+    }
   };
 
   const handleVerificationCancel = () => {