Auth28: Link Expired

Full-height expired-link screen: a centered broken-link icon, a heading and explanation, a "Request a new link" button, and a back-to-sign-in link with a leading arrow. Built for stale magic links, password resets, and email confirmation tokens.

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/auth28?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth28.tsx and the button shadcn/ui primitive it's built on.

Quick start

The installed file exports auth28Demo alongside the block: the exact props behind the preview above. Spread it to get a working expired-link screen in one line.

import { Auth28, auth28Demo } from "@/components/beste/block/auth28";

export default function LinkExpiredPage() {
  return <Auth28 {...auth28Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Link2Off } from "lucide-react";
import { Auth28 } from "@/components/beste/block/auth28";

export default function LinkExpiredPage() {
  return (
    <Auth28
      icon={<Link2Off className="size-7" />}
      heading="This link has expired"
      description="Sign-in links expire after a short while. Request a new one to continue."
      primaryButton={{ label: "Request a new link", href: "/sign-in" }}
      backLink={{ label: "Back to sign in", href: "/sign-in" }}
    />
  );
}

Props

Behavior notes

• This is the simplest screen in the set: it has no labels prop and no interactive state at all, just conditional rendering of icon, heading, description, primaryButton, and backLink, each independently.
• Unlike Auth20 (Check Your Inbox), description here is rendered as plain text, not through dangerouslySetInnerHTML, so it cannot contain inline HTML like a bolded email address.
• primaryButton and backLink both render as plain asChild/next/link anchors; there is no token-refresh or resend call wired in, so requesting a new link is left entirely to whatever primaryButton.href points at.
• The layout (centered icon circle, heading, description, full-width primary button, back link with ArrowLeft) closely mirrors Auth20's structure, minus the resend countdown, making this effectively the "static" counterpart to that block's timed variant.