Email-First Sign In

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth34.tsx instead.

Usage

The file also exports auth34Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth34, auth34Demo } from "@/components/blocks/auth/auth34";

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

Props

Behavior notes

• Real client state: the email input is controlled, and clicking Continue with a non-empty value transitions to the password step, no real validation (format checks, existence checks) is performed, only a non-empty check.
• Once in the password step, the entered email is shown as static text with an Edit button that returns to the editable email step, discarding nothing since the email value is preserved in state.
• The final Sign in button is left inert, actually authenticating is a backend action out of scope for this demo.