"use client"; import { CheckCircle2, Clock, Loader2, Mail, RefreshCw, XCircle, } from "lucide-react"; import { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { cn } from "@/lib/utils"; export type VerificationStatus = | "pending" | "verifying" | "verified" | "expired" | "error"; export interface AuthVerifyEmailProps { email?: string; status?: VerificationStatus; onResend?: () => void; onVerify?: (token: string) => void; className?: string; isLoading?: boolean; errorMessage?: string; resendCooldown?: number; // seconds } export default function AuthVerifyEmail({ email, status = "pending", onResend, onVerify, className, isLoading = false, errorMessage, resendCooldown = 60, }: AuthVerifyEmailProps) { const [cooldown, setCooldown] = useState(0); const [isResending, setIsResending] = useState(false); useEffect(() => { if (cooldown > 0) { const timer = setTimeout(() => { setCooldown((prev) => prev - 1); }, 1000); return () => clearTimeout(timer); } }, [cooldown]); const handleResend = async () => { if (cooldown > 0 || isResending) return; setIsResending(true); try { await onResend?.(); setCooldown(resendCooldown); } finally { setIsResending(false); } }; const getStatusIcon = () => { switch (status) { case "verified": return (

); case "verifying": return (

); case "expired": case "error": return (

); default: return (

); } }; const getStatusContent = () => { switch (status) { case "verified": return { title: "Email verified", description: "Your email address has been successfully verified.", }; case "verifying": return { title: "Verifying email", description: "Please wait while we verify your email address…", }; case "expired": return { title: "Verification link expired", description: "The verification link has expired. Please request a new one.", }; case "error": return { title: "Verification failed", description: errorMessage || "Something went wrong. Please try requesting a new verification link.", }; default: return { title: "Verify your email", description: email ? `We've sent a verification link to ${email}. Please check your inbox and click the link to verify your email address.` : "We've sent a verification link to your email address. Please check your inbox and click the link to verify your email address.", }; } }; const statusContent = getStatusContent(); return ( {statusContent.title} {statusContent.description}

{getStatusIcon()} {status === "pending" && (

Didn't receive the email?

Check your spam folder or try resending the verification link.

{onResend && ( )}

)} {(status === "expired" || status === "error") && onResend && ( )} {status === "verified" && (

You can now use all features of your account.

)}

); }

Example Usage