Fix: Implement MFA security fix

src/components/auth/MFAChallenge.tsx

@@ -5,7 +5,8 @@ import { getErrorMessage } from '@/lib/errorHandler';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
-import { Shield } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Shield, AlertCircle } from 'lucide-react';
 
 interface MFAChallengeProps {
   factorId: string;
@@ -59,6 +60,14 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
 
   return (
     <div className="space-y-4">
+      <Alert className="border-destructive/50 text-destructive dark:border-destructive dark:text-destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Security Verification Required</AlertTitle>
+        <AlertDescription>
+          Cancelling will sign you out completely. Two-factor authentication must be completed to access your account.
+        </AlertDescription>
+      </Alert>
+      
       <div className="flex items-center gap-2 text-primary">
         <Shield className="w-5 h-5" />
         <h3 className="font-semibold">Two-Factor Authentication</h3>
@@ -96,7 +105,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
           className="flex-1"
           disabled={loading}
         >
-          Cancel
+          Cancel & Sign Out
         </Button>
         <Button
           onClick={handleVerify}

src/components/auth/MFAStepUpModal.tsx

@@ -12,7 +12,11 @@ interface MFAStepUpModalProps {
 export function MFAStepUpModal({ open, factorId, onSuccess, onCancel }: MFAStepUpModalProps) {
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onCancel()}>
-      <DialogContent className="sm:max-w-md" onInteractOutside={(e) => e.preventDefault()}>
+      <DialogContent 
+        className="sm:max-w-md" 
+        onInteractOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
         <DialogHeader>
           <div className="flex items-center gap-2 justify-center mb-2">
             <Shield className="h-6 w-6 text-primary" />