Skip to content
ENالعربية

Two-factor setup

Beta
Get Ritla UI

Turn on an authenticator app in five screens: intro, scan the QR code or type the key, confirm with a 6-digit code, save ten backup codes, done.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

EnglishMirroredArabic
DesktopMobile
LTR →

Examples

Scan the QR code

EnglishMirroredArabic
DesktopMobile
LTR →

Confirm with the code

EnglishMirroredArabic
DesktopMobile
LTR →

Save the backup codes

EnglishMirroredArabic
DesktopMobile
LTR →

Done

EnglishMirroredArabic
DesktopMobile
LTR →

Installation

  1. Add the block

    npx ritla add two-factor-setup

    Also works with shadcn: npx shadcn@latest add @ritla/two-factor-setup

Pricing

Built from

The Ritla UI components this block is made of. Each is installed with it.

Arabic and RTL notes

Mirrors

  • The screen, the buttons and the stepper mirror: step 1 stands on the right.

Does not mirror

  • The QR code, the manual key, the 6-digit code and the backup codes stay left to right: they are typed or read character by character.
Numerals
The key and the codes keep Western digits whatever the numerals setting, as the authenticator app shows them. Digits typed on an Arabic keyboard count as the same code.