"use client"; import { Loader2, RefreshCw, ShieldCheck } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { InputOTP, InputOTPGroup, InputOTPSlot, } from "@/registry/new-york/ui/input-otp"; import { Separator } from "@/registry/new-york/ui/separator"; interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } function Header() { return ( <> Verify two-factor authentication Enter the 6-digit code from your authenticator app ); } interface RecoveryCodeFieldProps { value: string; onChange: (value: string) => void; error?: string; } function RecoveryCodeField({ value, onChange, error }: RecoveryCodeFieldProps) { return ( Recovery code * onChange(e.target.value)} placeholder="Enter recovery code…" required type="text" value={value} /> {error && {error}} ); } interface VerifyRecoveryCodeButtonProps { isLoading: boolean; disabled: boolean; } function VerifyRecoveryCodeButton({ isLoading, disabled, }: VerifyRecoveryCodeButtonProps) { return ( ); } interface SwitchToAuthenticatorButtonProps { onSwitch: () => void; } function SwitchToAuthenticatorButton({ onSwitch, }: SwitchToAuthenticatorButtonProps) { return ( ); } interface RecoveryCodeFormProps { recoveryCode: string; onRecoveryCodeChange: (value: string) => void; error?: string; isLoading: boolean; onSubmit: (e: React.FormEvent) => void; onSwitchToAuthenticator: () => void; } function RecoveryCodeForm({ recoveryCode, onRecoveryCodeChange, error, isLoading, onSubmit, onSwitchToAuthenticator, }: RecoveryCodeFormProps) { return (

); } interface ResendButtonProps { cooldown: number; isLoading: boolean; onResend: () => void; } function ResendButton({ cooldown, isLoading, onResend }: ResendButtonProps) { return ( ); } interface OTPFieldWithResendProps { value: string; onChange: (value: string) => void; error?: string; isLoading: boolean; cooldown: number; onResend?: () => void; } function OTPFieldWithResend({ value, onChange, error, isLoading, cooldown, onResend, }: OTPFieldWithResendProps) { return ( Authentication code * {error && {error}}

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

); } function EmailSeparator() { return (

); } interface RecoveryCodeToggleButtonProps { onToggle: () => void; } function RecoveryCodeToggleButton({ onToggle }: RecoveryCodeToggleButtonProps) { return ( ); } 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 handleSwitchToAuthenticator = useCallback(() => { setUseRecoveryCode(false); setRecoveryCode(""); }, []); const handleSwitchToRecoveryCode = useCallback(() => { setUseRecoveryCode(true); }, []); return (

{errors?.general && } {useRecoveryCode ? ( ) : (

{onRecoveryCode && ( <> )}

)}

); }

Example Usage