MagicLinkForm
A passwordless sign-in form that sends a magic link to the user's email address.
Loading...
Installation
pnpm add @corew500/uiUsage
import { MagicLinkForm } from '@corew500/ui/blocks/magic-link-form'
<MagicLinkForm
onFormSubmit={(data) => handleMagicLink(data)}
title="Sign in with a Magic Link"
description="Enter your email and we'll send you a secure link to sign in without a password."
/>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onFormSubmit | (data: MagicLinkFormData) => void | — | Called when the form is submitted |
| onResend | () => void | — | Called when resend is clicked |
| loading | enum | false | Whether the form is in a loading state |
| success | enum | false | When true, shows success state instead of form |
| glow | enum | false | Enable glow effects |
| title | string | Sign in with magic link | — |
| description | string | Enter your email and we'll send you a magic link to sign in instantly. | — |
| successTitle | string | Check your email | — |
| successDescription | string | We've sent you a magic link to sign in. | — |
| successSubDescription | string | Click the link in your email to continue. If you don't see it, check your spam folder. | — |
| successAction | enum | — | — |
| labels | { email?: string; } | {} | — |
| placeholders | { email?: string; } | {} | — |
| buttonLabels | { submit?: string; loading?: string; resend?: string; resendCooldown?: string; backToLogin?: string; } | {} | — |
| errors | { email?: string; general?: string; } | {} | — |
| backToLoginHref | string | # | — |
| resendCooldown | number | 60 | Resend cooldown in seconds |