mirror of https://github.com/kortix-ai/suna.git
refactor(auth): remove AALChecker and AALStatusDisplay components
This commit is contained in:
sharath
parent
0765c728ae
commit
7010de6c2c
|
|
@ -1,144 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { useGetAAL } from '@/hooks/react-query/phone-verification';
|
|
||||||
import { useAuth } from '@/components/AuthProvider';
|
|
||||||
import { Loader2 } from 'lucide-react';
|
|
||||||
|
|
||||||
interface AALCheckerProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
redirectTo?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* AALChecker component that validates MFA requirements after authentication.
|
|
||||||
*
|
|
||||||
* This component follows the standard Supabase AAL flow AND enforces phone verification
|
|
||||||
* requirements for new users (created after cutoff date):
|
|
||||||
*
|
|
||||||
* For new users:
|
|
||||||
* - If no MFA enrolled: Force phone verification enrollment
|
|
||||||
* - If MFA enrolled but not verified: Redirect to verification
|
|
||||||
* - If MFA verified: Allow access
|
|
||||||
*
|
|
||||||
* For existing users (grandfathered):
|
|
||||||
* - Follow standard AAL flow without forcing enrollment
|
|
||||||
* - aal1 -> aal1: Allow access (optional MFA)
|
|
||||||
* - aal1 -> aal2: Redirect to verification
|
|
||||||
* - aal2 -> aal2: Allow access
|
|
||||||
* - aal2 -> aal1: Force reauthentication
|
|
||||||
*/
|
|
||||||
export function AALChecker({ children, redirectTo = '/auth/phone-verification' }: AALCheckerProps) {
|
|
||||||
const { user, isLoading: authLoading } = useAuth();
|
|
||||||
const { data: aalData, isLoading: aalLoading, error: aalError } = useGetAAL();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Only check AAL if user is authenticated and AAL data is available
|
|
||||||
if (!authLoading && user && aalData && !aalLoading) {
|
|
||||||
const { action_required, current_level, next_level, verification_required } = aalData;
|
|
||||||
|
|
||||||
console.log('AAL Check:', {
|
|
||||||
action_required,
|
|
||||||
current_level,
|
|
||||||
next_level,
|
|
||||||
phone_verification_required: verification_required,
|
|
||||||
message: aalData.message
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle new users who need phone verification
|
|
||||||
if (verification_required) {
|
|
||||||
if (current_level === "aal1" && next_level === "aal1") {
|
|
||||||
// New user has no MFA enrolled - force enrollment
|
|
||||||
console.log('New user without MFA enrolled, redirecting to phone verification:', redirectTo);
|
|
||||||
router.push(redirectTo);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// If new user has MFA enrolled, follow standard AAL flow below
|
|
||||||
}
|
|
||||||
|
|
||||||
// Standard AAL flow (for all users)
|
|
||||||
switch (action_required) {
|
|
||||||
case 'verify_mfa':
|
|
||||||
// User has MFA enrolled but needs to verify it
|
|
||||||
console.log('Redirecting to MFA verification:', redirectTo);
|
|
||||||
router.push(redirectTo);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'reauthenticate':
|
|
||||||
// User has stale JWT due to MFA changes, force reauthentication
|
|
||||||
console.log('MFA state changed, forcing reauthentication');
|
|
||||||
router.push('/auth?message=Please sign in again due to security changes');
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'none':
|
|
||||||
// No action required, user can proceed
|
|
||||||
console.log('AAL check passed, no action required');
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'unknown':
|
|
||||||
default:
|
|
||||||
// Unknown AAL state, log and allow access (fail open)
|
|
||||||
console.warn('Unknown AAL state:', { current_level, next_level, action_required });
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [user, authLoading, aalData, aalLoading, router, redirectTo]);
|
|
||||||
|
|
||||||
// Show loading while checking authentication or AAL status
|
|
||||||
if (authLoading || (user && aalLoading)) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
||||||
<span className="ml-2 text-sm text-muted-foreground">Checking authentication...</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If not authenticated, don't render children (let auth redirect handle it)
|
|
||||||
if (!user) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If AAL check failed, allow access (fail open for UX)
|
|
||||||
if (aalError) {
|
|
||||||
console.error('AAL check failed:', aalError);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if new user needs phone verification enrollment
|
|
||||||
if (aalData?.verification_required &&
|
|
||||||
aalData?.current_level === "aal1" &&
|
|
||||||
aalData?.next_level === "aal1") {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
||||||
<span className="ml-2 text-sm text-muted-foreground">Setting up required verification...</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If AAL check indicates MFA verification is needed, don't render children
|
|
||||||
// (the useEffect above will handle the redirect)
|
|
||||||
if (aalData?.action_required === 'verify_mfa') {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
||||||
<span className="ml-2 text-sm text-muted-foreground">Redirecting to verification...</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If AAL check indicates reauthentication is needed, don't render children
|
|
||||||
if (aalData?.action_required === 'reauthenticate') {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
||||||
<span className="ml-2 text-sm text-muted-foreground">Redirecting to sign in...</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// AAL check passed or no action required, render children
|
|
||||||
return <>{children}</>;
|
|
||||||
}
|
|
||||||
|
|
@ -1,222 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useGetAAL } from '@/hooks/react-query/phone-verification';
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
||||||
import { Loader2, Shield, ShieldAlert, ShieldCheck, ShieldX, Phone } from 'lucide-react';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* AALStatusDisplay component shows the current AAL status and what action is required.
|
|
||||||
* Useful for debugging and understanding the MFA flow.
|
|
||||||
*/
|
|
||||||
export function AALStatusDisplay() {
|
|
||||||
const { data: aalData, isLoading: aalLoading, error: aalError } = useGetAAL();
|
|
||||||
|
|
||||||
if (aalLoading) {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<Shield className="w-5 h-5" />
|
|
||||||
MFA Status
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Loader2 className="w-4 h-4 animate-spin" />
|
|
||||||
<span>Checking MFA status...</span>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (aalError) {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<ShieldX className="w-5 h-5 text-red-500" />
|
|
||||||
MFA Status Error
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Alert variant="destructive">
|
|
||||||
<AlertDescription>
|
|
||||||
Failed to check MFA status: {aalError instanceof Error ? aalError?.message : 'Unknown error'}
|
|
||||||
</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!aalData) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getStatusIcon = () => {
|
|
||||||
// Check if new user needs phone verification enrollment
|
|
||||||
if (aalData?.phone_verification_required &&
|
|
||||||
aalData.current_level === "aal1" &&
|
|
||||||
aalData.next_level === "aal1") {
|
|
||||||
return <Phone className="w-5 h-5 text-orange-500" />;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (aalData?.action_required) {
|
|
||||||
case 'none':
|
|
||||||
return <ShieldCheck className="w-5 h-5 text-green-500" />;
|
|
||||||
case 'verify_mfa':
|
|
||||||
return <ShieldAlert className="w-5 h-5 text-yellow-500" />;
|
|
||||||
case 'reauthenticate':
|
|
||||||
return <ShieldX className="w-5 h-5 text-red-500" />;
|
|
||||||
default:
|
|
||||||
return <Shield className="w-5 h-5 text-gray-500" />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusColor = () => {
|
|
||||||
// Check if new user needs phone verification enrollment
|
|
||||||
if (aalData?.phone_verification_required &&
|
|
||||||
aalData.current_level === "aal1" &&
|
|
||||||
aalData.next_level === "aal1") {
|
|
||||||
return 'bg-orange-100 text-orange-800';
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (aalData?.action_required) {
|
|
||||||
case 'none':
|
|
||||||
return 'bg-green-100 text-green-800';
|
|
||||||
case 'verify_mfa':
|
|
||||||
return 'bg-yellow-100 text-yellow-800';
|
|
||||||
case 'reauthenticate':
|
|
||||||
return 'bg-red-100 text-red-800';
|
|
||||||
default:
|
|
||||||
return 'bg-gray-100 text-gray-800';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getActionDescription = () => {
|
|
||||||
const current = aalData?.current_level;
|
|
||||||
const next = aalData?.next_level;
|
|
||||||
const isNewUser = aalData?.phone_verification_required;
|
|
||||||
|
|
||||||
if (current === 'aal1' && next === 'aal1') {
|
|
||||||
if (isNewUser) {
|
|
||||||
return 'As a new user, you are required to set up phone verification for enhanced security.';
|
|
||||||
} else {
|
|
||||||
return 'MFA is not enrolled for this account. You can optionally set up MFA for enhanced security.';
|
|
||||||
}
|
|
||||||
} else if (current === 'aal1' && next === 'aal2') {
|
|
||||||
return 'MFA is enrolled but not verified. Please complete MFA verification to access all features.';
|
|
||||||
} else if (current === 'aal2' && next === 'aal2') {
|
|
||||||
return 'MFA is fully verified and active. Your account has enhanced security.';
|
|
||||||
} else if (current === 'aal2' && next === 'aal1') {
|
|
||||||
return 'MFA settings have changed. Please sign in again to refresh your session.';
|
|
||||||
} else {
|
|
||||||
return `Unknown AAL combination: ${current} → ${next}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getEffectiveAction = () => {
|
|
||||||
// Check if new user needs phone verification enrollment
|
|
||||||
if (aalData?.phone_verification_required &&
|
|
||||||
aalData.current_level === "aal1" &&
|
|
||||||
aalData.next_level === "aal1") {
|
|
||||||
return 'ENROLL MFA';
|
|
||||||
}
|
|
||||||
|
|
||||||
return aalData?.action_required?.replace('_', ' ').toUpperCase() || 'UNKNOWN';
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
{getStatusIcon()}
|
|
||||||
Multi-Factor Authentication Status
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Current security level and required actions
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium text-gray-600">Current Level</label>
|
|
||||||
<Badge variant="outline" className="ml-2">
|
|
||||||
{aalData.current_level?.toUpperCase() || 'Unknown'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium text-gray-600">Next Level</label>
|
|
||||||
<Badge variant="outline" className="ml-2">
|
|
||||||
{aalData.next_level?.toUpperCase() || 'Unknown'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium text-gray-600">Action Required</label>
|
|
||||||
<Badge className={`ml-2 ${getStatusColor()}`}>
|
|
||||||
{getEffectiveAction()}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium text-gray-600">User Type</label>
|
|
||||||
<Badge variant="outline" className="ml-2">
|
|
||||||
{aalData?.phone_verification_required ? 'NEW USER' : 'EXISTING USER'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{aalData && (
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium text-gray-600">Phone Verification Required</label>
|
|
||||||
<Badge
|
|
||||||
variant={aalData.phone_verification_required ? "destructive" : "secondary"}
|
|
||||||
className="ml-2"
|
|
||||||
>
|
|
||||||
{aalData.phone_verification_required ? 'YES' : 'NO'}
|
|
||||||
</Badge>
|
|
||||||
{aalData.user_created_at && (
|
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
|
||||||
Account created: {new Date(aalData.user_created_at).toLocaleDateString()}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{aalData.current_authentication_methods && aalData.current_authentication_methods.length > 0 && (
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium text-gray-600">Authentication Methods</label>
|
|
||||||
<div className="flex flex-wrap gap-1 mt-1">
|
|
||||||
{aalData.current_authentication_methods.map((method, index) => (
|
|
||||||
<Badge key={index} variant="secondary" className="text-xs">
|
|
||||||
{method}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Alert>
|
|
||||||
<AlertDescription>
|
|
||||||
{aalData.message || getActionDescription()}
|
|
||||||
</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
|
|
||||||
<div className="text-xs text-gray-500 bg-gray-50 p-3 rounded">
|
|
||||||
<strong>AAL Flow Reference:</strong>
|
|
||||||
<ul className="mt-1 space-y-1">
|
|
||||||
<li>• aal1 → aal1: No MFA enrolled{aalData?.phone_verification_required ? ' (new users must enroll)' : ' (optional for existing users)'}</li>
|
|
||||||
<li>• aal1 → aal2: MFA enrolled, verification required</li>
|
|
||||||
<li>• aal2 → aal2: MFA verified and active</li>
|
|
||||||
<li>• aal2 → aal1: MFA disabled, reauthentication needed</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue