feat: Implement automatic MFA verification modal

src/components/admin/AdminPageLayout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useCallback } from 'react';
 import { AdminLayout } from '@/components/layout/AdminLayout';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
 import { useAdminGuard } from '@/hooks/useAdminGuard';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
@@ -104,15 +104,6 @@ export function AdminPageLayout({
     return null;
   }
 
-  // MFA required
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
-
   // Main content
   return (
     <AdminLayout
@@ -121,13 +112,15 @@ export function AdminPageLayout({
       pollInterval={showRefreshControls ? pollInterval : undefined}
       lastUpdated={showRefreshControls ? (lastUpdated as Date) : undefined}
     >
-      <div className="space-y-6">
+      <MFAGuard>
-        <div>
+        <div className="space-y-6">
-          <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+          <div>
-          <p className="text-muted-foreground mt-1">{description}</p>
+            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+            <p className="text-muted-foreground mt-1">{description}</p>
+          </div>
+          {children}
         </div>
-        {children}
+      </MFAGuard>
-      </div>
     </AdminLayout>
   );
 }

src/components/auth/AutoMFAVerificationModal.tsx

@@ -0,0 +1,106 @@
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { MFAChallenge } from './MFAChallenge';
+import { Shield, AlertCircle, Loader2 } from 'lucide-react';
+import { getEnrolledFactors } from '@/lib/authService';
+import { useAuth } from '@/hooks/useAuth';
+
+interface AutoMFAVerificationModalProps {
+  open: boolean;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+export function AutoMFAVerificationModal({ 
+  open, 
+  onSuccess, 
+  onCancel 
+}: AutoMFAVerificationModalProps) {
+  const { session } = useAuth();
+  const [factorId, setFactorId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch enrolled factor automatically when modal opens
+  useEffect(() => {
+    if (!open || !session) return;
+
+    const fetchFactor = async () => {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        const factors = await getEnrolledFactors();
+        
+        if (factors.length === 0) {
+          setError('No MFA method enrolled. Please set up MFA in settings.');
+          return;
+        }
+        
+        // Use the first verified TOTP factor
+        const totpFactor = factors.find(f => f.factor_type === 'totp');
+        if (totpFactor) {
+          setFactorId(totpFactor.id);
+        } else {
+          setError('No valid MFA method found. Please check your security settings.');
+        }
+      } catch (err) {
+        setError('Failed to load MFA settings. Please try again.');
+        console.error('Failed to fetch MFA factors:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFactor();
+  }, [open, session]);
+
+  return (
+    <Dialog 
+      open={open} 
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          onCancel();
+        }
+      }}
+    >
+      <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" />
+            <DialogTitle>Verification Required</DialogTitle>
+          </div>
+          <DialogDescription className="text-center">
+            Your session requires Multi-Factor Authentication to access this area.
+          </DialogDescription>
+        </DialogHeader>
+        
+        {loading && (
+          <div className="flex flex-col items-center justify-center py-8 space-y-3">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <p className="text-sm text-muted-foreground">Loading verification...</p>
+          </div>
+        )}
+
+        {error && (
+          <div className="flex flex-col items-center justify-center py-6 space-y-3">
+            <AlertCircle className="h-8 w-8 text-destructive" />
+            <p className="text-sm text-center text-muted-foreground">{error}</p>
+          </div>
+        )}
+
+        {!loading && !error && factorId && (
+          <MFAChallenge
+            factorId={factorId}
+            onSuccess={onSuccess}
+            onCancel={onCancel}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/auth/MFAEnrollmentRequired.tsx

@@ -0,0 +1,26 @@
+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 MFAEnrollmentRequired() {
+  const navigate = useNavigate();
+
+  return (
+    <Alert variant="destructive" className="my-4">
+      <Shield className="h-4 w-4" />
+      <AlertTitle>Multi-Factor Authentication Setup Required</AlertTitle>
+      <AlertDescription className="mt-2 space-y-3">
+        <p>
+          Your role requires Multi-Factor Authentication. Please set up MFA to access this area.
+        </p>
+        <Button 
+          onClick={() => navigate('/settings?tab=security')}
+          size="sm"
+        >
+          Set up Multi-Factor Authentication
+        </Button>
+      </AlertDescription>
+    </Alert>
+  );
+}

src/components/auth/MFAGuard.tsx

@@ -0,0 +1,65 @@
+import { useRequireMFA } from '@/hooks/useRequireMFA';
+import { AutoMFAVerificationModal } from './AutoMFAVerificationModal';
+import { MFAEnrollmentRequired } from './MFAEnrollmentRequired';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/use-toast';
+
+interface MFAGuardProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Smart MFA guard that automatically shows verification modal or enrollment alert
+ * 
+ * Usage:
+ * ```tsx
+ * <MFAGuard>
+ *   <YourProtectedContent />
+ * </MFAGuard>
+ * ```
+ */
+export function MFAGuard({ children }: MFAGuardProps) {
+  const { needsEnrollment, needsVerification, loading } = useRequireMFA();
+  const { verifySession } = useAuth();
+  const { toast } = useToast();
+  
+  const handleVerificationSuccess = async () => {
+    // Refresh the session to get updated AAL level
+    await verifySession();
+    
+    toast({
+      title: 'Verification Successful',
+      description: 'You can now access this area.',
+    });
+  };
+
+  const handleVerificationCancel = () => {
+    // Redirect back to main dashboard
+    window.location.href = '/';
+  };
+
+  // Show verification modal automatically when needed
+  if (needsVerification) {
+    return (
+      <>
+        <AutoMFAVerificationModal
+          open={true}
+          onSuccess={handleVerificationSuccess}
+          onCancel={handleVerificationCancel}
+        />
+        {/* Show blurred content behind modal */}
+        <div className="pointer-events-none opacity-50 blur-sm">
+          {children}
+        </div>
+      </>
+    );
+  }
+
+  // Show enrollment alert when user hasn't set up MFA
+  if (needsEnrollment) {
+    return <MFAEnrollmentRequired />;
+  }
+
+  // User has MFA and is verified - show content
+  return <>{children}</>;
+}

src/components/auth/MFARequiredAlert.tsx

@@ -1,49 +0,0 @@
-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';
-import { useAuth } from '@/hooks/useAuth';
-import { useEffect, useState } from 'react';
-
-export function MFARequiredAlert() {
-  const navigate = useNavigate();
-  const { checkAalStepUp } = useAuth();
-  const [needsVerification, setNeedsVerification] = useState(false);
-
-  useEffect(() => {
-    checkAalStepUp().then(result => {
-      setNeedsVerification(result.needsStepUp);
-    });
-  }, [checkAalStepUp]);
-
-  const handleAction = () => {
-    if (needsVerification) {
-      // User has MFA enrolled but needs to verify
-      sessionStorage.setItem('mfa_step_up_required', 'true');
-      navigate('/auth/mfa-step-up');
-    } else {
-      // User needs to enroll in MFA
-      navigate('/settings?tab=security');
-    }
-  };
-
-  return (
-    <Alert variant="destructive" className="my-4">
-      <Shield className="h-4 w-4" />
-      <AlertTitle>Multi-Factor Authentication Required</AlertTitle>
-      <AlertDescription className="mt-2 space-y-3">
-        <p>
-          {needsVerification 
-            ? 'Please verify your identity with Multi-Factor Authentication to access this area.'
-            : 'Your role requires Multi-Factor Authentication to access this area.'}
-        </p>
-        <Button 
-          onClick={handleAction}
-          size="sm"
-        >
-          {needsVerification ? 'Verify Now' : 'Set up Multi-Factor Authentication'}
-        </Button>
-      </AlertDescription>
-    </Alert>
-  );
-}

src/pages/AdminDashboard.tsx

@@ -4,7 +4,7 @@ import { FileText, Flag, AlertCircle, Activity, ShieldAlert } from 'lucide-react
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { useRequireMFA } from '@/hooks/useRequireMFA';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
@@ -158,15 +158,6 @@ export default function AdminDashboard() {
   if (!user || !isModerator()) {
     return null;
   }
-  
-  // MFA enforcement
-  if (needsEnrollment) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   const statCards = [
     {
@@ -200,113 +191,115 @@ export default function AdminDashboard() {
       lastUpdated={lastUpdated ?? undefined}
       isRefreshing={isRefreshing}
     >
-      <div className="space-y-6">
+      <MFAGuard>
-        <div>
+        <div className="space-y-6">
-          <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
+          <div>
-          <p className="text-muted-foreground mt-1">
+            <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
-            Central hub for all moderation activity
+            <p className="text-muted-foreground mt-1">
-          </p>
+              Central hub for all moderation activity
-        </div>
+            </p>
+          </div>
 
-        {/* Security Warning for Suspicious Versions */}
+          {/* Security Warning for Suspicious Versions */}
-        {suspiciousVersionsCount > 0 && (
+          {suspiciousVersionsCount > 0 && (
-          <Alert variant="destructive" className="border-red-500/50 bg-red-500/10">
+            <Alert variant="destructive" className="border-red-500/50 bg-red-500/10">
-            <ShieldAlert className="h-5 w-5" />
+              <ShieldAlert className="h-5 w-5" />
-            <AlertDescription className="ml-2">
+              <AlertDescription className="ml-2">
-              <strong>Security Alert:</strong> {suspiciousVersionsCount} entity version{suspiciousVersionsCount !== 1 ? 's' : ''} detected without user attribution. 
+                <strong>Security Alert:</strong> {suspiciousVersionsCount} entity version{suspiciousVersionsCount !== 1 ? 's' : ''} detected without user attribution. 
-              This may indicate submission flow bypass. Check admin audit logs for details.
+                This may indicate submission flow bypass. Check admin audit logs for details.
-            </AlertDescription>
+              </AlertDescription>
-          </Alert>
+            </Alert>
-        )}
+          )}
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {statCards.map((card) => {
+            {statCards.map((card) => {
-            const Icon = card.icon;
+              const Icon = card.icon;
-            const colorClasses = {
+              const colorClasses = {
-              amber: {
+                amber: {
-                card: 'hover:border-amber-500/50',
+                  card: 'hover:border-amber-500/50',
-                bg: 'bg-amber-500/10',
+                  bg: 'bg-amber-500/10',
-                icon: 'text-amber-600 dark:text-amber-400',
+                  icon: 'text-amber-600 dark:text-amber-400',
-              },
+                },
-              red: {
+                red: {
-                card: 'hover:border-red-500/50',
+                  card: 'hover:border-red-500/50',
-                bg: 'bg-red-500/10',
+                  bg: 'bg-red-500/10',
-                icon: 'text-red-600 dark:text-red-400',
+                  icon: 'text-red-600 dark:text-red-400',
-              },
+                },
-              orange: {
+                orange: {
-                card: 'hover:border-orange-500/50',
+                  card: 'hover:border-orange-500/50',
-                bg: 'bg-orange-500/10',
+                  bg: 'bg-orange-500/10',
-                icon: 'text-orange-600 dark:text-orange-400',
+                  icon: 'text-orange-600 dark:text-orange-400',
-              },
+                },
-            };
+              };
-            const colors = colorClasses[card.color as keyof typeof colorClasses];
+              const colors = colorClasses[card.color as keyof typeof colorClasses];
-            
+              
-            return (
+              return (
-              <Card
+                <Card
-                key={card.label}
+                  key={card.label}
-                className={`${colors.card} transition-colors cursor-pointer`}
+                  className={`${colors.card} transition-colors cursor-pointer`}
-                onClick={() => handleStatCardClick(card.type)}
+                  onClick={() => handleStatCardClick(card.type)}
-              >
+                >
-                <CardContent className="flex items-center justify-between p-6">
+                  <CardContent className="flex items-center justify-between p-6">
-                  <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-4">
-                    <div className={`p-3 ${colors.bg} rounded-lg`}>
+                      <div className={`p-3 ${colors.bg} rounded-lg`}>
-                      <Icon className={`w-5 h-5 ${colors.icon}`} />
+                        <Icon className={`w-5 h-5 ${colors.icon}`} />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">
+                          {card.label}
+                        </p>
+                      </div>
                     </div>
-                    <div>
+                    <div className="text-4xl font-bold">{card.value}</div>
-                      <p className="text-sm font-medium text-muted-foreground">
+                  </CardContent>
-                        {card.label}
+                </Card>
-                      </p>
+              );
-                    </div>
+            })}
-                  </div>
+          </div>
-                  <div className="text-4xl font-bold">{card.value}</div>
+
-                </CardContent>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-              </Card>
+            <TabsList className="grid w-full grid-cols-3 h-auto p-1">
-            );
+              <TabsTrigger value="moderation" className="flex items-center gap-2 py-3">
-          })}
+                <FileText className="w-4 h-4" />
+                <span className="hidden sm:inline">Moderation Queue</span>
+                <span className="sm:hidden">Queue</span>
+                {stats.pendingSubmissions > 0 && (
+                  <Badge variant="secondary" className="ml-1 bg-amber-500/20 text-amber-700 dark:text-amber-300">
+                    {stats.pendingSubmissions}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              <TabsTrigger value="reports" className="flex items-center gap-2 py-3">
+                <Flag className="w-4 h-4" />
+                <span className="hidden sm:inline">Reports</span>
+                <span className="sm:hidden">Reports</span>
+                {stats.openReports > 0 && (
+                  <Badge variant="secondary" className="ml-1 bg-red-500/20 text-red-700 dark:text-red-300">
+                    {stats.openReports}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              <TabsTrigger value="activity" className="flex items-center gap-2 py-3">
+                <Activity className="w-4 h-4" />
+                <span className="hidden sm:inline">Recent Activity</span>
+                <span className="sm:hidden">Activity</span>
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="moderation" className="mt-6" forceMount={true} hidden={activeTab !== 'moderation'}>
+              <ModerationQueue ref={moderationQueueRef} optimisticallyUpdateStats={optimisticallyUpdateStats} />
+            </TabsContent>
+
+            <TabsContent value="reports" className="mt-6" forceMount={true} hidden={activeTab !== 'reports'}>
+              <ReportsQueue ref={reportsQueueRef} />
+            </TabsContent>
+
+            <TabsContent value="activity" className="mt-6" forceMount={true} hidden={activeTab !== 'activity'}>
+              <RecentActivity ref={recentActivityRef} />
+            </TabsContent>
+          </Tabs>
         </div>
-
+      </MFAGuard>
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-3 h-auto p-1">
-            <TabsTrigger value="moderation" className="flex items-center gap-2 py-3">
-              <FileText className="w-4 h-4" />
-              <span className="hidden sm:inline">Moderation Queue</span>
-              <span className="sm:hidden">Queue</span>
-              {stats.pendingSubmissions > 0 && (
-                <Badge variant="secondary" className="ml-1 bg-amber-500/20 text-amber-700 dark:text-amber-300">
-                  {stats.pendingSubmissions}
-                </Badge>
-              )}
-            </TabsTrigger>
-            <TabsTrigger value="reports" className="flex items-center gap-2 py-3">
-              <Flag className="w-4 h-4" />
-              <span className="hidden sm:inline">Reports</span>
-              <span className="sm:hidden">Reports</span>
-              {stats.openReports > 0 && (
-                <Badge variant="secondary" className="ml-1 bg-red-500/20 text-red-700 dark:text-red-300">
-                  {stats.openReports}
-                </Badge>
-              )}
-            </TabsTrigger>
-            <TabsTrigger value="activity" className="flex items-center gap-2 py-3">
-              <Activity className="w-4 h-4" />
-              <span className="hidden sm:inline">Recent Activity</span>
-              <span className="sm:hidden">Activity</span>
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="moderation" className="mt-6" forceMount={true} hidden={activeTab !== 'moderation'}>
-            <ModerationQueue ref={moderationQueueRef} optimisticallyUpdateStats={optimisticallyUpdateStats} />
-          </TabsContent>
-
-          <TabsContent value="reports" className="mt-6" forceMount={true} hidden={activeTab !== 'reports'}>
-            <ReportsQueue ref={reportsQueueRef} />
-          </TabsContent>
-
-          <TabsContent value="activity" className="mt-6" forceMount={true} hidden={activeTab !== 'activity'}>
-            <RecentActivity ref={recentActivityRef} />
-          </TabsContent>
-        </Tabs>
-      </div>
     </AdminLayout>
   );
 }

src/pages/AdminModeration.tsx

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react';
 import { useAdminGuard } from '@/hooks/useAdminGuard';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
 import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
@@ -56,14 +56,6 @@ export default function AdminModeration() {
   if (!isAuthorized) {
     return null;
   }
-  
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   return (
     <AdminLayout
@@ -72,16 +64,18 @@ export default function AdminModeration() {
       pollInterval={pollInterval}
       lastUpdated={lastUpdated ?? undefined}
     >
-      <div className="space-y-6">
+      <MFAGuard>
-        <div>
+        <div className="space-y-6">
-          <h1 className="text-2xl font-bold tracking-tight">Moderation Queue</h1>
+          <div>
-          <p className="text-muted-foreground mt-1">
+            <h1 className="text-2xl font-bold tracking-tight">Moderation Queue</h1>
-            Review and manage pending content submissions
+            <p className="text-muted-foreground mt-1">
-          </p>
+              Review and manage pending content submissions
-        </div>
+            </p>
+          </div>
 
-        <ModerationQueue ref={moderationQueueRef} />
+          <ModerationQueue ref={moderationQueueRef} />
-      </div>
+        </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }

src/pages/AdminReports.tsx

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react';
 import { useAdminGuard } from '@/hooks/useAdminGuard';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
 import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
@@ -57,14 +57,6 @@ export default function AdminReports() {
   if (!isAuthorized) {
     return null;
   }
-  
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   return (
     <AdminLayout
@@ -73,16 +65,18 @@ export default function AdminReports() {
       pollInterval={pollInterval}
       lastUpdated={lastUpdated ?? undefined}
     >
-      <div className="space-y-6">
+      <MFAGuard>
-        <div>
+        <div className="space-y-6">
-          <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
+          <div>
-          <p className="text-muted-foreground mt-1">
+            <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
-            Review and resolve user-submitted reports
+            <p className="text-muted-foreground mt-1">
-          </p>
+              Review and resolve user-submitted reports
-        </div>
+            </p>
+          </div>
 
-        <ReportsQueue ref={reportsQueueRef} />
+          <ReportsQueue ref={reportsQueueRef} />
-      </div>
+        </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }

src/pages/AdminUsers.tsx

@@ -1,5 +1,5 @@
 import { useAdminGuard } from '@/hooks/useAdminGuard';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { UserManagement } from '@/components/admin/UserManagement';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -43,27 +43,21 @@ export default function AdminUsers() {
   if (!isAuthorized) {
     return null;
   }
-  
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   return (
     <AdminLayout>
-      <div className="space-y-6">
+      <MFAGuard>
-        <div>
+        <div className="space-y-6">
-          <h1 className="text-2xl font-bold tracking-tight">User Management</h1>
+          <div>
-          <p className="text-muted-foreground mt-1">
+            <h1 className="text-2xl font-bold tracking-tight">User Management</h1>
-            Manage user profiles, roles, and permissions
+            <p className="text-muted-foreground mt-1">
-          </p>
+              Manage user profiles, roles, and permissions
-        </div>
+            </p>
+          </div>
 
-        <UserManagement />
+          <UserManagement />
-      </div>
+        </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }