Auth42: Invite Code Gate

A full-height centered auth gate that stacks an optional circular icon, a heading, and a description over a bordered card holding a single monospaced, center-aligned invite-code input and a full-width submit button, with an optional "request an invite" prompt link below the card.

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

Base UI flavor

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

This installs the block to components/beste/block/auth42.tsx, plus the button, input, and field shadcn/ui primitives it uses for the submit button, the code input, and the field label/description scaffolding.

Quick start

The installed file exports auth42Demo alongside the block: the exact props behind the preview above. Spread it to get a working invite-code gate in one line.

import { Auth42, auth42Demo } from "@/components/beste/block/auth42";

export default function InviteGatePage() {
  return <Auth42 {...auth42Demo} />;
}

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

import { KeyRound } from "lucide-react";
import { Auth42 } from "@/components/beste/block/auth42";

export default function InviteGatePage() {
  return (
    <Auth42
      icon={<KeyRound className="size-6" />}
      heading="Enter your invite code"
      description="Access is invite-only during the beta."
      labels={{ code: "Invite code", codePlaceholder: "XXXX-XXXX", submit: "Continue" }}
      requestPrompt={{ text: "Don't have a code?", linkLabel: "Request access", href: "/waitlist" }}
    />
  );
}

Props

Behavior notes

• The form has no real submission logic: onSubmit calls e.preventDefault() only, and the input is uncontrolled with no value/onChange, so reading and validating the entered code is entirely up to the integrator.
• Every visible element is conditionally rendered: the icon badge, heading, description, labels.code label, labels.submit button, and the entire requestPrompt block each render only when their prop is truthy.
• The input always renders even when labels.codePlaceholder is omitted (the placeholder simply becomes undefined), and it is styled text-center font-mono tracking-widest with autoComplete="off".
• The label and input are linked through a useId()-derived id (${fieldId}-code), so multiple instances on one page stay accessible without id collisions.
• The requestPrompt.href renders through next/link, so it navigates as an internal route by default; pass an absolute URL (as the demo does with https://beste.co) for external destinations.
• The section is min-h-screen and vertically centers its max-w-md column, so the block is intended to own the full viewport rather than sit inside other page content.