'use client'; import { Card, CardContent, CardFooter, CardHeader, FormField, FormLabel, Button, Input } from '@components'; import { useEffect, useState } from 'react'; const RESEND_COOLDOWN = 30; const MailIcon = () => ( ); export default function AuthFormMagicLinkExample() { const [email, setEmail] = useState(''); const [loading, setLoading] = useState(false); const [sent, setSent] = useState(false); const [cooldown, setCooldown] = useState(0); useEffect(() => { if (cooldown === 0) return; const timer = setTimeout(() => setCooldown((c) => c - 1), 1000); return () => clearTimeout(timer); }, [cooldown]); const handleSend = () => { setLoading(true); setTimeout(() => { setLoading(false); setSent(true); setCooldown(RESEND_COOLDOWN); }, 800); }; const handleResend = () => { setCooldown(RESEND_COOLDOWN); }; const reset = () => { setSent(false); setEmail(''); setCooldown(0); }; return (

{sent ? 'Check your inbox' : 'Sign in'}

{sent ? 'We sent a magic link to your email.' : "Enter your email and we'll send you a link to sign in; no password needed."}

{sent ? (

Sent to {email}

Click the link in the email to finish signing in. It may take a minute to arrive.

) : (

Email setEmail(e.target.value)} />

)} {sent ? ( ) : ( We'll never ask for a password. )} ); }

Magic link

Installation

Demo