feat: Implement MFA Challenge Support

src/pages/Auth.tsx

@@ -15,6 +15,8 @@ import { useToast } from '@/hooks/use-toast';
 import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha';
 import { notificationService } from '@/lib/notificationService';
 import { StorageWarning } from '@/components/auth/StorageWarning';
+import { MFAChallenge } from '@/components/auth/MFAChallenge';
+
 export default function Auth() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -28,6 +30,7 @@ export default function Auth() {
   const [captchaKey, setCaptchaKey] = useState(0);
   const [signInCaptchaToken, setSignInCaptchaToken] = useState<string | null>(null);
   const [signInCaptchaKey, setSignInCaptchaKey] = useState(0);
+  const [mfaFactorId, setMfaFactorId] = useState<string | null>(null);
   const [formData, setFormData] = useState({
     email: '',
     password: '',
@@ -88,6 +91,18 @@ export default function Auth() {
       });
       
       if (error) throw error;
+
+      // Check if MFA is required (user exists but no session)
+      if (data.user && !data.session) {
+        console.log('[Auth] MFA required');
+        const totpFactor = data.user.factors?.find(f => f.factor_type === 'totp' && f.status === 'verified');
+        
+        if (totpFactor) {
+          setMfaFactorId(totpFactor.id);
+          setLoading(false);
+          return;
+        }
+      }
       
       console.log('[Auth] Sign in successful', {
         user: data.user?.email,
@@ -139,6 +154,19 @@ export default function Auth() {
       setLoading(false);
     }
   };
+
+  const handleMfaSuccess = () => {
+    setMfaFactorId(null);
+    toast({
+      title: "Welcome back!",
+      description: "You've been signed in successfully."
+    });
+  };
+
+  const handleMfaCancel = () => {
+    setMfaFactorId(null);
+    setSignInCaptchaKey(prev => prev + 1);
+  };
   const handleSignUp = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -324,7 +352,15 @@ export default function Auth() {
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <form onSubmit={handleSignIn} className="space-y-4">
+                  {mfaFactorId ? (
+                    <MFAChallenge
+                      factorId={mfaFactorId}
+                      onSuccess={handleMfaSuccess}
+                      onCancel={handleMfaCancel}
+                    />
+                  ) : (
+                    <>
+                      <form onSubmit={handleSignIn} className="space-y-4">
                     <div className="space-y-2">
                       <Label htmlFor="signin-email">Email</Label>
                       <div className="relative">
@@ -419,6 +455,8 @@ export default function Auth() {
                       </Button>
                     </div>
                   </div>
+                    </>
+                  )}
                 </CardContent>
               </TabsContent>