Sign in

A React block (a whole screen) in Beamline's Blocks category.

The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in state; every step runs on your handlers.

Use it for

Signing people in, inside your own page, panel or modal: password, emailed code, magic link, passkey or single sign-on, whichever handlers you pass.

Not for

The whole sign-in route with product mark, backdrop and legal links (auth).
Creating an account (signup-form).

Anatomy

card (double bezel)
heading and description
single sign-on buttons
passkey button
"or" rule
email field
password field (reveal, Caps Lock hint, forgot link)
submit
other-method links
code step (code boxes, resend countdown, change email)
link step (check your inbox, resend)
signed-in step (avatar, name, email)
footer (No account? Sign up)

Variants

method: password, code, link

States

start
invalid email / empty password (inline messages)
submitting (button keeps size, aria-busy)
field error from your handler (AuthFieldError)
form error (any other rejection)
code sent (resend after a countdown)
code checking
wrong code (cleared, focus back in the boxes)
link sent
provider or passkey in flight
signed in
no method configured

Keyboard

Tab moves through providers, passkey, fields, submit and links in reading order
Enter submits the form
the code step focuses the code boxes; typing or pasting all digits checks the code without a click
Use a different email returns focus to the email field
each new step moves focus to its first field or its heading

Motion

A new step arrives on --motion-in (fade and a 6px rise, no overshoot) and replaces the old one at once, so focus never waits on an exit. Reduced motion keeps the fade only.

Props

Prop	Type	Default	Description
`product`	`string`	—	Your product's name, in the heading: "Sign in to Northline".
`title / description`	`ReactNode`	—	Replace the heading and the line under it.
`method / defaultMethod / onMethodChange`	`"password" \| "code" \| "link"`	—	The way in shown first. A method exists only when its handlers are passed; the others are offered as links.
`onPasswordSignIn`	`({ email, password }) => Promise<AuthAccount>`	—	Check the password. Reject with AuthFieldError to blame a field, or any Error for a message above the button.
`onRequestCode / onVerifyCode`	`(email) => Promise<void> / (email, code) => Promise<AuthAccount>`	—	Email a one-time code, then check it.
`onRequestLink`	`(email) => Promise<void>`	—	Email a sign-in link; the card then says where to look. Your link route finishes the sign-in.
`onPasskey`	`() => Promise<AuthAccount>`	—	Run the WebAuthn ceremony. Also turns on passkey autofill in the email field.
`providers / onProvider`	`AuthProvider[] / (provider) => Promise<void \| AuthAccount>`	—	Single sign-on buttons with your own icons. Resolve with the account if sign-in completes in place; usually you redirect.
`onForgotPassword`	`(email) => void`	—	Shows "Forgot password?" under the password field.
`onSwitchToSignUp`	`() => void`	—	Shows "No account? Sign up" in the footer.
`onSuccess`	`(account, via) => void`	—	Runs once sign-in succeeds, by any route: navigate here.
`defaultEmail`	`string`	—
`codeLength`	`number`	`6`
`resendAfter`	`number`	`30`	Seconds before a new code or link can be sent.
`headingLevel`	`1 \| 2 \| 3`	`1`
`className`	`string`	—
`classNames`	`SignInClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—
`providerClassNames`	`AuthProviderListClassNames`	—	Shared provider root/button/icon slots; all rows reserve the icon slot if any supplied provider has one.

Built from

bezel
form
input
password-field
otp-input
button
marker
avatar
spinner

Dependencies

lucide-react, motion, react-hook-form

Import

import { SignIn } from "@/blocks/sign-in/sign-in";

Get it

Sign in is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent