Two-Factor Authentication (2FA) is a security process that provides two different ways to authenticate to a specific service. It has become a standard security feature for the vast majority of online services. In general, the first factor to authenticate is by using a username or email address and a password. The second factor is often code sent through text message, automated phone call or with the use of a software-based authenticator like Google Authenticator. When it comes to the different options for the second factor, a mobile phone with internet access is necessary. The basic idea behind the two-factor authentication is if a username and password get leaked or stolen, access to the mobile phone would still be required to access the account.
SAASPASS provides two-factor authentication (2FA) services for numerous websites, services and custom applications. SAASPASS offers two-factor authentication as cloud-based service saving companies and organizations the headache of managing security systems and distributing tokens. Secure access to Evernote with SAASPASS multi-factor authentication (MFA) and secure single sign-on (SSO) and integrate it with SAML in no time and with no coding. Log into your Evernote services securely without ever having to remember passwords on both your computer and mobile with SAASPASS Instant Login (Proximity, Scan Barcode, On-Device Login and Remote Login).
In this article, we will show examples and tips on how to design a great two-factor authentication user flow, the different user experience (UX) and user interface (UI) strategies to use. We will also show the complete user journey to enable the two-factor authentication on the popular CRM HubSpot. In addition to the HubSpot’s user flow, you can access more annotated videos of two-factor authentication user flows from well-known apps like Dropbox, MailChimp, Evernote and Zendesk.
How to design a two-factor authentication process
The two-factor authentication is always set up once the user is signed up, not while signing up. Unless specific cases, two-factor authentication is always optional. The specific cases refer to high security or government applications. In general, the two-factor authentication options are listed in the user/profile preference of an app. For some apps with more options, like HubSpot for example, the two-factor authentication options are listed in the security section.
HubSpot’s Two-Factor Authentication (2FA) User Flow
From all the different user flows tested, we choose HubSpot because their user interface and experience is on point. It was clear and easy to set up, in other words, a flawless experience.
Profile & Preferences: Security
The first step to enable two-factor authentication is to visit the Profile & Preferences section. It’s usually the place where the user-specific settings are located.
The Security Section
The security section is the perfect location for the two-factor authentication options. It’s also the section where a user can reset their password and log out of all sessions. Once the user clicks on Set up primary method, the setup process starts.
Verification Method
The method defines how the user will receive the access code from HubSpot to continue their sign in. In the case of HubSpot, the two options are Google Authenticator and SMS (text message). Other websites offer the phone call option where an automated system calls the number on file and read a 6-digit code. In the case of HubSpot, they added the word recommended next to Google Authenticator and selected that option by default. The goal of this article is not to advise on which method is the best but we can help a bit on this topic. The main reason to recommend Google Authenticator is that it can be accessed with wifi while SMS would require a phone/voice plan. In some cases, like travelling abroad, wifi is the only option. Notice the blurb about the app and the external links to the app stores.
Different Verification Method
The blurb at the bottom changes depending on which method is selected. The blurb itself describes the next step for the selected verification method.
Register HubSpot
Once the method is selected, the two-factor authentication setup starts. Note that we selected Google Authenticator for this recording and the setup screen would be different if we selected SMS. Like any website registration in an authentication app, the first step is to scan a QR code that contains information specific to the current user and account.
Verify Google Authenticator
After users scan the QR code with their phone, the authentication app will provide a 6-digit code to enter. Note the progress bar and the number of steps at the top of the page.
Backup Verification Codes
The backup verification codes are essential in case a user loses the mobile phone used to set up the two-factor authentication. The designers at HubSpot added two buttons to print the verification codes or download a PDF version.
Generate New Codes
There is also a link to generate new codes. Note that the Next button is inactive at this point. To make the Next button active, the user has to click on either Print or Download. It tells HubSpot that the user took the necessary measure to save their verification codes, by printing them or saving them.
Verified
Once users click on Next, they land on the final page of the setup process. At this point, nothing has to be done anymore and the setup is complete. Note the Done button at the bottom right of the page.
Back to Profile & Preferences
The two-factor authentication setup is now complete. The setup button is now a Turn off button with the verification method indicated just below it. Note the Secondary Verification option below. The second verification is the remaining method that was not used in the primary setup. In this case, it would be the SMS method.
Turn Off Notification Popup
When the user clicks the turn off button, a popup shows up to make sure it was not a mistake.
Back to the Beginning
Now that the user turned off the primary verification, the security section is back as it was before.
Design (UX & UI) Tip 1
Divide the two-factor authentication into simple and clear steps. One action per step. HubSpot made a different step for each action, even if it takes only one mouse click to complete.
Design (UX & UI) Tip 2
Make sure to explain each step and keep in mind that not everybody has the same technical knowledge. For example, HubSpot added a description of Google Authenticator when the user would choose that option.
Please note, for security reasons, this testing account was disabled and deleted.
Evernote 2fa Fortnite
Discover more with SaaS Websites Pro
Video featured in this article
Add 2-Factor Authentication – HubSpot
Watch NowRelated Two-Factor Authentication Videos
- Add 2-Factor Authentication – Buffer
- Add 2-Factor Authentication – Dropbox
- Add 2-Factor Authentication – MailChimp
- Add 2-Factor Authentication – Zapier
- Add 2-Factor Authentication – Zendesk
- Add 2-Factor Authentication – Evernote
- Add 2-Factor Authentication – Help Scout
- Add 2-Factor Authentication – HubSpot
Install Authy
The best way to manage all your 2FA accounts is to use the Authy app. It enables you to have a single mobile app for all your 2FA accounts and you can sync them across multiple devices, even accessing them on the desktop. Install Authy on your device by searching for it in your device’s app store.
Important: If any sites prompt you to use Google Authenticator for two-factor authentication, note that you can always substitute the Authy 2FA app instead. Although they work in similar ways, Authy is more feature-rich and allows for multi-device syncing, cloud-backups, and easier account recovery should you change or lose your phone or device. Read more information on the features of Authy here.
Locate 2FA setting
Log in to your Evernote account, go to ‘Security Summary’ in the left-hand navigation.
On the next page, you’ll see that Two-Step Verification (aka 2FA) is not enabled. Click ‘Enable’
You’ll then be served a short definition of “Two-Step Verification.” When done reading, click “Continue.”
You’ll then need to agree to be able to receive a code via a mobile device and retaining backup codes when provided. If this sounds ok to you, click “Continue.”
Next, you’ll need to verify your email address. When ready click on “Send Verification Email.”
The email you receive will hold two options. For this example, we are choosing to enter the code we received into the website. Either way is fine.
Return to the Evernote website to enter in the code.When done click “Continue.”
Once again you need to verify your Evernote password. Click “Verify” when ready.
And then supply your phone number to receive a verification code. Clock “Continue” when ready.
Enter the Verification code receive on your mobile device.
Capture QR Code
Evernote Set Up 2fa
Here, Evernote suggests downloading the version of Google Authenticator you wish to use. Note that anywhere (not just Evernote) that prompts Google Authenticator also supports Authy. So just click on the platform you use. For these purposes, we use iOS.
You are now shown a QR code.
Go to your device and open the Authy app. Click “Add Account”
When you are ready click “Scan QR Code” and hold your device up to the computer screen.
Evernote 2 Factor Authentication
The Authy App will automatically choose the Evernote logo. Confirm it’s correct by clicking “Done”
Complete Enablement
Now return to the Authy app and record the numerical token provided for Evernote. Note that this token refreshes every 20 seconds.
Returning to the Evernote website, enter the numerical token in the appropriate field. When done click “Continue.”
Again, enter the email and password you use to sign into Evernote.
Evernote 2fa Download
You will now be shown your Evernote back-up codes. Do not lose these. You can print them out by clicking on the Printer button. When ready click “Continue.”
Evernote 2fa Ps4
In the next window, you must prove you have recorded the backup codes by entering one of them into the appropriate field. When done, click “Complete Setup.”
You still need to click through one more window to complete the process.
You’re all set! You’ve enabled 2FA for your Evernote account.
Evernote 2fa Login
To learn more, visit: https://help.evernote.com/hc/en-us/articles/208314238-How-to-set-up-two-step-verification