"use client"; import { Loader2, RefreshCw, Shield, ShieldCheck } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { InputOTP, InputOTPGroup, InputOTPSlot, } from "@/components/ui/input-otp"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface AuthTwoFactorVerifyProps { onSubmit?: (code: string) => void; onRecoveryCode?: (code: string) => void; onResend?: () => void; className?: string; isLoading?: boolean; resendCooldown?: number; // seconds errors?: { code?: string; recoveryCode?: string; general?: string; }; autoSubmit?: boolean; } export default function AuthTwoFactorVerify({ onSubmit, onRecoveryCode, onResend, className, isLoading = false, resendCooldown = 60, errors, autoSubmit = true, }: AuthTwoFactorVerifyProps) { const [code, setCode] = useState(""); const [recoveryCode, setRecoveryCode] = useState(""); const [useRecoveryCode, setUseRecoveryCode] = useState(false); const [cooldown, setCooldown] = useState(0); useEffect(() => { if (cooldown > 0) { const timer = setTimeout(() => { setCooldown((prev) => prev - 1); }, 1000); return () => clearTimeout(timer); } }, [cooldown]); useEffect(() => { if (autoSubmit && code.length === 6 && !isLoading && !useRecoveryCode) { onSubmit?.(code); } }, [code, autoSubmit, isLoading, useRecoveryCode, onSubmit]); const handleResend = useCallback(async () => { if (cooldown > 0) return; await onResend?.(); setCooldown(resendCooldown); }, [cooldown, onResend, resendCooldown]); const handleRecoveryCodeSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); if (recoveryCode.trim()) { onRecoveryCode?.(recoveryCode.trim()); } }, [recoveryCode, onRecoveryCode] ); const codeError = errors?.code; const recoveryCodeError = errors?.recoveryCode; const generalError = errors?.general; return ( Verify two-factor authentication Enter the 6-digit code from your authenticator app

{generalError && (

{generalError}

)} {useRecoveryCode ? (

Recovery code * setRecoveryCode(e.target.value)} placeholder="Enter recovery code" required type="text" value={recoveryCode} /> {recoveryCodeError && ( {recoveryCodeError} )}

) : (

Authentication code * {codeError && ( {codeError} )}

Enter the 6-digit code from your app {onResend && ( )}

{onRecoveryCode && ( <>

)}

); }

Example Usage