Passwordless Sign-In CardPRO

Auth53: Passwordless Sign-In Card

A single narrow card that asks only for an email, then replaces itself in place with a sent state that echoes the address back and offers to start again with another one.

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

Base UI flavor

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

This installs the block to components/beste/block/auth53.tsx, the badge6 component used for the eyebrow, and the shadcn/ui input and button primitives behind the form.

Quick start

The installed file exports auth53Demo alongside the block: the exact props behind the preview above. Spread it to get a working sign-in card in one line.

import { Auth53, auth53Demo } from "@/components/beste/block/auth53";

export default function SignInPage() {
  return <Auth53 {...auth53Demo} />;
}

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

import { Auth53 } from "@/components/beste/block/auth53";

export default function SignInPage() {
  return (
    <Auth53
      eyebrow="Members"
      heading="Sign in without a password"
      description="Type the address you subscribed with and we will send a link."
      label="Email address"
      placeholder="you@studio.com"
      submitLabel="Send me a link"
      sentHeading="Check your inbox"
      sentDescription="The link works once and expires in fifteen minutes."
      resendLabel="Use a different address"
      help={{ label: "Not sure which address you used?", href: "/help/address" }}
      note="Members get the archive in full."
    />
  );
}

Props

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

Behavior notes

• The sent state replaces the card's contents rather than appearing under them, so there is one card on the page in both states and nothing shifts.
• The submitted address is read from FormData and echoed back in the sent state, which is what lets a reader catch a typo before waiting for an email.
• State is a single string: an empty one means the form, a filled one means sent. resendLabel clears it and returns to the form.
• The field is typed email and required, so validation happens in the browser before the handler runs.
• Nothing is sent. Point the submit at your own passwordless endpoint when you wire it up.