"use client"; import { CheckCircle2, Loader2, MessageSquare, Phone, RefreshCw, XCircle, } 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 { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { InputOTP, InputOTPGroup, InputOTPSlot, } from "@/components/ui/input-otp"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; 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; // seconds errors?: { phone?: string; code?: string; general?: string; }; autoSubmit?: boolean; countries?: Country[]; } // Common countries list 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: "🇧🇷" }, ]; 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 selectedCountry = countries.find((c) => c.code === countryCode); const phoneError = errors?.phone; const codeError = errors?.code; const generalError = errors?.general; const formatPhoneNumber = (value: string): string => { // Remove all non-digits const digits = value.replace(/\D/g, ""); // Format as (XXX) XXX-XXXX for US/CA, or keep as is 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; }; const handlePhoneChange = (e: React.ChangeEvent) => { const formatted = formatPhoneNumber(e.target.value); setPhoneNumber(formatted); }; if (status === "verified") { return ( Phone verified Your phone number has been successfully verified

Phone number verified successfully

{phoneNumber && (

{selectedCountry?.dialCode} {phoneNumber}

)}

); } if (status === "expired" || status === "error") { return ( Verification failed {status === "expired" ? "The verification code has expired" : "Something went wrong with verification"}

{generalError && (

{generalError}

)}

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

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

); } if (status === "sent" || status === "verifying") { return ( Verify your phone number Enter the 6-digit code sent to{" "} {phoneNumber && ( {selectedCountry?.dialCode} {phoneNumber} )}

{generalError && (

{generalError}

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

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

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

); } return ( Verify your phone number We'll send a verification code via SMS

{generalError && (

{generalError}

)}

Country Phone number * {phoneError && ( {phoneError} )} We'll send a verification code to this number

); }

Example Usage