Auth page

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

The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm cards switching in place with focus following, and legal links.

Use it for

The sign-in / sign-up route of a product, full page or filling a frame.

Not for

A sign-in card inside an existing layout or modal (sign-in).
An account creation card on its own (signup-form).

Anatomy

header (product mark and name)
dotted field with a mouse-following light
notice (optional: an invitation, a maintenance note)
card stage (SignIn or SignupForm)
footer (legal links)

Variants

mode: sign-in, sign-up

States

sign-in (every SignIn state)
sign-up (every SignupForm state)
no sign-up (signUp not passed: no switch link)
notice shown
fullScreen

Keyboard

Tab moves through the card, then the legal links
a card's Sign up / Sign in button swaps cards and focus lands in the new card's first field

Motion

The incoming card fades in with a 10px rise on --motion-in and replaces the old one at once. The light under the mouse follows only a mouse pointer and is written to CSS variables (no re-render); reduced motion removes it.

Props

Prop	Type	Default	Description
`signIn` (required)	`SignInProps (without product, onSwitchToSignUp, headingLevel)`	—	The sign-in card's handlers: onPasswordSignIn, onRequestCode + onVerifyCode, onRequestLink, onPasskey, providers + onProvider, onSuccess.
`signUp`	`SignupFormProps (without product, onSwitchToSignIn, headingLevel)`	—	The sign-up card's handlers. Without them there is no sign-up link.
`mode / defaultMode / onModeChange`	`"sign-in" \| "sign-up"`	`"sign-in"`
`product`	`string`	—	Beside the mark and in the sign-in heading.
`logo`	`ReactNode`	—	Your mark; defaults to an accent arc.
`notice`	`ReactNode`	—	Above the card: who invited you, a maintenance note.
`termsHref / privacyHref`	`string`	—	Footer links; the sign-up consent uses them too.
`fullScreen`	`boolean`	—	Fill the viewport (100dvh).
`className`	`string`	—
`classNames`	`AuthClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—

Built from

Dependencies

lucide-react, motion, react-hook-form

Import

import { Auth } from "@/blocks/auth/auth";

Get it

Auth page 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