designComponents

Search the design system…

Search the design system…

patterns

MagicLinkSentPage

Confirmation page after the host triggers a magic-link send. Mostly static — shows the address the link was sent to, the expiration window, and an optional resend button.

Install

Import from the workspace package:

import { MagicLinkSentPage, MagicLinkSentPageProps } from "@8maverik8/auth";

Examples

Default with resend

<MagicLinkSentPage
  wordmark="archi"
  email={email}
  onResend={async () => {
    const res = await authClient.signIn.magicLink({ email });
    if (res.error) return { error: res.error.message };
    return { error: null };
  }}
/>

Guidelines

  • Pass the email the link was sent to — users want to confirm they typed it correctly.
  • Use this page when the link was sent for password reset.That's `<ForgotPasswordPage>`'s built-in success state. This component is for passwordless sign-in only.