# Auth page A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/auth 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](https://beamline.io/components/sign-in) / sign-up route of a product, full page or filling a frame. ## Not for - A [sign-in](https://beamline.io/components/sign-in) card inside an existing layout or modal ([sign-in](https://beamline.io/components/sign-in)). - An account creation card on its own ([signup-form](https://beamline.io/components/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` | — | | ## Built from - [sign-in](https://beamline.io/components/sign-in) - [signup-form](https://beamline.io/components/signup-form) ## Dependencies `lucide-react`, `motion`, `react-hook-form` ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Blocks - [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with… - [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime… - [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last… - [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a… - [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a… - [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More… - [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in… - [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation… - [Sign in](https://beamline.io/components/sign-in): 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… - [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your… - [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the… - [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account… - [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…