Safari autofills and submits TOTP code into the wrong input field.

[trendels]

Describe the bug

When you have TOTP enabled as a 2FA method, and you use TOTP integration of OSX, Safari will offer to autofill (and submit!) the TOTP code into the search field during the login flow.

Expected behavior

Safari should offer to autofill the TOTP code in the correct input field.

To Reproduce

• Enable TOTP as a 2FA method on Pypi
• Use the TOTP integration of OSX
• Log into Pypi, enter username and password
• On the next screen, Safari will offer to autofill the TOTP code into the search field:

My Platform

Safari on macOS Ventura 13.5.2

Additional context

Safari selecting the wrong form field may not be something you can control (I have no idea how it works), but even if it were to select the right field, I think the current login flow is not ideal:

I have a security key set up as my primary 2FA method and have only added TOTP tokens as a backup in case I lose my security key(s). I try to always use the security key on sites that allow it due to the phishing protection it offers compared to TOTP codes.

The way the login flow currently works on Pypi, all it takes to log in using TOTP with Safari is two consecutive presses of the fingerprint sensor: the first one autofills and submits username and password (OK), the second one autofills and submits the TOTP code (currently into the search field).

For comparison, this is what GitHub shows you after you have entered username and password, if you have both a security and TOTP enable as second factors:

The text input only appears after you explicitly select the TOTP option (authenticator app). Thus it is far less likely that you accidentally login using TOTP when you meant to use your security key. Also, the page has no other text inputs that could be auto-filled accidentally.

[miketheman]

Thanks for the detailed report! Based on this, I believe the linked change should solve this.

As to the overall design, I'll leave that to another day, when we have some more UX-minded folk to weigh in on it 😁

[trendels]

@miketheman thanks for the quick response. Unfortunately I still see the same behaviour.

I've cleared my cache and reloaded the page to make sure I have the new version. I've looked at the source, the autocomple="one-time-code" attribute is there, but it doesn't seem to make a difference. :(

[miketheman]

@trendels Thanks for calling that out - I had tested the autofocus and autocomplete only for a single 2FA scheme. Looks like back in #9805 the conversation was that if there are two methods (like your scenario) we should not autofocus on the TOTP, rather letting the user choose.

So my change helps folks who don't have both. 🤔

I even tried to hide the TOTP input completely if the user has WebAuthN, and Safari will still try to input to the search box. I'm not entirely sure how to discourage Safari from trying to use the input at all, will have to stew on that for a bit.

[miketheman]

@trendels I circled back today to try and reproduce the issue on Safari Version 17.6 (19618.3.11.11.5)

I don't see the issue, but I also am working with a local development version, and am not an expert with Safari's security features.

Do you still see this behavior with the updated browsers?

[trendels]

Hi @miketheman, yes, I still see the issue on Safari Version 17.6 (19618.3.11.11.5)

[nlhkabu]

@miketheman - re: the UX of this page:

We should consider adopting the same approach as Github (where we default to showing one method and fallback to the other). Before we did this, I'd want to know:

• For users with both methods set up, what do people use more? A device or an app? (do we have this data?)
• From a security perspective is one method consider "more secure" than the other? e.g. do we want to "promote" one method over the other? cc @woodruffw

Thanks!

[di]

We should prefer WebAuthn if it's available.