Fix MFA verification error

src/components/auth/MFAChallenge.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
@@ -17,37 +17,23 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
   const { toast } = useToast();
   const [code, setCode] = useState('');
   const [loading, setLoading] = useState(false);
-  const [challengeId, setChallengeId] = useState<string | null>(null);
-
-  // Create MFA challenge on mount
-  useEffect(() => {
-    const createChallenge = async () => {
-      try {
-        const { data, error } = await supabase.auth.mfa.challenge({ factorId });
-        if (error) throw error;
-        setChallengeId(data.id);
-      } catch (error: unknown) {
-        toast({
-          variant: "destructive",
-          title: "MFA Challenge Failed",
-          description: getErrorMessage(error)
-        });
-        onCancel();
-      }
-    };
-
-    createChallenge();
-  }, [factorId, onCancel, toast]);
 
   const handleVerify = async () => {
-    if (code.length !== 6 || !challengeId) return;
+    if (code.length !== 6) return;
 
     setLoading(true);
     try {
+      // Create fresh challenge for each verification attempt
+      const { data: challengeData, error: challengeError } = 
+        await supabase.auth.mfa.challenge({ factorId });
+      
+      if (challengeError) throw challengeError;
+      
+      // Immediately verify with fresh challenge
       const { data, error } = await supabase.auth.mfa.verify({
         factorId,
-        challengeId,
+        challengeId: challengeData.id,
-        code
+        code: code.trim()
       });
 
       if (error) throw error;