diff --git a/src/components/auth/MFAChallenge.tsx b/src/components/auth/MFAChallenge.tsx index 13aa2430..c89a3c87 100644 --- a/src/components/auth/MFAChallenge.tsx +++ b/src/components/auth/MFAChallenge.tsx @@ -1,11 +1,11 @@ -import { useState } from 'react'; -import { supabase } from '@/integrations/supabase/client'; -import { useToast } from '@/hooks/use-toast'; -import { getErrorMessage } from '@/lib/errorHandler'; -import { Button } from '@/components/ui/button'; -import { Label } from '@/components/ui/label'; -import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'; -import { Shield } from 'lucide-react'; +import { useState } from "react"; +import { supabase } from "@/integrations/supabase/client"; +import { useToast } from "@/hooks/use-toast"; +import { getErrorMessage } from "@/lib/errorHandler"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp"; +import { Shield } from "lucide-react"; interface MFAChallengeProps { factorId: string; @@ -15,7 +15,7 @@ interface MFAChallengeProps { export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProps) { const { toast } = useToast(); - const [code, setCode] = useState(''); + const [code, setCode] = useState(""); const [loading, setLoading] = useState(false); const handleVerify = async () => { @@ -24,16 +24,15 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp setLoading(true); try { // Create fresh challenge for each verification attempt - const { data: challengeData, error: challengeError } = - await supabase.auth.mfa.challenge({ factorId }); - + const { data: challengeData, error: challengeError } = await supabase.auth.mfa.challenge({ factorId }); + if (challengeError) throw challengeError; - + // Immediately verify with fresh challenge const { data, error } = await supabase.auth.mfa.verify({ factorId, challengeId: challengeData.id, - code: code.trim() + code: code.trim(), }); if (error) throw error; @@ -41,7 +40,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp if (data) { toast({ title: "Welcome back!", - description: "MFA verification successful." + description: "Multi-Factor verification successful.", }); onSuccess(); } @@ -49,9 +48,9 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp toast({ variant: "destructive", title: "Verification Failed", - description: getErrorMessage(error) || "Invalid code. Please try again." + description: getErrorMessage(error) || "Invalid code. Please try again.", }); - setCode(''); + setCode(""); } finally { setLoading(false); } @@ -63,20 +62,13 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp

Multi-Factor Authentication

- -

- Enter the 6-digit code from your authenticator app -

+ +

Enter the 6-digit code from your authenticator app

- + @@ -90,19 +82,10 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
- -