"use client"; import { CheckCircle2, Loader2, MessageSquare, Phone, RefreshCw, XCircle, } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Separator } from "@/registry/new-york/ui/separator"; export interface Country { code: string; name: string; dialCode: string; flag: string; } export type VerificationStatus = | "pending" | "sent" | "verifying" | "verified" | "expired" | "error"; export interface AuthPhoneVerifyProps { phoneNumber?: string; countryCode?: string; onPhoneSubmit?: (phoneNumber: string, countryCode: string) => void; onOTPSubmit?: (code: string) => void; onResend?: () => void; onChangePhone?: () => void; className?: string; isLoading?: boolean; status?: VerificationStatus; resendCooldown?: number; errors?: { phone?: string; code?: string; general?: string; }; autoSubmit?: boolean; countries?: Country[]; } const DEFAULT_COUNTRIES: Country[] = [ { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸" }, { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧" }, { code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦" }, { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺" }, { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪" }, { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷" }, { code: "IN", name: "India", dialCode: "+91", flag: "🇮🇳" }, { code: "JP", name: "Japan", dialCode: "+81", flag: "🇯🇵" }, { code: "CN", name: "China", dialCode: "+86", flag: "🇨🇳" }, { code: "BR", name: "Brazil", dialCode: "+55", flag: "🇧🇷" }, ]; function formatPhoneNumber(value: string, countryCode: string): string { const digits = value.replace(/\D/g, ""); if (countryCode === "US" || countryCode === "CA") { if (digits.length <= 3) return digits; if (digits.length <= 6) { return `(${digits.slice(0, 3)}) ${digits.slice(3)}`; } return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`; } return digits; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface VerifiedStateProps { className?: string; phoneNumber?: string; selectedCountry?: Country; } function VerifiedState({ className, phoneNumber, selectedCountry, }: VerifiedStateProps) { return ( Phone verified Your phone number has been successfully verified

Phone number verified successfully

{phoneNumber && (

{selectedCountry?.dialCode} {phoneNumber}

)}

); } interface ExpiredErrorStateProps { className?: string; cooldown: number; generalError?: string; isLoading: boolean; onChangePhone?: () => void; onResend?: () => void; status: "expired" | "error"; } function ExpiredErrorState({ className, cooldown, generalError, isLoading, onChangePhone, onResend, status, }: ExpiredErrorStateProps) { return ( Verification failed {status === "expired" ? "The verification code has expired" : "Something went wrong with verification"}

{generalError && }

{status === "expired" ? "The verification code has expired. Please request a new one." : "Verification failed. Please try again."}

{onChangePhone && ( )} {onResend && ( )}

); } interface ResendButtonProps { cooldown: number; isLoading: boolean; onClick: () => void; } function ResendButton({ cooldown, isLoading, onClick }: ResendButtonProps) { return ( ); } interface OTPVerificationStateProps { autoSubmit: boolean; className?: string; code: string; codeError?: string; cooldown: number; generalError?: string; isLoading: boolean; onChangePhone?: () => void; onCodeChange: (code: string) => void; onOTPSubmit?: (code: string) => void; onResend?: () => void; phoneNumber?: string; selectedCountry?: Country; status: "sent" | "verifying"; } function OTPVerificationState({ autoSubmit, className, code, codeError, cooldown, generalError, isLoading, onChangePhone, onCodeChange, onOTPSubmit, onResend, phoneNumber, selectedCountry, status, }: OTPVerificationStateProps) { return ( Verify your phone number Enter the 6-digit code sent to{" "} {phoneNumber && ( {selectedCountry?.dialCode} {phoneNumber} )}

{generalError && } Verification code * {codeError && ( {codeError} )}

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

{onChangePhone && ( <> )} {!autoSubmit && ( )}

); } interface CountrySelectProps { countries: Country[]; countryCode: string; onCountryCodeChange: (code: string) => void; } function CountrySelect({ countries, countryCode, onCountryCodeChange, }: CountrySelectProps) { return ( Country ); } interface PhoneNumberFieldProps { error?: string; id: string; onChange: (e: React.ChangeEvent) => void; value: string; } function PhoneNumberField({ error, id, onChange, value, }: PhoneNumberFieldProps) { return ( Phone number * {error && {error}} ); } interface PhoneNumberFormProps { className?: string; countries: Country[]; countryCode: string; generalError?: string; isLoading: boolean; onCountryCodeChange: (code: string) => void; onPhoneChange: (e: React.ChangeEvent) => void; onPhoneSubmit: (e: React.FormEvent) => void; phoneError?: string; phoneNumber: string; } function PhoneNumberForm({ className, countries, countryCode, generalError, isLoading, onCountryCodeChange, onPhoneChange, onPhoneSubmit, phoneError, phoneNumber, }: PhoneNumberFormProps) { return ( Verify your phone number We'll send a verification code via SMS ); } export default function AuthPhoneVerify({ phoneNumber: initialPhoneNumber, countryCode: initialCountryCode = "US", onPhoneSubmit, onOTPSubmit, onResend, onChangePhone, className, isLoading = false, status = "pending", resendCooldown = 60, errors, autoSubmit = true, countries = DEFAULT_COUNTRIES, }: AuthPhoneVerifyProps) { const [phoneNumber, setPhoneNumber] = useState(initialPhoneNumber || ""); const [countryCode, setCountryCode] = useState(initialCountryCode); 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 === 6 && !isLoading && status === "sent") { onOTPSubmit?.(code); } }, [code, autoSubmit, isLoading, status, onOTPSubmit]); const handlePhoneSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); if (phoneNumber.trim()) { onPhoneSubmit?.(phoneNumber.trim(), countryCode); } }, [phoneNumber, countryCode, onPhoneSubmit] ); const handleResend = useCallback(async () => { if (cooldown > 0) return; await onResend?.(); setCooldown(resendCooldown); }, [cooldown, onResend, resendCooldown]); const handlePhoneChange = useCallback( (e: React.ChangeEvent) => { const formatted = formatPhoneNumber(e.target.value, countryCode); setPhoneNumber(formatted); }, [countryCode] ); const handleCodeChange = useCallback((newCode: string) => { setCode(newCode); }, []); const selectedCountry = countries.find((c) => c.code === countryCode); const phoneError = errors?.phone; const codeError = errors?.code; const generalError = errors?.general; if (status === "verified") { return ( ); } if (status === "expired" || status === "error") { return ( ); } if (status === "sent" || status === "verifying") { return ( ); } return ( ); }

Example Usage