Enter the 6-digit code
OtpInput is the same primitive as mfa-stepup-mobile: 6 cells, each 44×52 so both dimensions meet the 44px minimum tap target. mfa-stepup-mobile's 42px-wide cells should be widened to match. Countdowns update visually every second but are not in a live region. The panel's [data-announcer] speaks only milestones: "code sent", "you can request a new code now", "code expired". It auto-advances, Backspace moves back, arrow keys move between cells, and a paste in any cell spreads all six digits. The first cell has autocomplete="one-time-code" for iOS and Android SMS autofill. The form auto-submits when the 6th digit arrives. The resend cooldown and code expiry both come from the start acknowledgement (Δ resendAfterSeconds, expiresInSeconds), not hard-coded client values.
- Account (completed)
- Phone (current step)
- Email (not started)
Enter your code
Enter the 6-digit code we sent to
+44 •••• •• 0123
Code sent to +44 •••• •• 0123.
- Account (completed)
- Phone (current step)
- Email (not started)
Enter your code
Enter the 6-digit code we sent to
+44 •••• •• 0123
enter-code · pasted full code
Pasting "482913" into any cell fills all six. Non-digits are stripped, so "482 913" and "482-913" work too. Then it auto-submits.
- Account (completed)
- Phone (current step)
- Email (not started)
Enter your code
Enter the 6-digit code we sent to
+44 •••• •• 0123
verifying · confirm in flight
Cells and Confirm are disabled, with a spinner. Resend and Change number are disabled while a check is in flight, so a late response can't verify a number the user has already left.
- Account (completed)
- Phone (current step)
- Email (not started)
Enter your code
Enter the 6-digit code we sent to
+44 •••• •• 0123
Checking your code.
enter-code · resend ready (cooldown elapsed)
Resend calls POST /verify/phone/resend with an empty body (Δ). The server re-sends to the pending number it holds for this session, so the client never needs the full number, and this works the same after a reload. While the earlier code is still valid, the provider may re-send the same code without extending its lifetime. So the expiry countdown keeps the server's remaining time from the new ack (expiresInSeconds) and only the resend cooldown restarts. Typed digits are kept, and whichever code the server accepts works. The announcer speaks once when the cooldown ends.
- Account (completed)
- Phone (current step)
- Email (not started)
Enter your code
Enter the 6-digit code we sent to
+44 •••• •• 0123
You can request a new code now.
enter-code · resend in flight
On press, Resend goes into sending immediately: it is disabled with a spinner, so a double-click sends one SMS. Change number is locked too. Each resend carries a client sequence number, and only the response to the latest request may update the timers. An older response that arrives out of order is ignored, and the cooldown restarts only from the latest acknowledgement.
- Account (completed)
- Phone (current step)
- Email (not started)
Enter your code
Enter the 6-digit code we sent to
+44 •••• •• 0123
Sending a new code.