Each popular 2FA method in modern digital products, including SMS OTP verification, TOTP authenticator applications, and biometrics has a different user flow for configuration, verification, and recovery; however, each 2FA flow has a standard pattern that users are usually familiar with.

2FA user flows should use the highest possible security to protect user accounts, but should also be simple, transparent, and easy for users to help them adapt to 2FA as a general security requirement. It is the responsibility of a good designer to optimally balance security and usability with better UX flow design in the integration of popular 2FA methods:

Setup and verification flow by method

The 2FA configuration and verification process has a standard user flow pattern that your digital product design can adopt to increase security and convenience:

SMS OTP verification

The 2FA SMS flow involves registering a 2FA phone number and proving the user’s identity via a 4 or 6 digit OTP:

Configuration flow

The configuration user flow uses the following standard flow pattern by registering a 2FA phone number:

1. Select SMS OTP verification as the 2FA method.
2. Authenticate with the account using login credentials (as a security requirement).
3. Enter a valid phone number and continue (OTP is now sent).
4. Enter or copy-paste (if users are using the same device) OTP. Resends are available for SMS delivery issues or time limits.
5. 2FA setup successful.

Verification flow

The SMS OTP verification flow is almost the same as the configuration settings, but the phone number is automatically retrieved from the product backend:

1. Enter login credentials.
2. View 2FA prompts. Click to send an OTP, or the product sends it automatically.
3. Enter or copy-paste the OTP.
4. Authentication successful.

Common UX pain points

• User delay— The user may misplace the phone or forget the phone number used for 2FA, so the app may ask the user for confirmation before sending the OTP and displaying the last two digits of the phone number.
• Copy-paste error — Users should be able to copy-paste OTP instantly. You must use a standard PIN format (4 digits or 6 digits) or autofill (or autoverify) if your product is a mobile application

TOTP authenticator application

The TOTP authenticator app 2FA flow helps users configure and use the preferred authenticator app for authentication:

Configuration flow

The authenticator app and product backend require a shared secret to enable TOTP verification, so users must register your product in the user’s preferred authenticator app by scanning the QR code or manually entering the secret code:

1. Select TOTP authentication as the 2FA method.
2. Authenticate with the account using login credentials (as a security requirement).
3. Scan the QR code or copy-paste the secret code (if on the same device) to create a new entry using the authenticator app. The authenticator application starts displaying the TOTP for a specific product.
4. Enter TOTP.
5. 2FA setup successful.

Verification flow

Users must enter the current TOTP by viewing the authenticator application for verification:

1. Enter login credentials
2. View 2FA prompts. Open the TOTP authenticator application, find the product name, and enter the current TOTP
3. Authentication successful

Common UX pain points

• Configuration friction— Users need to download an authenticator app and add products to enable 2FA, so designers must implement a smooth, descriptive, step-by-step setup flow to reduce friction
• TOTP interval problem— TOTP is updated every 30 seconds, so expiring code while typing is a common problem, but the UX could be improved with copy-paste support, autofocus, and autosubmit

Biometric authentication

The biometric verification flow helps users configure and use fingerprint or facial recognition for authentication:

Configuration flow

The configuration flow is instant if the user has configured biometric settings. Otherwise, users have to go through an OS-dependent configuration flow:

1. Select biometric verification as the 2FA method.
2. Authenticate with the account using login credentials (as a security requirement).
3. If biometrics are already configured, the user only needs to confirm the biometrics. Otherwise, users will have to go through the OS’s native biometric settings with OS-specific UX.
4. 2FA setup successful.

Verification flow

Verification flow checks user identity with biometric verification:

1. Enter login credentials.
2. The OS’s native 2FA command asks users to touch the fingerprint sensor or look at the camera for facial verification.
3. Authentication successful.

Common UX pain points

• Physical verification issues— Fingerprint verification is difficult if hands are dirty or wet, and facial recognition may fail if the face is covered and in a dark area. Suggesting a secure 2FA alternative to the current login attempt if biometric verification repeatedly fails is a common solution
• Security issues— Users may be afraid to use biometrics because biometric data cannot be reset. Sticking to the OS’s native biometric flow and educating users with learn more links is a common solution to this

Handle failures and edge cases

Once configured, 2FA authentication can fail, or users can also lose access to it, so handling these scenarios in a user-friendly, effective, and secure way is critical:

• Problem sending OTP— SMS OTP delivery may fail or experience delays, so your 2FA flow must include a way to resend the OTP action and use an alternative 2FA method
• The device is lost or damaged — A lost or damaged 2FA-configured device will prevent users from accessing the product. Offering a 2FA method such as a recovery code or using a 2FA recovery method (e.g. email) are common solutions
• Network latency — Slow networks can make 2FA interactions problematic, especially with timeouts, but this can be overcome with optimized network requests, a minimal 2FA UI, and recommended offline OOTP methods

Dos and Don’ts

Factor	Do	Don’t
OTP entry design	Auto focus and auto send. Mask or use separate input per digit. Enable pasting	Make it too small. Use plain text input
Backward method	Offer a clear and direct path to recovery	Make it complicated with general or long-winded instructions
Selection of 2FA method	Let users choose multiple preferred 2FA methods	Force users to adapt to just one
Skipping 2FA	Supports secure 2FA bypassing for convenience on trusted devices, etc.	Flooding users with 2FA or skipping 2FA without a second thought (creating security gaps)
Security education	Take advantage of the simple security benefits of 2FA. Provide a link to learn more	Use technical or cybersecurity jargon

FAQs

How many retries should I allow for SMS OTP?

3 recommended

How many resends are allowed for OTP SMS?

2 the safest and also most comfortable

Should QR codes be displayed by default or on request?

Depends on the device. If the user is using a desktop computer, it is recommended to display QR. If the user is using a mobile device, display the secret code, so the user can copy-paste it into the authenticator app

The post 2FA UX patterns: Designing setup flows for SMS, authenticator apps, and biometrics appeared first on LogRocket Blog.

Berita Terkini

Berita Terbaru

Daftar Terbaru

News

Berita Terbaru

Flash News

RuangJP

Pemilu

Berita Terkini

Prediksi Bola

Togel Deposit Pulsa

Technology

Otomotif

Berita Terbaru

Daftar Judi Slot Online Terpercaya

Slot yang lagi gacor

Teknologi

Berita terkini

Berita Pemilu

Berita Teknologi

Hiburan

master Slote

Berita Terkini

Pendidikan

Resep

Jasa Backlink

One Piece Terbaru