Face ID Sign In

Auth10: Face ID Sign In

Full-height biometric sign-in screen built around an animated face-scan viewfinder: bracketed corners and a face icon cycle through idle, scanning, and recognized states when the scan button is clicked, ending in a continue action. A password fallback link sits below regardless of scan status.

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

Base UI flavor

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

This installs the block to components/beste/block/auth10.tsx and the button shadcn/ui primitive it's built on.

Quick start

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

import { Auth10, auth10Demo } from "@/components/beste/block/auth10";

export default function FaceIdPage() {
  return <Auth10 {...auth10Demo} />;
}

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

import { Auth10 } from "@/components/beste/block/auth10";

export default function FaceIdPage() {
  return (
    <Auth10
      heading="Sign in with Face ID"
      description="Look at your device to verify it's you."
      labels={{
        scanPrompt: "Position your face in the frame",
        scanning: "Scanning…",
        success: "Face recognized",
        scanButton: "Scan my face",
      }}
      continueButton={{ label: "Continue", href: "/dashboard" }}
      fallbackLink={{ label: "Use password instead", href: "/sign-in" }}
    />
  );
}

Props

type Auth10Labels = {
  scanPrompt?: string;
  scanning?: string;
  success?: string;
  scanButton?: string;
};

Behavior notes

• Clicking the scan button runs startScan, which is guarded by if (status !== "idle") return, so it's a no-op once a scan is already in progress or finished.
• The scan is a purely client-side simulation: startScan sets status to "scanning" and a setTimeout(..., 1800) flips it to "success" after 1.8 seconds. There is no camera access or real biometric API involved.
• The frame's corner brackets and center icon change together with status: neutral border-border and a muted ScanFace icon at idle, border-primary with an animate-pulse icon plus an animate-ping ring at scanning, and border-emerald-500 with a CircleCheck icon at success.
• The action area below the frame swaps between three mutually exclusive states based on status: the scan button (idle), a disabled button with a spinning Loader2 icon (scanning), and the continueButton link (success). Only one renders at a time.
• fallbackLink renders independently of status and stays visible through every state.