"use client"; import { Loader2, Mail, MessageSquare, Phone, RefreshCw } 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, FieldDescription, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputOTP, InputOTPGroup, InputOTPSlot, } from "@/registry/new-york/ui/input-otp"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; export type OTPDeliveryMethod = "email" | "sms" | "whatsapp"; export interface AuthOTPVerifyProps { deliveryMethod?: OTPDeliveryMethod; deliveryAddress?: string; onDeliveryMethodChange?: (method: OTPDeliveryMethod) => void; onSubmit?: (code: string) => void; onResend?: (method: OTPDeliveryMethod) => void; className?: string; isLoading?: boolean; resendCooldown?: number; errors?: { code?: string; general?: string; }; autoSubmit?: boolean; codeLength?: number; availableMethods?: OTPDeliveryMethod[]; } const DELIVERY_METHOD_CONFIG: Record< OTPDeliveryMethod, { label: string; icon: React.ComponentType<{ className?: string }> } > = { email: { label: "Email", icon: Mail, }, sms: { label: "SMS", icon: MessageSquare, }, whatsapp: { label: "WhatsApp", icon: Phone, }, }; function formatDeliveryAddress( address: string | undefined, method: OTPDeliveryMethod ): string { if (!address) return ""; if (method === "email") return address; if (address.length > 4) { const visible = address.slice(-4); const masked = "*".repeat(address.length - 4); return `${masked}${visible}`; } return address; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface DeliveryMethodSelectProps { availableMethods: OTPDeliveryMethod[]; deliveryMethod: OTPDeliveryMethod; onDeliveryMethodChange: (method: OTPDeliveryMethod) => void; } function DeliveryMethodSelect({ availableMethods, deliveryMethod, onDeliveryMethodChange, }: DeliveryMethodSelectProps) { return ( Delivery method Choose how you want to receive the verification code ); } interface ResendButtonProps { cooldown: number; isLoading: boolean; onClick: () => void; } function ResendButton({ cooldown, isLoading, onClick }: ResendButtonProps) { return ( ); } interface OTPFieldProps { code: string; codeError?: string; codeLength: number; isLoading: boolean; onCodeChange: (code: string) => void; onResend?: () => void; resendCooldown: number; } function OTPField({ code, codeError, codeLength, isLoading, onCodeChange, onResend, resendCooldown, }: OTPFieldProps) { return ( Verification code * {Array.from({ length: codeLength }).map((_, index) => ( ))} {codeError && {codeError}}

Enter the {codeLength}-digit code {onResend && ( )}

); } interface VerifyButtonProps { code: string; codeLength: number; isLoading: boolean; onSubmit: (code: string) => void; } function VerifyButton({ code, codeLength, isLoading, onSubmit, }: VerifyButtonProps) { return ( ); } export default function AuthOTPVerify({ deliveryMethod = "email", deliveryAddress, onDeliveryMethodChange, onSubmit, onResend, className, isLoading = false, resendCooldown = 60, errors, autoSubmit = true, codeLength = 6, availableMethods = ["email", "sms"], }: AuthOTPVerifyProps) { const [code, setCode] = useState(""); 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 === codeLength && !isLoading) { onSubmit?.(code); } }, [code, autoSubmit, isLoading, codeLength, onSubmit]); const handleResend = useCallback(async () => { if (cooldown > 0) return; await onResend?.(deliveryMethod); setCooldown(resendCooldown); }, [cooldown, onResend, deliveryMethod, resendCooldown]); const handleCodeChange = useCallback((newCode: string) => { setCode(newCode); }, []); const codeError = errors?.code; const generalError = errors?.general; const methodConfig = DELIVERY_METHOD_CONFIG[deliveryMethod]; const MethodIcon = methodConfig.icon; const formattedAddress = formatDeliveryAddress( deliveryAddress, deliveryMethod ); return ( Verify your {methodConfig.label.toLowerCase()} We've sent a {codeLength}-digit code to{" "} {deliveryAddress ? ( {formattedAddress} ) : ( "your " + methodConfig.label.toLowerCase() )}

{generalError && } {availableMethods.length > 1 && onDeliveryMethodChange && ( )} {!autoSubmit && ( {})} /> )}

); }

Example Usage