Two-Factor Verify

Dialog component for 2FA verification

SaaSAuth

Overview

TwoFactorVerify presents a 2FA verification form during login. Users enter a 6-digit TOTP code from their authenticator app, or switch to recovery code input. It supports a "trust this device" checkbox, attempt count warnings, loading states, and custom labels for i18n.

Usage

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

<TwoFactorVerify
  onVerify={async ({ code, isRecoveryCode, trustDevice }) => {
    await verifyCode(code, isRecoveryCode, trustDevice);
  }}
  showTrustDevice={true}
  showRecoveryCodeOption={true}
/>;

Variants

Default

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

With Trust Device

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

Without Trust Device

Two-Factor Authentication

Enter the code from your authenticator app

Without Recovery Option

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

Loading State

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

With Error

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

Low Attempts Remaining

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

Last Attempt

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

All Features Enabled

Two-Factor Authentication

Enter the code from your authenticator app

You won't need to enter a code for 30 days

Minimal UI

Two-Factor Authentication

Enter the code from your authenticator app

With Custom Labels

Verificacion de dos factores

Ingrese el codigo de su aplicacion autenticadora

You won't need to enter a code for 30 days

Props

NameTypeDefaultRequiredDescription
onVerify(data: { code: string; useRecoveryCode: boolean; trustDevice: boolean; }) => void—Yes
attemptsRemainingnumber—No
showTrustDevicebooleantrueNo
showRecoveryCodeOptionbooleantrueNo
challengeIdstring—No
labelsTwoFactorVerifyLabels—No
classNamestring—No
isLoadingbooleanfalseNo
errorstring—No