"use client"; import { Loader2, Mail, MessageSquare, Phone, RefreshCw } 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, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputOTP, InputOTPGroup, InputOTPSlot, } from "@/components/ui/input-otp"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; export type OTPDeliveryMethod = "email" | "sms" | "whatsapp"; export interface AuthOTPVerifyProps { deliveryMethod?: OTPDeliveryMethod; deliveryAddress?: string; // email or phone number onDeliveryMethodChange?: (method: OTPDeliveryMethod) => void; onSubmit?: (code: string) => void; onResend?: (method: OTPDeliveryMethod) => void; className?: string; isLoading?: boolean; resendCooldown?: number; // seconds 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, }, }; 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 codeError = errors?.code; const generalError = errors?.general; const methodConfig = DELIVERY_METHOD_CONFIG[deliveryMethod]; const MethodIcon = methodConfig.icon; const formatDeliveryAddress = (address?: string): string => { if (!address) return ""; if (deliveryMethod === "email") return address; // Mask phone number: +1 (***) ***-5678 if (address.length > 4) { const visible = address.slice(-4); const masked = "*".repeat(address.length - 4); return `${masked}${visible}`; } return address; }; return ( Verify your {methodConfig.label.toLowerCase()} We've sent a {codeLength}-digit code to{" "} {deliveryAddress ? ( {formatDeliveryAddress(deliveryAddress)} ) : ( "your " + methodConfig.label.toLowerCase() )}

{generalError && (

{generalError}

)} {availableMethods.length > 1 && onDeliveryMethodChange && ( Delivery method Choose how you want to receive the verification code )} Verification code * {Array.from({ length: codeLength }).map((_, index) => ( ))} {codeError && ( {codeError} )}

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

{!autoSubmit && ( )}

); }

Example Usage