pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-25 12:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Code edited in Lovable Code Editor

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-11-02 18:51:03 +00:00
parent 813b15fad5
commit 10331058f1
1 changed files with 21 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/auth/MFAChallenge.tsx
View File

@@ -1,11 +1,11 @@
import { useState } from 'react'; import { useState } from "react";
import { supabase } from '@/integrations/supabase/client'; import { supabase } from "@/integrations/supabase/client";
import { useToast } from '@/hooks/use-toast'; import { useToast } from "@/hooks/use-toast";
import { getErrorMessage } from '@/lib/errorHandler'; import { getErrorMessage } from "@/lib/errorHandler";
import { Button } from '@/components/ui/button'; import { Button } from "@/components/ui/button";
import { Label } from '@/components/ui/label'; import { Label } from "@/components/ui/label";
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'; import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
import { Shield } from 'lucide-react'; import { Shield } from "lucide-react";
interface MFAChallengeProps { interface MFAChallengeProps {
factorId: string; factorId: string;
@@ -15,7 +15,7 @@ interface MFAChallengeProps {
export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProps) { export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProps) {
const { toast } = useToast(); const { toast } = useToast();
const [code, setCode] = useState(''); const [code, setCode] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const handleVerify = async () => { const handleVerify = async () => {
@@ -24,8 +24,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
setLoading(true); setLoading(true);
try { try {
// Create fresh challenge for each verification attempt // Create fresh challenge for each verification attempt
const { data: challengeData, error: challengeError } = const { data: challengeData, error: challengeError } = await supabase.auth.mfa.challenge({ factorId });
await supabase.auth.mfa.challenge({ factorId });
if (challengeError) throw challengeError; if (challengeError) throw challengeError;
@@ -33,7 +32,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
const { data, error } = await supabase.auth.mfa.verify({ const { data, error } = await supabase.auth.mfa.verify({
factorId, factorId,
challengeId: challengeData.id, challengeId: challengeData.id,
code: code.trim() code: code.trim(),
}); });
if (error) throw error; if (error) throw error;
@@ -41,7 +40,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
if (data) { if (data) {
toast({ toast({
title: "Welcome back!", title: "Welcome back!",
description: "MFA verification successful." description: "Multi-Factor verification successful.",
}); });
onSuccess(); onSuccess();
} }
@@ -49,9 +48,9 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
toast({ toast({
variant: "destructive", variant: "destructive",
title: "Verification Failed", title: "Verification Failed",
description: getErrorMessage(error) || "Invalid code. Please try again." description: getErrorMessage(error) || "Invalid code. Please try again.",
}); });
setCode(''); setCode("");
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -64,19 +63,12 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
<h3 className="font-semibold">Multi-Factor Authentication</h3> <h3 className="font-semibold">Multi-Factor Authentication</h3>
</div> </div>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">Enter the 6-digit code from your authenticator app</p>
Enter the 6-digit code from your authenticator app
</p>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="mfa-code">Authentication Code</Label> <Label htmlFor="mfa-code">Authentication Code</Label>
<div className="flex justify-center"> <div className="flex justify-center">
<InputOTP <InputOTP maxLength={6} value={code} onChange={setCode} onComplete={handleVerify}>
maxLength={6}
value={code}
onChange={setCode}
onComplete={handleVerify}
>
<InputOTPGroup> <InputOTPGroup>
<InputOTPSlot index={0} /> <InputOTPSlot index={0} />
<InputOTPSlot index={1} /> <InputOTPSlot index={1} />
@@ -90,19 +82,10 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button variant="outline" onClick={onCancel} className="flex-1" disabled={loading}>
variant="outline"
onClick={onCancel}
className="flex-1"
disabled={loading}
>
Cancel Cancel
</Button> </Button>
<Button <Button onClick={handleVerify} className="flex-1" disabled={code.length !== 6 || loading}>
onClick={handleVerify}
className="flex-1"
disabled={code.length !== 6 || loading}
>
{loading ? "Verifying..." : "Verify"} {loading ? "Verifying..." : "Verify"}
</Button> </Button>
</div> </div>