mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 05:51:12 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
331
src-old/components/auth/TOTPSetup.tsx
Normal file
331
src-old/components/auth/TOTPSetup.tsx
Normal file
@@ -0,0 +1,331 @@
|
||||
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 { handleError, handleSuccess, handleInfo, handleNonCriticalError, AppError, getErrorMessage } from '@/lib/errorHandler';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useRequireMFA } from '@/hooks/useRequireMFA';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { Smartphone, Shield, Copy, Eye, EyeOff, Trash2, AlertTriangle } from 'lucide-react';
|
||||
import { MFARemovalDialog } from './MFARemovalDialog';
|
||||
import { setStepUpRequired, getAuthMethod } from '@/lib/sessionFlags';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import type { MFAFactor } from '@/types/auth';
|
||||
|
||||
export function TOTPSetup() {
|
||||
const { user } = useAuth();
|
||||
const { requiresMFA } = useRequireMFA();
|
||||
const navigate = useNavigate();
|
||||
const [factors, setFactors] = useState<MFAFactor[]>([]);
|
||||
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: 'totp' as const,
|
||||
status: factor.status as 'verified' | 'unverified',
|
||||
created_at: factor.created_at,
|
||||
updated_at: factor.updated_at
|
||||
}));
|
||||
setFactors(totpFactors);
|
||||
} catch (error: unknown) {
|
||||
handleNonCriticalError(error, {
|
||||
action: 'Fetch TOTP factors',
|
||||
userId: user?.id,
|
||||
metadata: { context: 'initial_load' }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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: unknown) {
|
||||
handleError(
|
||||
new AppError(
|
||||
getErrorMessage(error) || 'Failed to start TOTP enrollment',
|
||||
'TOTP_ENROLL_FAILED'
|
||||
),
|
||||
{ action: 'Start TOTP enrollment', userId: user?.id }
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const verifyAndEnable = async () => {
|
||||
if (!factorId || !verificationCode.trim()) {
|
||||
handleError(
|
||||
new AppError('Please enter the verification code', 'INVALID_INPUT'),
|
||||
{ action: 'Verify TOTP', userId: user?.id, metadata: { step: 'code_entry' } }
|
||||
);
|
||||
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 and trigger step-up flow
|
||||
const authMethod = getAuthMethod();
|
||||
const isOAuthUser = authMethod === 'oauth';
|
||||
|
||||
if (isOAuthUser) {
|
||||
setStepUpRequired(true, window.location.pathname);
|
||||
navigate('/auth/mfa-step-up');
|
||||
return;
|
||||
}
|
||||
|
||||
handleSuccess(
|
||||
'Multi-Factor Authentication Enabled',
|
||||
isOAuthUser
|
||||
? 'Please verify with your authenticator app to continue.'
|
||||
: 'Please sign in again to activate Multi-Factor Authentication protection.'
|
||||
);
|
||||
|
||||
if (isOAuthUser) {
|
||||
// Already handled above with navigate
|
||||
return;
|
||||
} 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: unknown) {
|
||||
handleError(
|
||||
new AppError(
|
||||
getErrorMessage(error) || 'Invalid verification code. Please try again.',
|
||||
'TOTP_VERIFY_FAILED'
|
||||
),
|
||||
{ action: 'Verify TOTP code', userId: user?.id, metadata: { factorId } }
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemovalSuccess = async () => {
|
||||
await fetchTOTPFactors();
|
||||
};
|
||||
|
||||
const copySecret = () => {
|
||||
navigator.clipboard.writeText(secret);
|
||||
handleInfo('Copied', '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)}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
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 Multi-Factor Authentication'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardDescription>
|
||||
Add an extra layer of security to your account with Multi-Factor Authentication.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{activeFactor ? (
|
||||
<div className="space-y-4">
|
||||
<Alert>
|
||||
<Shield className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
Multi-Factor Authentication is enabled for your account. You'll be prompted for a code from your authenticator app when signing in.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{/* Phase 2: Warning for role-required users */}
|
||||
{requiresMFA && (
|
||||
<Alert variant="default" className="border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950">
|
||||
<AlertTriangle className="w-4 h-4 text-amber-600 dark:text-amber-400" />
|
||||
<AlertDescription className="text-amber-800 dark:text-amber-200">
|
||||
Your role requires Multi-Factor Authentication. You cannot disable it.
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user