Two Factor Setup

Two-factor setup: method, QR code or phone, code verification. Pro · Account and access › Security and sign-in

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add two-factor-setup

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { TwoFactorSetup } from 'valyro-ui-pro';

Prop	Type	Default
`step`	`number`		Current step (controlled): 0 method, 1 connect, 2 verify, 3 done.
`defaultStep`	`number`		Initial `step` when uncontrolled.
`onStepChange`	`(step: number) => void`		Called with the new `step` when it changes.
`method`	`'app' \| 'sms'`		Chosen method (controlled).
`defaultMethod`	`'app' \| 'sms'`		Initial `method` when uncontrolled.
`onMethodChange`	`(method: TwoFactorMethod) => void`		Called with the new `method` when it changes.
`qrCode`	`ReactNode`		QR code of the authenticator secret (an <img> or an SVG you generate).
`secret`	`string`		The same secret as text, for typing in by hand.
`onVerify`	`(code: string, method: TwoFactorMethod, phone: string) => boolean \| Promise<boolean>`		Checks a code; return false (or a promise of false) to show an error. A throw or rejection shows `verifyFailed`.
`onSendCode`	`(phone: string) => void \| Promise<void>`		SMS: sends the code when the phone number is confirmed; the setup waits for it and stays put if it fails.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the title (default 2).
`labels`	`Partial<TwoFactorSetupLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Active Sessions — Active sessions: current device, suspicious sign-ins, revoke access
Access Tokens — Personal access tokens: scope, last used, revoke
Age Gate — Age verification: date of birth, remember me, deny under the limit
Profile Details — Profile: completeness, verified contacts, fields
Address Book — Address book: home, work, default addresses and actions
Social Profiles — Linked social profiles: reorder, verify, copy link
Settings Panel — Settings page: section navigation, unsaved-changes bar, danger zone
Permission Matrix — Roles and permissions matrix: inheritance, locks, bulk toggles, draft changes
Audit Log — Activity log: filters, field diffs, CSV export, load more
Privacy Center — Privacy center: score, setting groups, protection counters
Support Center — Support: contact channels with status, tickets with filters