Email-First Sign In

Auth34: Email-First Sign In

A full-height, centered two-step sign-in card that first collects the email in a single field behind a "Continue" button, then swaps to a password step that shows the entered email in an editable summary row, a password input with a show/hide toggle, an optional forgot-password link, and a submit button, with an optional signup prompt 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/auth34?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth34.tsx, plus the button, input, and field shadcn/ui primitives it uses for the continue/submit buttons, the email and password inputs, and the labeled field groups.

Quick start

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

import { Auth34, auth34Demo } from "@/components/beste/block/auth34";

export default function SignInPage() {
  return <Auth34 {...auth34Demo} />;
}

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

import { Auth34 } from "@/components/beste/block/auth34";

export default function SignInPage() {
  return (
    <Auth34
      heading="Sign in"
      description="Enter your email to get started."
      labels={{
        email: "Email",
        emailPlaceholder: "you@example.com",
        password: "Password",
        passwordPlaceholder: "Enter your password",
        continue: "Continue",
        submit: "Sign in",
        change: "Change",
        passwordToggle: "Toggle password visibility",
      }}
      forgotPasswordLink={{ label: "Forgot password?", href: "/reset" }}
      signupPrompt={{ text: "Don't have an account?", linkLabel: "Sign up", href: "/signup" }}
    />
  );
}

Props

type Labels = {
  email?: string;
  emailPlaceholder?: string;
  password?: string;
  passwordPlaceholder?: string;
  continue?: string;
  submit?: string;
  change?: string;
  passwordToggle?: string;
};

Behavior notes

• Step state is an internal useState<"email" | "password"> that starts at "email"; the "Continue" button only calls setStep("password") and the "Change" button only calls setStep("email"), so there is no callback to observe or control the current step from outside.
• The typed email lives in a local useState("") bound to the email input, and is never lifted out via a prop or callback; on the password step it is echoed in a summary row as email || emailPlaceholder, so an empty email falls back to showing the placeholder text.
• The form has no submit handler beyond onSubmit={(e) => e.preventDefault()}, and the "Sign in" button is a plain type="submit", so authentication, validation, and navigation are entirely left to the integrator.
• Each labeled section renders only when its label string is present: the email field needs labels.email, the "Continue" button needs labels.continue, the password field needs labels.password, and the submit button needs labels.submit; passing empty strings hides those elements.
• The password visibility toggle is driven by a local showPassword state and swaps the input type between "text" and "password" while flipping the Eye / EyeOff icon; its accessible name comes from labels.passwordToggle.
• The password input receives autoFocus, so it grabs focus the moment the password step renders.
• Both forgotPasswordLink and signupPrompt render through next/link, and the section stretches to min-h-screen so the card stays vertically centered in the viewport.