1200618 - Layout of the TOTP 2FA leads to missing the token time window and thus frustration

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: General, defect)

Description

[Ed Morley [:emorley]]

1) Go to https://bugzilla.mozilla.org/userprefs.cgi?tab=mfa
2) Choose TOTP
3) Scan the barcode using the Android Google authenticator app
4) Fill in the next input field on the page (which is the 2FA token confirmation)
5) Notice the next field is "confirm your password" -> "oh damn" -> "well I think I can type it quick enough"
6) Press submit
-> "Token invalid, please press back"
7) Press back
8) Page has reset, so need to select TOTP again
-> Now the QR code has changed, so the one I've already scanned is invalid
9) Delete the entry on the app
10) Scan the new code
11) Repeat as before, but now know to fill the form in a different order, and not the order it appears on the page

Things that would help:
a) Ask for the password up front (either as the first element on the 2FA page, or even better: ask for it on an intermediate page that remembers you just signed in for 15 mins, so if you have to repeat the 2FA signup, you don't have to retype it)
b) If the person gets the 2FA token wrong, let them try again with the TOTP seed they've already scanned, rather than regenerating from scratch
c) Have some kind of spinning timer thing on the 2FA page that shows the user when the next 30 second window is up

Thanks :-)

Comment 1

[:glob ✱]

moving the password before the qr code is the best way to fix this.

> If the person gets the 2FA token wrong, let them try again with the TOTP see
> they've already scanned, rather than regenerating from scratch

it's critical that the qr code isn't stored in the browser cache, so that isn't an option.

Comment 2

[Ed Morley [:emorley]]

Perhaps we could also make the "press back" message indicate that the former QR code is now invalid? (Since a naive user could think that re-selecting TOTP would give the same QR code - and unless someone has an photographic memory for images they might not realise it was different from the one they saw previously).

Comment 3

[:glob ✱]

(In reply to Ed Morley [:emorley] from comment #2)
> Perhaps we could also make the "press back" message indicate that the former
> QR code is now invalid? (Since a naive user could think that re-selecting
> TOTP would give the same QR code - and unless someone has an photographic
> memory for images they might not realise it was different from the one they
> saw previously).

i'll change "working" to "generating new qr code"

Comment 4

[Ed Morley [:emorley]]

Ah even better :-)

Comment 5

[:glob ✱]

Attachment: 1200618_1.patch

- move password before mfa block (for enable and disable)
- change 'working' to 'generating new qr code'

Comment 6

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8655458 [details] [diff] [review]
1200618_1.patch

Review of attachment 8655458 [details] [diff] [review]:
-----------------------------------------------------------------

r=dylan

Fix nit on commit.

::: template/en/default/account/prefs/mfa.html.tmpl
@@ +43,5 @@
> +        [% END %]
> +        is required to enable two-factor authentication.
> +      </p>
> +      <p>
> +        <b class="mfa-label">Current Password:</b>

nit: I think using <label> here would make more sense. Same for the other mfa-labels.

Comment 7

[:glob ✱]

To ssh://[e-mail]/webtools/bmo/bugzilla.git
   f072be2..34e6b2e  master -> master