mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 14:51:13 -05:00
315 lines
10 KiB
TypeScript
315 lines
10 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { Smartphone, Shield, Copy, Eye, EyeOff, Trash2 } from 'lucide-react';
|
|
import { MFARemovalDialog } from './MFARemovalDialog';
|
|
|
|
interface TOTPFactor {
|
|
id: string;
|
|
friendly_name?: string;
|
|
factor_type: string;
|
|
status: string;
|
|
created_at: string;
|
|
}
|
|
|
|
export function TOTPSetup() {
|
|
const { user } = useAuth();
|
|
const { toast } = useToast();
|
|
const [factors, setFactors] = useState<TOTPFactor[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [enrolling, setEnrolling] = useState(false);
|
|
const [qrCode, setQrCode] = useState('');
|
|
const [secret, setSecret] = useState('');
|
|
const [factorId, setFactorId] = useState('');
|
|
const [verificationCode, setVerificationCode] = useState('');
|
|
const [showSecret, setShowSecret] = useState(false);
|
|
const [showRemovalDialog, setShowRemovalDialog] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchTOTPFactors();
|
|
}, [user]);
|
|
|
|
const fetchTOTPFactors = async () => {
|
|
if (!user) return;
|
|
|
|
try {
|
|
const { data, error } = await supabase.auth.mfa.listFactors();
|
|
if (error) throw error;
|
|
|
|
const totpFactors = (data.totp || []).map(factor => ({
|
|
id: factor.id,
|
|
friendly_name: factor.friendly_name || 'Authenticator App',
|
|
factor_type: factor.factor_type || 'totp',
|
|
status: factor.status,
|
|
created_at: factor.created_at
|
|
}));
|
|
setFactors(totpFactors);
|
|
} catch (error: any) {
|
|
console.error('Error fetching TOTP factors:', error);
|
|
}
|
|
};
|
|
|
|
const startEnrollment = async () => {
|
|
if (!user) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
const { data, error } = await supabase.auth.mfa.enroll({
|
|
factorType: 'totp',
|
|
friendlyName: 'Authenticator App'
|
|
});
|
|
|
|
if (error) throw error;
|
|
|
|
setQrCode(data.totp.qr_code);
|
|
setSecret(data.totp.secret);
|
|
setFactorId(data.id);
|
|
setEnrolling(true);
|
|
} catch (error: any) {
|
|
toast({
|
|
title: 'Error',
|
|
description: error.message || 'Failed to start TOTP enrollment',
|
|
variant: 'destructive'
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const verifyAndEnable = async () => {
|
|
if (!factorId || !verificationCode.trim()) {
|
|
toast({
|
|
title: 'Error',
|
|
description: 'Please enter the verification code',
|
|
variant: 'destructive'
|
|
});
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
// Step 1: Create a challenge first
|
|
const { data: challengeData, error: challengeError } = await supabase.auth.mfa.challenge({
|
|
factorId
|
|
});
|
|
|
|
if (challengeError) throw challengeError;
|
|
|
|
// Step 2: Verify using the challengeId from the challenge response
|
|
const { error: verifyError } = await supabase.auth.mfa.verify({
|
|
factorId,
|
|
challengeId: challengeData.id,
|
|
code: verificationCode.trim()
|
|
});
|
|
|
|
if (verifyError) throw verifyError;
|
|
|
|
// Check if user signed in via OAuth
|
|
const { data: { session } } = await supabase.auth.getSession();
|
|
const provider = session?.user?.app_metadata?.provider;
|
|
const isOAuthUser = provider === 'google' || provider === 'discord';
|
|
|
|
toast({
|
|
title: 'TOTP Enabled',
|
|
description: isOAuthUser
|
|
? 'Please verify with your authenticator code to continue.'
|
|
: 'Please sign in again to activate MFA protection.'
|
|
});
|
|
|
|
if (isOAuthUser) {
|
|
// For OAuth users, trigger step-up flow immediately
|
|
setTimeout(() => {
|
|
sessionStorage.setItem('mfa_step_up_required', 'true');
|
|
window.location.href = '/auth/mfa-step-up';
|
|
}, 1500);
|
|
} else {
|
|
// For email/password users, force sign out to require MFA on next login
|
|
setTimeout(async () => {
|
|
await supabase.auth.signOut();
|
|
window.location.href = '/auth';
|
|
}, 2000);
|
|
}
|
|
} catch (error: any) {
|
|
toast({
|
|
title: 'Error',
|
|
description: error.message || 'Invalid verification code. Please try again.',
|
|
variant: 'destructive'
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRemovalSuccess = async () => {
|
|
await fetchTOTPFactors();
|
|
};
|
|
|
|
const copySecret = () => {
|
|
navigator.clipboard.writeText(secret);
|
|
toast({
|
|
title: 'Copied',
|
|
description: 'Secret key copied to clipboard'
|
|
});
|
|
};
|
|
|
|
const cancelEnrollment = () => {
|
|
setEnrolling(false);
|
|
setQrCode('');
|
|
setSecret('');
|
|
setFactorId('');
|
|
setVerificationCode('');
|
|
};
|
|
|
|
const activeFactor = factors.find(f => f.status === 'verified');
|
|
|
|
if (enrolling) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Smartphone className="w-5 h-5" />
|
|
Set Up Authenticator App
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Scan the QR code with your authenticator app, then enter the verification code below.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* QR Code */}
|
|
<div className="flex justify-center">
|
|
<div className="p-4 bg-white rounded-lg border">
|
|
<img src={qrCode} alt="TOTP QR Code" className="w-48 h-48" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Manual Entry */}
|
|
<div className="space-y-2">
|
|
<Label>Can't scan? Enter this key manually:</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
value={secret}
|
|
readOnly
|
|
type={showSecret ? 'text' : 'password'}
|
|
className="font-mono text-sm"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowSecret(!showSecret)}
|
|
>
|
|
{showSecret ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={copySecret}>
|
|
<Copy className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verification */}
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="verificationCode">Enter verification code from your app:</Label>
|
|
<Input
|
|
id="verificationCode"
|
|
value={verificationCode}
|
|
onChange={(e) => setVerificationCode(e.target.value)}
|
|
placeholder="000000"
|
|
maxLength={6}
|
|
className="text-center text-lg tracking-widest font-mono"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2 justify-end">
|
|
<Button variant="outline" onClick={cancelEnrollment}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={verifyAndEnable} disabled={loading || !verificationCode.trim()}>
|
|
{loading ? 'Verifying...' : 'Enable TOTP'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardDescription>
|
|
Add an extra layer of security to your account with two-factor authentication.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{activeFactor ? (
|
|
<div className="space-y-4">
|
|
<Alert>
|
|
<Shield className="w-4 h-4" />
|
|
<AlertDescription>
|
|
Two-factor authentication is enabled for your account. You'll be prompted for a verification code when signing in.
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className="flex items-center justify-between p-4 border rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-green-50 dark:bg-green-950 rounded-full flex items-center justify-center">
|
|
<Smartphone className="w-4 h-4 text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">{activeFactor.friendly_name || 'Authenticator App'}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Enabled {new Date(activeFactor.created_at).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-300">
|
|
Active
|
|
</Badge>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowRemovalDialog(true)}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
Disable
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<MFARemovalDialog
|
|
open={showRemovalDialog}
|
|
onOpenChange={setShowRemovalDialog}
|
|
factorId={activeFactor.id}
|
|
onSuccess={handleRemovalSuccess}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-between p-4 border rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
|
|
<Smartphone className="w-4 h-4 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">Authenticator App</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Use an authenticator app to generate verification codes
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button onClick={startEnrollment} disabled={loading}>
|
|
{loading ? 'Setting up...' : 'Set Up'}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |