Security settings
ProAn account security page with guided two-factor setup, password change and active sessions.
Security
Control how you sign in to Fieldnote as maya@fieldnote.example.
Two-factor authentication
Ask for a code from your authenticator app when you sign in on a new device.
Password
Last changed March 4, 2026
Active sessions 5
Devices signed in to your account in the last 30 days.
- MacBook ProThis deviceChrome 129 · San Francisco, US · Active now
- iPhone 15 ProFieldnote for iOS · San Francisco, US · 2 hours ago
- Windows desktopEdge 128 · Austin, US · Yesterday at 4:12 PM
- iPad AirSafari 18 · Lisbon, PT · Sep 14
- ThinkPad X1New locationFirefox 130 · Berlin, DE · Sep 9
You stay signed in on this device
Press and hold for 1.2 seconds to confirm. With a keyboard, hold Space or Enter.- The security tab of account settings with two-factor setup, password change, and sessions.
- Guided TOTP setup that walks through scan, verify, and backup codes.
- Use settings-page for general account and workspace settings.
- Use api-keys for managing developer tokens.
- Use audit-log for the history of security events.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as the security tab of account settings. Connect Verify to your TOTP check, the backup codes to your generator, Update password to your password endpoint, and Revoke and Sign out to your session API.
import { SecuritySettings } from "@/components/arc/blocks/security-settings/security-settings"; export default function SecurityTab() { return ( <section> <SecuritySettings /> </section> );}SecuritySettings
An account security page with guided two-factor setup (scan, verify, backup codes), password change with strength meter, and active sessions you can revoke. Account, setup key, demo code (246810), backup codes and initialSessions are sample data in security-settings.tsx.
No props.
- Password errors render in a role="alert" linked with aria-describedby and aria-invalid; the field uses autoComplete="current-password".
- After revoking a session, focus moves to the neighbouring Revoke button or the sessions heading.
- A polite live region announces saves, verification and session changes.
- Two-factor steps advance along a rail with a gliding marker, and sections expand with a height spring.
- Reduced motion uses instant transitions and skips height animation.
- Below a 640px container backup codes drop to two columns.
- Below 560px the QR code stacks above the setup key and section padding tightens.
- Sections are plain DOM with height springs when expanding; there is no loop or observer cost.
- The session list is not virtualized, which is fine for the handful of sessions an account normally has.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as the security tab of account settings.
- Verification, backup code download, password update and session revoke are simulated with timers; replace them with your TOTP check, code generator, password endpoint and session API.
- Replace the in-file ACCOUNT, SETUP_KEY, QR pattern and initialSessions with real data from props or a fetch.
- Composes Arc Button, Badge, Checkbox, Copy button, Hold to confirm, OTP input, Password field and Password strength.
The full library index for assistants is at /llms.txt.