KQ-1712 · AUTHENTICATOR/PAIR

Authenticator Pair

An authenticator setup: a QR code with the secret written beside it for typing by hand, then a six-digit check. When it comes into view the QR assembles from its centre outward in square rings of modules, each fading up from 0.6 scale on springs.snap with the finder eyes landing in their ring; digits drop into their slots on springs.flick and a paste lands left to right. A correct code folds the rings back into the centre from the outside in, a disc grows on snap, a check draws across it on flick and the step marker's pill slides on to On; a wrong code nudges on a short tween and keeps the digits.

KQ-1712 · AUTHENTICATOR/PAIR

Turn on two-step sign-in

Fieldline · mara@fieldline.io

Scan, current
Verify
On

Fieldline

Scan this code with your authenticator appCan’t scan? Type this key instead:K7QM 2XRA 4WDN 6HTCTime-based · 6 digits · every 30 s
Enter the six-digit code it shows
Paste works too. The code checks itself when it’s complete.

The demo app shows 418 207

scan · key k7qm 2xra 4wdn 6htc

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/authenticator-pair

Props

secret: string; default defaultAuthenticatorSecret; The shared secret, base32, shown in groups of four for typing by hand.
account: string; default "mara@fieldline.io"; The account the app will list.
issuer: string; default "Fieldline"; The service the app will list.
modules: boolean[][]; default seeded stand-in; A real QR matrix from your encoder (true is dark). Omitted, a seeded 25 × 25 stand-in with real finder, timing and alignment patterns is drawn from the secret.
digits: number; default 6; How many digits the app shows.
value / defaultValue: string; default — / ""; The code, controlled or initial; non-digits are dropped.
onValueChange: (code) => void; default —; Fires from every keystroke or paste in the code field, digits only.
onVerify: (code) => boolean | Promise<boolean>; default —; Checks a full code. True turns two-step on; false keeps the digits and says so; a throw says the check failed. Omitted, any full code is accepted.
onCancel: () => void; default —; Cancel was pressed in the footer.
onCopySecret: (secret) => void; default —; The setup key was copied (spaces removed).
onDone: () => void; default —; Done was pressed after two-step turned on.
autoSubmit: boolean; default true; Check the code as soon as the last digit lands, whether typed, pasted or set by the host; each code is checked once.
assemble: "inView" | "mount" | "none"; default "inView"; When the QR assembles from its centre; the server renders it whole.
status: "ready" | "loading" | "error"; default "ready"; A still placeholder while the key is made; a message and Try again on error.
onRetry: () => void; default —; Try again was pressed after the key failed to load.
moduleStyle: "square" | "dot" | "soft"; default "square"; Crisp squares, dots with round finders, or soft rounded squares.
density: "compact" | "cozy" | "roomy"; default "cozy"; QR size, paddings, slots and type.
accent: string; default "var(--accent-bright)"; The step marker, the next slot, the finder eyes (deepened so they still scan), the check disc and Verify, any CSS colour.
maxHeight: number; default 560; Tallest the panel grows, in px, before its body scrolls.
disabled: boolean; default false; Nothing can be typed, copied or pressed.
className: string; default —; Classes for the wrapper.

Prop	Type	Default	Description
secret	string	defaultAuthenticatorSecret	The shared secret, base32, shown in groups of four for typing by hand.
account	string	"mara@fieldline.io"	The account the app will list.
issuer	string	"Fieldline"	The service the app will list.
modules	boolean[][]	seeded stand-in	A real QR matrix from your encoder (true is dark). Omitted, a seeded 25 × 25 stand-in with real finder, timing and alignment patterns is drawn from the secret.
digits	number	6	How many digits the app shows.
value / defaultValue	string	— / ""	The code, controlled or initial; non-digits are dropped.
onValueChange	(code) => void	—	Fires from every keystroke or paste in the code field, digits only.
onVerify	(code) => boolean \| Promise<boolean>	—	Checks a full code. True turns two-step on; false keeps the digits and says so; a throw says the check failed. Omitted, any full code is accepted.
onCancel	() => void	—	Cancel was pressed in the footer.
onCopySecret	(secret) => void	—	The setup key was copied (spaces removed).
onDone	() => void	—	Done was pressed after two-step turned on.
autoSubmit	boolean	true	Check the code as soon as the last digit lands, whether typed, pasted or set by the host; each code is checked once.
assemble	"inView" \| "mount" \| "none"	"inView"	When the QR assembles from its centre; the server renders it whole.
status	"ready" \| "loading" \| "error"	"ready"	A still placeholder while the key is made; a message and Try again on error.
onRetry	() => void	—	Try again was pressed after the key failed to load.
moduleStyle	"square" \| "dot" \| "soft"	"square"	Crisp squares, dots with round finders, or soft rounded squares.
density	"compact" \| "cozy" \| "roomy"	"cozy"	QR size, paddings, slots and type.
accent	string	"var(--accent-bright)"	The step marker, the next slot, the finder eyes (deepened so they still scan), the check disc and Verify, any CSS colour.
maxHeight	number	560	Tallest the panel grows, in px, before its body scrolls.
disabled	boolean	false	Nothing can be typed, copied or pressed.
className	string	—	Classes for the wrapper.