# Sign in

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/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 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](https://beamline.io/components/auth)).
- Creating an account ([signup-form](https://beamline.io/components/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](https://beamline.io/components/password-field)
- [otp-input](https://beamline.io/components/otp-input)
- button
- marker
- avatar
- spinner

## Dependencies

`lucide-react`, `motion`, `react-hook-form`

## Import

```tsx
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](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…
- [Auth page](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…
- [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 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…