"use client"; import { CheckCircle2, Clock, Loader2, Mail, 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 { cn } from "@/lib/utils"; export type MagicLinkStatus = "pending" | "sent" | "verified" | "expired"; export interface AuthMagicLinkProps { onSubmit?: (email: string) => void; onResend?: (email: string) => void; className?: string; defaultEmail?: string; isLoading?: boolean; status?: MagicLinkStatus; email?: string; resendCooldown?: number; // seconds errors?: { email?: string; general?: string; }; successMessage?: string; } export default function AuthMagicLink({ onSubmit, onResend, className, defaultEmail = "", isLoading = false, status = "pending", email: statusEmail, resendCooldown = 60, errors, successMessage = "We've sent a magic link to your email address.", }: AuthMagicLinkProps) { const [email, setEmail] = useState(defaultEmail); const [cooldown, setCooldown] = useState(0); const [localErrors, setLocalErrors] = useState<{ email?: string; }>({}); useEffect(() => { if (cooldown > 0) { const timer = setTimeout(() => { setCooldown((prev) => prev - 1); }, 1000); return () => clearTimeout(timer); } }, [cooldown]); const validateEmail = (value: string): string | undefined => { if (!value.trim()) { return "Email is required"; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(value)) { return "Please enter a valid email address"; } return; }; const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const emailError = validateEmail(email); if (emailError) { setLocalErrors({ email: emailError }); return; } setLocalErrors({}); onSubmit?.(email.trim()); }, [email, onSubmit] ); const handleResend = useCallback(async () => { if (cooldown > 0) return; const emailToUse = statusEmail || email; if (emailToUse) { await onResend?.(emailToUse); setCooldown(resendCooldown); } }, [cooldown, onResend, statusEmail, email, resendCooldown]); const handleEmailChange = (e: React.ChangeEvent) => { const value = e.target.value; setEmail(value); if (localErrors.email) { setLocalErrors((prev) => ({ ...prev, email: validateEmail(value) })); } }; const emailError = errors?.email || localErrors.email; const generalError = errors?.general; const displayEmail = statusEmail || email; if (status === "verified") { return ( Email verified You've successfully signed in

You're all set! Redirecting…

); } if (status === "expired") { return ( Link expired This magic link has expired. Please request a new one.

The magic link has expired. Please request a new one.

{onResend && ( )}

); } if (status === "sent") { return ( Check your email We've sent you a magic link

{successMessage}

{displayEmail && (

Sent to {displayEmail}

)}

Click the link in the email to sign in. If you don't see it, check your spam folder.

{onResend && ( )}

); } return ( Sign in with magic link Enter your email and we'll send you a passwordless sign-in link

{generalError && (

{generalError}

)} Email * {emailError && ( {emailError} )} We'll send a secure link to sign in without a password

); }

Example Usage