Security

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

A person's account security on one page: how protected they are at a glance with the next step to take, password change with strength and rules, two-step sign-in set up by scanning a code, confirming one and saving recovery codes, passkeys added from the device and renamed in place, and every signed-in device with sign out one by one or everywhere else at once.

Use it for

The Security or Sign-in page of any product with accounts: password, two-step sign-in, passkeys and the devices signed in.
A security checkup that leads the person to the next protection to turn on.

Not for

Signing in (sign-in) or creating an account (signup-form).
Workspace-wide security policy for admins (roles-permissions, audit-log).
Profile fields (settings).

Anatomy

checkup: how many protections are on (password, two-step sign-in, passkey) as three marks and a meter, and the next one to turn on (the page's primary action)
password: when it was last changed, Change password
two-step sign-in: authenticator app on or off, recovery codes left, Regenerate codes, Turn off
set-up dialog in three steps in one tray: scan the code (or copy the key), enter the six digits, save the recovery codes (Copy all, Download, Done waits for “I've saved them”)
passkeys: name (rename in place), where it lives, added and last used, Remove (asks in place); Add a passkey waits for the device
devices: kind, browser and system, place and address, last active, This device, Sign out; Sign out everywhere else (hold to confirm)

States

loading; load failed (Try again)
checkup: all on, some off (the next step named)
password never set (passkey-only accounts): Set a password
change password: current wrong (the field says so), new too weak, mismatch, saving, saved
two-step off / setting up (code shown, code checking, wrong code, verified) / on (codes left, few left warned)
regenerating codes; turning off (confirm)
no passkeys; adding (waiting for the device), added (grows in), cancelled on the device; renaming; removing
devices: only this one; signing one out (fades); everywhere else (hold, then the others leave together)
partial data: an unknown place or address reads Unknown place, never blank
Cancel and closing the password form clear the current, new and confirmation drafts before it opens again.

Keyboard

Tab: the checkup's action, then each section's actions in order
Set-up dialog: focus starts on Copy key, moves to the code boxes on step two (typing the sixth digit checks it), then to Copy all
Rename a passkey: Enter saves, Esc cancels
Sign out everywhere else: hold Space or Enter

Motion

The checkup's meter eases and a mark draws its check as a protection turns on. The set-up dialog's tray eases between its three steps. Added passkeys grow into the list; removed ones and signed-out devices fade where they stood while the rest close up. A verified code's boxes turn green one after another. Reduced motion places everything at once.

Props

Prop	Type	Default	Description
`password`	`{ lastChanged: number \| null } \| null`	—	null for an account without a password (Set a password).
`onChangePassword`	`(current: string \| null, next: string) => Promise<void>`	—	Reject with an Error whose field is "current" for a wrong current password.
`twoFactor`	`{ enabled: boolean; codesLeft?: number }`	—
`onStartTwoFactor`	`() => Promise<{ uri: string; secret: string }>`	—	The otpauth URI for the code and the key to type by hand.
`onVerifyTwoFactor`	`(code: string) => Promise<string[]>`	—	Resolve with the recovery codes; reject for a wrong code.
`onDisableTwoFactor / onRegenerateCodes`	`() => Promise<void> / () => Promise<string[]>`	—
`passkeys / defaultPasskeys / onPasskeysChange`	`Passkey[]`	—
`onAddPasskey`	`() => Promise<Passkey>`	—	Run your WebAuthn registration; reject when the person cancels on the device.
`onRenamePasskey / onRemovePasskey`	`(id, name) => Promise<void> / (id) => Promise<void>`	—
`sessions / defaultSessions / onSessionsChange`	`AccountSession[]`	—
`onSignOutSession / onSignOutOthers`	`(id) => Promise<void> / () => Promise<void>`	—
`loading / error / onRetry`	`boolean / ReactNode / () => void \| Promise<unknown>`	—
`level`	`1 \| 2`	—
`className / classNames / style / ref`	`string / AccountSecurityClassNames / CSSProperties / Ref<HTMLDivElement>`	—

Built from

button
badge
dialog
alert-dialog
password-field
qr-code
otp-input
copy-button
inline-edit
confirm-morph
hold-to-confirm
progress
alert
checkbox
toast
skeleton
spinner

Dependencies

lucide-react, motion

Import

import { AccountSecurity } from "@/blocks/account-security/account-security";

Get it

Security is part of Beamline: 200+ components and 50+ complete screens for React that 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 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent