Code edited in Lovable Code Editor

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
         <Shield className="w-5 h-5" />
         <h3 className="font-semibold">Multi-Factor Authentication</h3>
       </div>
-      
-      <p className="text-sm text-muted-foreground">
-        Enter the 6-digit code from your authenticator app
-      </p>
+
+      <p className="text-sm text-muted-foreground">Enter the 6-digit code from your authenticator app</p>
 
       <div className="space-y-2">
         <Label htmlFor="mfa-code">Authentication Code</Label>
         <div className="flex justify-center">
-          <InputOTP
-            maxLength={6}
-            value={code}
-            onChange={setCode}
-            onComplete={handleVerify}
-          >
+          <InputOTP maxLength={6} value={code} onChange={setCode} onComplete={handleVerify}>
             <InputOTPGroup>
               <InputOTPSlot index={0} />
               <InputOTPSlot index={1} />
@@ -90,19 +82,10 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
       </div>
 
       <div className="flex gap-2">
-        <Button
-          variant="outline"
-          onClick={onCancel}
-          className="flex-1"
-          disabled={loading}
-        >
+        <Button variant="outline" onClick={onCancel} className="flex-1" disabled={loading}>
           Cancel
         </Button>
-        <Button
-          onClick={handleVerify}
-          className="flex-1"
-          disabled={code.length !== 6 || loading}
-        >
+        <Button onClick={handleVerify} className="flex-1" disabled={code.length !== 6 || loading}>
           {loading ? "Verifying..." : "Verify"}
         </Button>
       </div>