Implement MFA Enforcement

src/components/auth/MFARequiredAlert.tsx

@@ -0,0 +1,24 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Shield } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+export function MFARequiredAlert() {
+  const navigate = useNavigate();
+
+  return (
+    <Alert variant="destructive" className="my-4">
+      <Shield className="h-4 w-4" />
+      <AlertTitle>Two-Factor Authentication Required</AlertTitle>
+      <AlertDescription className="mt-2 space-y-3">
+        <p>Your role requires two-factor authentication to access this area.</p>
+        <Button 
+          onClick={() => navigate('/settings?tab=security')}
+          size="sm"
+        >
+          Set up MFA
+        </Button>
+      </AlertDescription>
+    </Alert>
+  );
+}

src/components/auth/TOTPSetup.tsx

@@ -113,16 +113,14 @@ export function TOTPSetup() {
 
       toast({
         title: 'TOTP Enabled',
-        description: 'Two-factor authentication has been successfully enabled for your account.'
+        description: 'Please sign in again to activate MFA protection.'
       });
 
-      // Reset state and refresh factors
-      setEnrolling(false);
-      setQrCode('');
-      setSecret('');
-      setFactorId('');
-      setVerificationCode('');
-      fetchTOTPFactors();
+      // Force sign out to get new session with AAL2
+      setTimeout(async () => {
+        await supabase.auth.signOut();
+        window.location.href = '/auth';
+      }, 2000);
     } catch (error: any) {
       toast({
         title: 'Error',