QR Code Device Login

Auth31: QR Code Device Login

A full-height, centered cross-device sign-in panel that stacks an optional heading and description over a bordered QR image, a monospace manual fallback code with its own label, a pulsing "waiting for confirmation" indicator, and an alternative sign-in link, each section rendered only when its prop is supplied.

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

Base UI flavor

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

This installs the block to components/beste/block/auth31.tsx.

Quick start

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

import { Auth31, auth31Demo } from "@/components/beste/block/auth31";

export default function Page() {
  return <Auth31 {...auth31Demo} />;
}

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

import { Auth31 } from "@/components/beste/block/auth31";

export default function Page() {
  return (
    <Auth31
      heading="Sign in with your phone"
      description="Scan this code with the app to sign in instantly."
      qrImage={{ src: "/login-qr.svg", alt: "QR code to sign in" }}
      manualCode="WXYZ-4827"
      labels={{
        manualCodeLabel: "Or enter this code in the app",
        waiting: "Waiting for confirmation…",
      }}
      alternativeLink={{ label: "Sign in another way", href: "/login" }}
    />
  );
}

Props

type QrImage = {
  src: string;
  alt: string;
};

type Labels = {
  manualCodeLabel?: string;
  waiting?: string;
};

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

Behavior notes

• Every section is independently conditional: heading, description, qrImage, manualCode, the waiting indicator, and alternativeLink each render only when their prop is truthy, so passing nothing yields an empty centered container.
• The waiting indicator is purely decorative animation: it shows a bg-primary dot with an animate-ping halo but there is no polling, timer, or callback, so real login-confirmation logic and any redirect are left to the integrator.
• manualCode is displayed as static text in font-mono with tracking-widest; there is no copy-to-clipboard button or interaction attached to it.
• Inside labels, manualCodeLabel only appears when manualCode is also set (it lives inside the manualCode block), while waiting renders its indicator independently of any other prop.
• The QR image uses a raw <img> element with qrImage.src passed straight through and a fixed size-44, so no Next.js image optimization or sizing logic is applied.
• alternativeLink renders a next/link <Link> pointing at href; it performs plain client navigation with no auth handling of its own.
• The outer <section> is min-h-screen and centers its max-w-sm content both axes, so the block is designed to own a full viewport rather than sit inside a narrow card.