Auth8: Welcome Back Unlock

Full-height re-authentication screen for an already-known user: their avatar, name, and email sit above a single password field, a forgot-password link, and a switch-account prompt. There is no email input at all, since the session already knows who is signing 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/auth8?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth8.tsx and the button, input, field, and avatar shadcn/ui primitives it's built on.

Quick start

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

import { Auth8, auth8Demo } from "@/components/beste/block/auth8";

export default function UnlockPage() {
  return <Auth8 {...auth8Demo} />;
}

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

import { Auth8 } from "@/components/beste/block/auth8";

export default function UnlockPage() {
  return (
    <Auth8
      user={{
        name: "Jane Cooper",
        email: "[email protected]",
        avatar: { src: "https://example.com/jane.jpg", alt: "Jane Cooper" },
      }}
      heading="Welcome back"
      forgotPasswordLink={{ label: "Forgot password?", href: "/forgot-password" }}
      switchAccountPrompt={{ text: "Not you?", linkLabel: "Use a different account", href: "/sign-in" }}
      labels={{
        password: "Password",
        passwordPlaceholder: "Enter your password",
        submit: "Continue",
        passwordToggle: "Toggle password visibility",
      }}
    />
  );
}

Props

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

type Auth8Labels = {
  password?: string;
  passwordPlaceholder?: string;
  submit?: string;
  passwordToggle?: string;
};

Behavior notes

• The <form> only calls e.preventDefault() on submit; there is no onSubmit prop, so nothing actually re-authenticates the user until the integrator wires a handler.
• The password show/hide toggle is local useState, a type="button" icon button swapping Eye/EyeOff and the input's type between password and text.
• The avatar only renders when user.avatar is set; its AvatarFallback initials are computed by splitting user.name on spaces and taking each part's first letter.
• The submit button and password field label each render conditionally on labels.submit and labels.password being present, not through separate boolean props.
• Unlike the other sign-in blocks in this set, there is no email field or social login row: the layout assumes the identity is already known and only the password needs re-entering.