Fix: Implement RLS policies for MFA

src/components/auth/MFAChallenge.tsx

@@ -10,11 +10,13 @@ import { Shield, AlertCircle } from 'lucide-react';
 
 interface MFAChallengeProps {
   factorId: string;
+  challengeId?: string | null;
+  userId?: string | null;
   onSuccess: () => void;
   onCancel: () => void;
 }
 
-export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProps) {
+export function MFAChallenge({ factorId, challengeId, userId, onSuccess, onCancel }: MFAChallengeProps) {
   const { toast } = useToast();
   const [code, setCode] = useState('');
   const [loading, setLoading] = useState(false);
@@ -24,6 +26,38 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
 
     setLoading(true);
     try {
+      // NEW SERVER-SIDE FLOW: If we have challengeId and userId, use edge function
+      if (challengeId && userId) {
+        const { data: result, error: verifyError } = await supabase.functions.invoke(
+          'verify-mfa-and-login',
+          {
+            body: {
+              challengeId,
+              factorId,
+              code: code.trim(),
+              userId,
+            },
+          }
+        );
+
+        if (verifyError || result.error) {
+          throw new Error(result?.error || verifyError?.message || 'Verification failed');
+        }
+
+        // Set the session in Supabase client
+        if (result.session) {
+          await supabase.auth.setSession(result.session);
+        }
+
+        toast({
+          title: "Welcome back!",
+          description: "MFA verification successful."
+        });
+        onSuccess();
+        return;
+      }
+
+      // OLD FLOW: For OAuth/Magic Link step-up (existing session)
       // Create fresh challenge for each verification attempt
       const { data: challengeData, error: challengeError } = 
         await supabase.auth.mfa.challenge({ factorId });