Creating a painless 2FA user flow: Guide, examples, checklist

During the last decade, we’ve migrated many confidential elements of our lives online. Our purchases, our finances, and our social lives are partially digital.

Along the rise of this new relational era, data breaches have been hitting the news. Hackers have been bypassing the security of major companies and stealing millions of dollars on top of confidential data that endanger companies’ credibility.

We have a responsibility to protect our users from these data breaches as best we can, and we can start by arming users with the ability to protect their information. One method we can use to help users protect their accounts is two-factor authentication (2FA).

• The evolution of 2FA
• Methods of two-factor authentication
• User flows for each two-factor method
  • Exceptions to required two-factor verification
  • 2FA recovery options
• Best practices to design a 2FA

The evolution of 2FA

Two-factor authentication or two-factor verification (2FV) has a rich history that can be divided into different eras, each marked by significant developments in information security:

1. Early era: In the early days, RSA Security (now part of Dell Technologies) introduced the RSA SecurID token in 1984. This pioneering implementation generated unique one-time passwords (OTPs) that users had to enter along with their regular credentials for access. The RSA SecurID token represented a crucial milestone in the early era of 2FA
2. Chip and PIN era: The mid-1990s witnessed the introduction of chip and PIN technology for credit and debit cards. While not strictly digital 2FA, this era provided a tangible example of combining something the user has (the physical card) with something they know (the PIN) to enhance security in payment transactions
3. Mobile-based era: With the rise of mobile phones and SMS technology in the early 2000s, a new era of 2FA emerged. This era leveraged SMS to deliver OTPs to users’ mobile devices, serving as a second authentication factor. Mobile-based 2FA gained popularity during this period and continues to be widely used today

In recent years, the adoption of 2FA has grown significantly because online services and platforms recognize the need for stronger security measures. Consequently, a wide range of services, including email providers, social media platforms, banking institutions, and major online services now offer some form of 2FA to their users. This ongoing era emphasizes the importance of multifactor authentication in safeguarding digital identities.

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

Methods of two-factor authentication

We will now focus on the third era of 2FA and the possibilities that mobile devices can offer to create ways to identify a user. Find here examples of 2FA methods:

1. 2FA with SMS codes: SMS-based 2FA adds an extra layer of security by sending a unique verification code to the user’s mobile phone. This method ensures that only users with access to their registered phone number can authenticate their identity
2. 2FA with email verification: 2FA with email verification involves sending a verification link to the user’s registered email address. By clicking the link, users prove ownership of their email account, strengthening the security of their online accounts
3. 2FA with an authenticator app: Authenticator apps generate time-based, one-time codes that serve as the second factor in 2FA. By scanning a QR code and synchronizing with the app, users can obtain unique codes that refresh periodically, providing an additional layer of security beyond passwords
4. 2FA with biometrics: Biometric-based 2FA leverages the unique physical characteristics of an individual, such as fingerprints or facial features, to verify their identity. By enabling biometric authentication, users can utilize their biometric data along with passwords for a secure and convenient login process

User flows for each two-factor method

Setting up a 2FA may differ depending on the device and its OS, but I’ve put together a typical flow and steps to take in order to set up the authentication system: 2FA Method User Flows

The sheet includes information on each of the methods we listed above.

Once the 2FA method is properly installed, every time the user accesses the application will need to validate their identity to be the method selected, but we can find exceptions.

Exceptions to required two-factor verification

There is the possibility of creating exceptions to avoid verifying your identity every time you log into an app. The most common exceptions include:

• Trusted devices: You can store the device ID in the 2FA memory. When you log in, the system checks if the device ID is in the list of exceptions, and if so, it doesn’t require validation for a period of time or until you revoke the exception
• Trusted networks: Sometimes we can use specific networks to bypass authentication. Similar to the previous example, if a device is connected to a free-access network, you may access the app without needing to identify yourself
• User exceptions: Certain profiles or roles in a company or organization may be given an exception from 2FA. This is typically based on job functions or hierarchy within the company

2FA recovery options

Implementing 2FA for an added layer of security can create additional complexity if a user loses or forgets their login method. While this may not be an issue for biometrics (because facial features or fingerprints generally remain constant), other methods require alternative approaches to regain account access.

Here are some ways to recover your account when you have lost access:

• Recovery code: After setting up 2FA, developers may provide a recovery code that should be stored safely, such as on a laptop or physical notepad. If a user forgets the 2FA code, they can restore access by using the recovery code
• Recovery options (email/phone/device): A common approach is to set up recovery options, which allow you to regain access by using a secondary tool. These options may involve answering security questions, providing alternative email addresses or phone numbers, or utilizing secondary authentication methods associated with your account
• Customer service: Contacting the customer service team and explaining the situation can also help in recovering your account. They may require you to verify your identity by answering private questions before assisting with the recovery process

Best practices to design a 2FA

Designing an intuitive user interface for 2FA involves considering user needs, usability, and clear communication of security measures. Here are some key aspects to consider:

1. Simplified setup process: Create a step-by-step setup process that guides users through enabling 2FA with clear instructions and minimal effort. Provide options for different 2FA methods (such as SMS codes, email verification, authenticator apps, or biometrics) and explain their benefits
2. Clear explanations: Provide concise and easy-to-understand explanations of each 2FA method, outlining how it adds an extra layer of security and the steps involved in setting it up. Use plain language and visuals to convey the information effectively
3. Visual cues and feedback: Use visual cues (such as icons, progress indicators, or checkmarks) to guide users through the setup process and clearly indicate the completion of each step. Provide feedback messages to inform users of successful actions or any errors that may occur during setup
4. Mobile-friendly design: Consider that many users access accounts and services on mobile devices. Optimize the user interface for mobile screens, ensuring that the layout, fonts, and buttons are easily readable and interactable on smaller screens
5. Accessibility: Design the interface to be accessible to users with diverse needs. Consider factors like color contrast for visually impaired users, resizable text, and support for assistive technologies
6. Account recovery options: In case users lose access to their second-factor codes (e.g., a lost phone or disabled biometrics), provide clear instructions and alternative methods for account recovery, such as backup codes, secondary email addresses, or phone number verification
7. Security education: Include brief but informative sections that explain the importance of 2FA, its benefits, and how it enhances account security. Educate users about potential security threats and best practices for safeguarding their accounts
8. Consistency and familiarity: Maintain consistency in design elements, terminology, and interaction patterns to provide a familiar experience across different platforms or services. This reduces cognitive load and helps users navigate the interface more easily
9. User testing and feedback: Conduct user testing to gather feedback and insights on the usability and intuitiveness of the 2FA interface. Incorporate user feedback to make iterative improvements and address any pain points or confusion
10. Streamlining the authentication process: Implement techniques such as persistent login sessions, remember me options, and device recognition. Persistent login sessions allow users to stay logged in across multiple sessions without the need to re-enter their credentials each time, enhancing convenience while maintaining security. Remember me options provide the choice to store login credentials on the user’s device, enabling automatic login for subsequent visits. Device recognition adds an extra layer of convenience by identifying and trusting known devices, reducing the need for repeated authentication

Conclusion

It is essential for users to familiarize themselves with the available options provided by different platforms and carefully choose the most suitable 2FA method for their daily use. By taking this proactive step, we can significantly reduce the risk of unauthorized access to our accounts and safeguard what matters most to us.

Remember, prioritizing security is not only a responsibility but also an investment in protecting our digital lives. Let us stay vigilant, embrace the benefits of 2FA, and ensure the safety of our personal information. Safeguard what you love and enjoy peace of mind in an increasingly interconnected world.

Header image source: IconScout

LogRocket helps you understand how users experience your product without needing to watch hundreds of session replays or talk to dozens of customers.

LogRocket's Galileo AI watches sessions and understands user feedback for you, automating the most time-intensive parts of your job and giving you more time to focus on great design.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.