Two-Factor Setup

Complete 2FA setup flow with QR code and recovery codes

SaaSAuth

Overview

TwoFactorSetup guides users through a three-step 2FA enrollment flow: scanning a QR code (or entering a secret key manually), verifying the TOTP code from their authenticator app, and saving recovery codes. It includes sub-components QrCodeDisplay, SecretKeyDisplay, and RecoveryCodesDisplay.

Usage

import { TwoFactorSetup } from "@leanicon/web-builder-library/saas";

<TwoFactorSetup
  setupData={{
    totpSecret: "JBSWY3DPEHPK3PXP",
    otpAuthUrl: "otpauth://totp/MyApp:[email protected]?secret=JBSWY3DPEHPK3PXP&issuer=MyApp",
    recoveryCodes: ["ABCD-1234", "EFGH-5678", "IJKL-9012"],
  }}
  onVerifyCode={async (code) => verifyTotpCode(code)}
  onComplete={() => router.push("/settings")}
/>;

Variants

Default

Set Up Two-Factor Authentication

Scan QR Code

Verify Code

Save Recovery Codes

Scan this QR code with your authenticator app

Can't scan? Enter this key manually:

JBSW Y3DP EHPK 3PXP

With App Name

Set Up Two-Factor Authentication

Scan QR Code

Verify Code

Save Recovery Codes

Scan this QR code with your authenticator app

Can't scan? Enter this key manually:

JBSW Y3DP EHPK 3PXP

Scan Step

Set Up Two-Factor Authentication

Scan QR Code

Verify Code

Save Recovery Codes

Scan this QR code with your authenticator app

Can't scan? Enter this key manually:

JBSW Y3DP EHPK 3PXP

Verify Step

Set Up Two-Factor Authentication

✓

Scan QR Code

Verify Code

Save Recovery Codes

Enter the 6-digit code from your app

Recovery Codes Step

Set Up Two-Factor Authentication

✓

Scan QR Code

✓

Verify Code

Save Recovery Codes

Save these recovery codes in a safe place

Each code can only be used once. If you lose access to your authenticator, you'll need these codes to sign in.

ABCD-1234EFGH-5678IJKL-9012MNOP-3456QRST-7890UVWX-1234YZAB-5678CDEF-9012

I've saved these codes

With Error

Set Up Two-Factor Authentication

✓

Scan QR Code

Verify Code

Save Recovery Codes

Enter the 6-digit code from your app

Something went wrong. Please try again.

Loading State

Set Up Two-Factor Authentication

Scan QR Code

Verify Code

Save Recovery Codes

Scan this QR code with your authenticator app

Can't scan? Enter this key manually:

JBSW Y3DP EHPK 3PXP

With Custom Labels

Configurar Autenticacion de Dos Factores

Escanear

Verificar

Codigos

Scan this QR code with your authenticator app

Can't scan? Enter this key manually:

JBSW Y3DP EHPK 3PXP

Props

Name	Type	Default	Required
`setupData`	`TwoFactorSetupData`	—	Yes
`onVerifyCode`	`(code: string) => Promise<boolean>`	—	Yes
`onComplete`	`() => void`	—	Yes
`onCancel`	`(() => void)`	—	No
`currentStep`	`enum`	—	No
`onStepChange`	`((step: TwoFactorSetupStep) => void)`	—	No
`appName`	`string`	—	No
`userEmail`	`string`	—	No
`labels`	`TwoFactorSetupLabels`	—	No
`className`	`string`	—	No
`isLoading`	`boolean`	`false`	No
`error`	`string`	—	No