"use client"; import { CheckCircle2, Clock, Loader2, Mail, 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, FieldDescription, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; 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; errors?: { email?: string; general?: string; }; successMessage?: string; } function 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; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface EmailFieldProps { id: string; value: string; onChange: (e: React.ChangeEvent) => void; error?: string; } function EmailField({ id, value, onChange, error }: EmailFieldProps) { return ( Email * {error && {error}} We'll send a secure link to sign in without a password ); } interface ResendButtonProps { cooldown: number; isLoading: boolean; onClick: () => void; variant?: "default" | "outline"; } function ResendButton({ cooldown, isLoading, onClick, variant = "default", }: ResendButtonProps) { return ( ); } interface VerifiedStateProps { className?: string; } function VerifiedState({ className }: VerifiedStateProps) { return ( Email verified You've successfully signed in

You're all set! Redirecting…

); } interface ExpiredStateProps { className?: string; cooldown: number; isLoading: boolean; onResend?: () => void; } function ExpiredState({ className, cooldown, isLoading, onResend, }: ExpiredStateProps) { return ( Link expired This magic link has expired. Please request a new one.

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

{onResend && ( )}

); } interface SentStateProps { className?: string; cooldown: number; displayEmail?: string; isLoading: boolean; message: string; onResend?: () => void; } function SentState({ className, cooldown, displayEmail, isLoading, message, onResend, }: SentStateProps) { return ( Check your email We've sent you a magic link

{message}

{displayEmail && (

Sent to {displayEmail}

)}

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

{onResend && ( )}

); } 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 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 = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setEmail(value); if (localErrors.email) { setLocalErrors((prev) => ({ ...prev, email: validateEmail(value) })); } }, [localErrors.email] ); const emailError = errors?.email || localErrors.email; const generalError = errors?.general; const displayEmail = statusEmail || email; if (status === "verified") { return ; } if (status === "expired") { return ( ); } if (status === "sent") { return ( ); } return ( Sign in with magic link Enter your email and we'll send you a passwordless sign-in link ); }

Example Usage