Two factor authentication in a single form

Question

We are working on implementing a Google two factor authentication in our app. Each customer can turn 2FA on and off for their users in app settings.

There was an idea to tweak this functionality. We would like to recognize a returning user with a flag about 2FA (if it's enabled or disabled) stored in cookie, and instead of displaying the Google code input in second step (after providing username and password) display it in the single form as {username, password, authentication code}.

I was trying to research this idea, but it seems nobody used it like that. Do you think it's a good idea? It makes the login process faster, limiting it to only one form.

Answer 1

This is a good opportunity to a/b test the options you’re considering!

I’ve used single form, two-factor authentication logins. Here’s what I’ve observed as an end-user of those systems.

• If the user already has the 2nd factor when they begin the login process, use a single form.
• If the 2nd factor is generated by completing the first step in an authentication process, use a multi-step form.

An example of the first situation is a user at an ATM. Their two factors of authentication are the ATM card and the PIN. Since they have both, there is a single form asking for the PIN (technically, the request for the PIN is triggered by them inserting the card into the reader so this could be viewed as two steps). Another example is people using a token generator like Authy. They’ll have the token before they get to the login form.

An example of the second situation is authenticating to Gmail using a code received by text message as the 2nd factor. In that situation it isn’t possible to know the code at the time the user name and password are entered because the code isn’t sent until the first factor of authentication is verified.

If your situation allows for using a single form, then take extra care to make sure the form is clear about which data entry field is for each required piece of information. Consider putting a picture of the token generator (or app icon) to remind the user where to get their token.

Answer 2

Most systems, which use 2FA, use 2 steps of authentication: first the user’s login and password are checked and then the user enters the OTP generated by token, sent via SMS or e-mail.

Two forms are commonly used as firstly the system checks if the login and password are correct. And only after this the user is forwarded to the second form to enter the OTP.

You can use the single form for the signing: with the login, password and one-time password. Some services have already used this idea as for example, Joomla.

Answer 3

It's counter intuitive > When a user gets 2 factored it means their username and password is already correct, thereby they've moved on from the login to the two factor and they are separate forms to enforce UX separation of concerns.

I haven't used the google 2FA, but I'd imagine it's got a password field, so you'd also wind up with two password fields on a single form as when entering the code they have to re-enter their password in typical setups, which wouldn't be ideal and probably wouldn't look good.