About this block

Magic Link Page is a blueprint of both states on one screen, separated by an "after sending" divider so the design intent is clear at a glance. The request card holds the email input and the "Email me a link" button. The sent card shows the MailCheck icon, confirms the address (jordan@acme.com), and carries the facts: the link works once and expires in 15 minutes, opening it on another device is fine. The resend row tells the honest throttle: once per minute, 1 of 5 sends used this hour.

Both states are static markup, no client state toggle needed. The throttle count is what stops users hammering resend and then filing a not delivered ticket.

When to use

Reach for this block when your auth flow offers passwordless email login, wired to your magic link issuer endpoint and your send rate limiter. Drive the sent state by router transition after a successful post, not a client toggle.

A natural flow around it on an Application Pro page:

Before

• Sign in page

After

• App shell

What you can display

One strong use is the passwordless sign-in flow. Other shapes:

• Email verification. Same two states after signup, different heading and expiry window.
• Device confirmation. New device detected, email a code to approve; sent state names the device.
• Password change confirm. Send a confirmation link before applying the change; sent state is the same.

Tip: the one-time and 15 minute facts belong in the sent card, not the request card; put them where the user is anxious, not where they are confident.