Cycloneblaze
commented
1 year ago LastPass's authenticator app has a slightly different solution to this same problem, which I liked: when a code has less than five seconds remaining, a new line appears under the current code, containing the upcoming code in smaller text, with its own copy button.
jamie-mh
We all know the scenario: You open Authenticator Pro, and you see a very short blue line. Is it worth trying to enter the OTP, or do we really have to wait for the timer to expire and then start with the fresh code? OTPs still work for at least one more time slot after a new code becomes available.
AuthenticatorPro could stand out from the crowd and avoid the UX bug that plagues nearly every TOTP app.
The right solution to the "time is up" problem is to make sure the user can at any time see an OTP that will stay visible for at least half the TOTP time slot.
The andOTP app implements a simple solution for this: After an OTP expired, it is still shown on the side (in smaller letters), so that the user can complete their login.
The de-luxe solution would be a sliding window that always shows two OTPs:
// starting state: active OTP in bold, future OTP shown on the right// C1 expired, C2 marked as active// after 1/3 of the time slot, C1 slides away to the left to make space for an eventual C3// last 1/3 of the time slot (equivalent to starting state): new C3 appears// C2 expired, C3 marked as activeInstead of bold/regular, better use colored/gray text so that the width doesn't change when a token expires.
The sliding window could also be a continuous stream of OTP codes that are slowly rolling by. However, that would make it harder for users who like to point their finger at the code to remember which digits they've already copied.