Session Expired Sign In

Error27: Session Expired Sign In

The page a timed-out session lands on: an account strip shows who was signed in and when the session closed, a check line confirms the draft was saved, and a seal button takes them back in.

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

Base UI flavor

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

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

Quick start

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

import { Error27, error27Demo } from "@/components/beste/block/error27";

export default function SessionExpired() {
  return <Error27 {...error27Demo} />;
}

Then pass the account that just timed out, and send them back where they were:

import { Error27 } from "@/components/beste/block/error27";

export default function SessionExpired({
  user,
  returnTo,
}: {
  user: { name: string; email: string; image: string };
  returnTo: string;
}) {
  return (
    <Error27
      label="Session Expired"
      code="401"
      heading="We signed you out <strong>to keep the desk clean</strong>."
      description="After two hours without activity we close the session on purpose."
      labels={{ savedNote: "Your draft was saved automatically.", signedOutAt: "Signed out" }}
      signedOutAt="23 Jul 2026, 15:52 UTC"
      account={{
        name: user.name,
        email: user.email,
        avatar: { src: user.image, alt: "Portrait of the signed-out account holder" },
      }}
      button={{ label: "Get back in", href: `/sign-in?next=${returnTo}` }}
      switchLink={{ label: "Not you? Use another account", href: "/sign-in" }}
    />
  );
}

Props

type Error27Labels = {
  savedNote?: string;
  signedOutAt?: string;
};

type AccountInfo = {
  name: string;
  email: string;
  avatar: { src: string; alt: string };
};

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

Behavior notes

• The account strip is a wrapping flex row: the avatar and identity sit on the left and the timestamp on the right, and the timestamp drops below the identity at narrow widths instead of squeezing it.
• The timestamp block only renders when signedOutAt is set; its caption comes from labels.signedOutAt, so the value and its label are separate props.
• Long addresses truncate with an ellipsis inside the strip rather than widening the card.
• The autosave line renders whenever labels.savedNote is set and is independent of the account strip, so it also works on its own above the button row.
• Everything is static markup with no client state, so the page renders on the server and works with JavaScript disabled.