Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

OTP Backup Code Switch

ProNew

Two-step sign-in with an escape hatch: the authenticator code by default and a link that swaps it for a backup code field, with focus, announcement and a message for each kind.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this on the second step of sign-in for accounts with an authenticator app, so a lost phone is not a lockout.

Do not show backup codes on the sign-in page, and do not allow unlimited tries: combine with otp-lockout-attempts logic on the server.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

OtpBackupCodeSwitch

Prop	Type	Default	Description
`verify`	`(code: string, kind: authenticator \| backup) => Promise<boolean>`	-	Check the code; backup codes arrive normalised.
`onVerified`	`() => void`	-	Accepted.

Accessibility

Switching moves focus to the new field and announces "Enter a backup code" or "Enter the six-digit code".
Backup codes are normalised before verifying (dashes and spaces removed, lower case), so how they are typed does not matter.
Each method has its own error text ("not valid or was already used" for a backup code) and switching clears it.

Keyboard

Key	Action
Type six digits	verifies the authenticator code
Enter in the backup field	verifies it
Enter on the link	switches method

Testing

The pattern ships a Testing Library test (otp-backup-code-switch.test.tsx) that covers the default method, switching with focus, normalising, messages per kind and the empty backup field.