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}