Auth Magic Link

1"use client";
2 
3import {
4  CheckCircle2,
5  Clock,
6  Loader2,
7  Mail,
8  RefreshCw,
9  XCircle,
10} from "lucide-react";
11import { useCallback, useEffect, useState } from "react";
12import { cn } from "@/lib/utils";
13import { Button } from "@/registry/new-york/ui/button";
14import {
15  Card,
16  CardContent,
17  CardDescription,
18  CardHeader,
19  CardTitle,
20} from "@/registry/new-york/ui/card";
21import {
22  Field,
23  FieldContent,
24  FieldDescription,
25  FieldError,
26  FieldLabel,
27} from "@/registry/new-york/ui/field";
28import {
29  InputGroup,
30  InputGroupAddon,
31  InputGroupInput,
32} from "@/registry/new-york/ui/input-group";
33 
34export type MagicLinkStatus = "pending" | "sent" | "verified" | "expired";
35 
36export interface AuthMagicLinkProps {
37  onSubmit?: (email: string) => void;
38  onResend?: (email: string) => void;
39  className?: string;
40  defaultEmail?: string;
41  isLoading?: boolean;
42  status?: MagicLinkStatus;
43  email?: string;
44  resendCooldown?: number;
45  errors?: {
46    email?: string;
47    general?: string;
48  };
49  successMessage?: string;
50}
51 
52function validateEmail(value: string): string | undefined {
53  if (!value.trim()) {
54    return "Email is required";
55  }
56  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
57  if (!emailRegex.test(value)) {
58    return "Please enter a valid email address";
59  }
60  return;
61}
62 
63interface ErrorAlertProps {
64  message: string;
65}
66 
67function ErrorAlert({ message }: ErrorAlertProps) {
68  return (
69    <div
70      aria-live="polite"
71      className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
72      role="alert"
73    >
74      {message}
75    </div>
76  );
77}
78 
79interface EmailFieldProps {
80  id: string;
81  value: string;
82  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
83  error?: string;
84}
85 
86function EmailField({ id, value, onChange, error }: EmailFieldProps) {
87  return (
88    <Field data-invalid={!!error}>
89      <FieldLabel htmlFor={id}>
90        Email
91        <span aria-label="required" className="text-destructive">
92          *
93        </span>
94      </FieldLabel>
95      <FieldContent>
96        <InputGroup aria-invalid={!!error}>
97          <InputGroupAddon>
98            <Mail aria-hidden="true" className="size-4" />
99          </InputGroupAddon>
100          <InputGroupInput
101            aria-describedby={error ? `${id}-error` : undefined}
102            aria-invalid={!!error}
103            autoComplete="email"
104            id={id}
105            inputMode="email"
106            name="email"
107            onChange={onChange}
108// … truncated