feat: Implement modal-based MFA step-up

src/pages/AuthCallback.tsx

@@ -4,18 +4,20 @@ import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { Loader2, CheckCircle2 } from 'lucide-react';
 import { Header } from '@/components/layout/Header';
-import { handlePostAuthFlow } from '@/lib/authService';
+import { handlePostAuthFlow, verifyMfaUpgrade } from '@/lib/authService';
 import type { AuthMethod } from '@/types/auth';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { getErrorMessage } from '@/lib/errorHandler';
+import { MFAStepUpModal } from '@/components/auth/MFAStepUpModal';
 
 export default function AuthCallback() {
   const navigate = useNavigate();
   const { toast } = useToast();
-  const [status, setStatus] = useState<'processing' | 'success' | 'error'>('processing');
+  const [status, setStatus] = useState<'processing' | 'success' | 'error' | 'mfa_required'>('processing');
+  const [mfaFactorId, setMfaFactorId] = useState<string | null>(null);
   const [isRecoveryMode, setIsRecoveryMode] = useState(false);
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -105,9 +107,17 @@ export default function AuthCallback() {
         const result = await handlePostAuthFlow(session, authMethod);
         
         if (result.success && result.data?.shouldRedirect) {
-          console.log('[AuthCallback] Redirecting to:', result.data.redirectTo);
-          navigate(result.data.redirectTo);
-          return;
+          console.log('[AuthCallback] MFA step-up required - showing modal');
+          
+          // Get factor ID and show modal instead of redirecting
+          const { data: factors } = await supabase.auth.mfa.listFactors();
+          const totpFactor = factors?.totp?.find(f => f.status === 'verified');
+          
+          if (totpFactor) {
+            setMfaFactorId(totpFactor.id);
+            setStatus('mfa_required');
+            return;
+          }
         }
 
         setStatus('success');
@@ -146,6 +156,32 @@ export default function AuthCallback() {
     processOAuthCallback();
   }, [navigate, toast]);
 
+  const handleMfaSuccess = async () => {
+    const { data: { session } } = await supabase.auth.getSession();
+    const verification = await verifyMfaUpgrade(session);
+    
+    if (!verification.success) {
+      toast({
+        variant: "destructive",
+        title: "MFA Verification Failed",
+        description: verification.error || "Failed to upgrade session."
+      });
+      await supabase.auth.signOut();
+      navigate('/auth');
+      return;
+    }
+    
+    setMfaFactorId(null);
+    setStatus('success');
+    
+    toast({
+      title: 'Welcome to ThrillWiki!',
+      description: 'You have been signed in successfully.',
+    });
+    
+    setTimeout(() => navigate('/'), 500);
+  };
+
   const handlePasswordReset = async (e: React.FormEvent) => {
     e.preventDefault();
     
@@ -288,6 +324,18 @@ export default function AuthCallback() {
           )}
         </div>
       </main>
+      
+      {status === 'mfa_required' && mfaFactorId && (
+        <MFAStepUpModal
+          open={true}
+          factorId={mfaFactorId}
+          onSuccess={handleMfaSuccess}
+          onCancel={() => {
+            setMfaFactorId(null);
+            navigate('/auth');
+          }}
+        />
+      )}
     </div>
   );
 }