Expired Link Recovery

Error18: Expired Link Recovery

The page a stale magic link lands on: the expiry timestamp sits in a bordered strip, a seal button sends a fresh link and swaps itself for a confirmation, and a square-bullet list explains why single-use links expire.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/error18?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/error18?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/error18.tsx, plus the two design-system primitives it renders through: badge6 for the square eyebrow and button1 for the resend seal button.

Quick start

The installed file exports error18Demo alongside the block: the exact props behind the preview above. Spread it to get a working expiry page in one line.

import { Error18, error18Demo } from "@/components/beste/block/error18";

export default function LinkExpired() {
  return <Error18 {...error18Demo} />;
}

Sending the new link is the caller's job, so pass a handler:

"use client";

import { Error18 } from "@/components/beste/block/error18";

export default function LinkExpired({ email }: { email: string }) {
  return (
    <Error18
      label="Link Expired"
      code="410"
      heading="That link has <strong>already done its job</strong>."
      description="Sign-in links live for fifteen minutes and can only be opened once."
      labels={{
        resend: "Send a new link",
        sent: "A new link is on its way. It expires in fifteen minutes.",
        reasonsTitle: "Why this happens",
        expiredTitle: "Expired",
      }}
      expiredAt="23 Jul 2026, 13:42 UTC"
      reasons={[
        "The link was opened once already, on this or another device",
        "More than fifteen minutes passed between request and click",
      ]}
      link={{ label: "Sign in with a password instead", href: "/sign-in" }}
      onResend={() => requestMagicLink(email)}
    />
  );
}

Props

type Error18Labels = {
  resend?: string;
  sent?: string;
  reasonsTitle?: string;
  expiredTitle?: string;
};

type ActionLink = {
  label: string;
  href: string;
};

Behavior notes

• Pressing resend flips local state and calls onResend. The button is replaced by the confirmation strip immediately, without waiting on the handler, so a slow request never leaves the button looking dead.
• The switch is one way for that mount: there is no second attempt from the UI, which stops a visitor from queuing five links in a row.
• Without onResend the button still swaps to the confirmation, so the block can be dropped in before the mail flow exists. Wire the handler before shipping.
• The resend button only renders when labels.resend is set, and the expiry strip only when expiredAt is set, so a bare heading plus reasons is a valid configuration.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; <strong> takes the accent colour. Keep the value under your own control, never user input.