Learn 2FA Authentication - UX, Accessibility & Copy-Paste

#Introduction

Even the best security fails if users can't complete it. Episode 19 covers the half of a 2FA feature that's often forgotten: the user experience. Typing a 6-digit input within 30 seconds is the most tense moment of the authentication flow — and the easiest to ruin with small details.

You'll design a comfortable TOTP input — autofocus, auto-submit, paste, and countdown — then make sure the page is accessible to screen reader users and users without a camera. By the end of the episode, the 2FA flow isn't just secure, it's pleasant.

#A Comfortable 6-Digit Input

#Autofocus and Auto-Submit

When the challenge page appears, the cursor should already be in the first field — users shouldn't have to click twice. Once 6 digits are filled, submit automatically without waiting for a submit button:

6-digit input with auto-submit

const input = document.querySelector('#totp-code');
input.focus();
 
input.addEventListener('input', () => {
  const digits = input.value.replace(/\D/g, '');
  input.value = digits;
  if (digits.length === 6) {
    input.form.requestSubmit();
  }
});

The input.focus() function places the cursor immediately when the page loads, and requestSubmit sends the form the moment the sixth digit is entered. The \D filter guarantees the input stays numeric only.

Don't forget to handle an empty field after a failed submit: restore focus and select the input's contents so the user can retype without clicking twice.

#Paste and Autofill

Password manager users copy codes from an authenticator app that shows them in a notification. Make sure the field accepts plain paste, and add the attribute that opens browser autofill:

<input id="totp-code"
  inputmode="numeric"
  autocomplete="one-time-code"
  maxlength="6"
  placeholder="123456" />

autocomplete="one-time-code" is the standard signal for browsers and OSes to offer codes from SMS or notifications straight into this field. With inputmode="numeric", mobile devices show a numeric keypad.

#30-Second Countdown

Users need to know how long a code stays valid. Show a countdown ticking down to the next step, and refresh the field so it's ready for a new code when the countdown ends. Without a countdown, a user waiting at the end of the 30-second window gets a confusing failure.

The countdown should also show the remaining seconds visually and update every second. Avoid static text like "the code is valid for 30 seconds", which doesn't tell you where you are in the window.

#Helpful Error Messages

#Clear but Not Leaky

Error messages must distinguish two cases: a mistyped code and an expired code. "The code is no longer valid, a new code has been sent to the app" helps a slow typist without leaking account details. Show the message near the field, not at the top of the page far from context.

#Clock Synchronization

If failures repeat with codes that look correct, the device clock is most likely out of sync. Give a specific hint: "Make sure the time on your device is automatic and synchronized". For this case, link to instructions for setting automatic time in the system settings — not raising the tolerance window.

#Accessibility

#Correct ARIA Labels

Every field must have a label readable by a screen reader. Don't rely on a placeholder as the label — placeholders disappear when typing and aren't read consistently. Use an explicit label connected to the field, and add an aria-describedby attribute for help text:

<label for="totp-code">6-digit code from the authenticator app</label>
<input id="totp-code" aria-describedby="totp-help" ... />
<p id="totp-help">The code changes every 30 seconds</p>

A descriptive label like this helps screen reader users understand what's being asked without seeing the page.

For multi-step flows, add an aria-live attribute to the error message area so a screen reader announces changes without the user having to move focus.

#Contrast and the Manual Option

A QR code must have enough contrast — deep black on plain white, with no pattern in the quiet zone. And because not every user has a camera, the manual option is always available: enter the Base32 secret into the app via the "Enter a setup key" button. This option is also a lifesaver for screen reader users who can't scan.

#Testing the Experience with a User's Eyes

#Start from the Challenge Page

Test the flow like a real user: open a direct link to the MFA page, check whether autofocus works, whether paste works, and what happens when the countdown ends mid-typing. These small scenarios catch experience leaks that aren't visible in the happy path.

#Recruit Non-Technical Users

A 2FA flow tested only by engineers always feels easy to engineers. Test with non-technical people: notice where they stop, what they read, and which messages make them panic. This feedback often becomes the most impactful UX change.

Also record the time to complete a first login — good UX improvements usually show up as numbers going down, not as assumptions.

#Conclusion

Episode 19 polished the 2FA experience: a 6-digit input with autofocus, auto-submit, paste and autofill, a 30-second countdown, helpful error messages, and accessibility with ARIA labels, QR contrast, and a camera-free manual option.

The key takeaways:

• Autofocus and auto-submit speed up a tense flow.
• Support paste and the one-time-code autocomplete.
• Show a countdown so users know the code's validity window.
• Distinguish wrong-code and expired-code messages.
• Use explicit ARIA labels, not placeholders.
• Provide a manual option for users without a camera.

In the next episode, episode 20, we will cover production: deployment, secrets, and observability — managing the environment and KMS for encryption keys, encrypted backups, and logging and alerting for MFA events without PII and codes.