Mobile · Auth · OTP verification
Enter the 5-digit code
Screen 2 of 3. Mid-fill state: 3 digits entered, 4th box is active. Matches production's 5-digit code. Auto-fills from iOS/Android SMS suggestion bar. Resend disabled with countdown. Back arrow top-left returns to phone entry to edit number.
Design Mechanics · OTP verification
Same shell as phone-entry — identical background glow, live-teaser pill, typography. Patrons perceive this as step 2 of a 2-step flow, not a separate app.
Top bar becomes nav — back arrow (←) replaces the standalone logo; SportsIQ wordmark shrinks to centered brand anchor. Back returns to phone entry so users can correct a typo.
Live teaser still present — urgency stays on screen. As time passes, the timer ticks down (here: 2:00 → 1:48, and 4,218 → 4,302 joined). Subtle pressure to finish entering code.
Headline + sub — "Enter the code" + "Sent to +1 (949) 555-0142 · Change". The "Change" link is a separator-stripe pattern to let users fix a wrong number in one tap.
5 OTP boxes — production uses 5-digit codes (not 6). Each box: 48×60, Lexend 26px 900, brand-purple glow when active, subtle filled state when entered.
No explicit Submit button — auto-submits when all 5 boxes are filled. Zero friction, matches Uber/Apple pattern.
Auto-fill hint — "Tap the code when it appears from Messages" educates new users about iOS/Android OTP auto-fill. Fades out after first successful use.
Resend countdown — "Resend in 0:18" (disabled). Flips to tappable "Resend code" when timer hits 0. Matches production spec exactly ("Resend code in ${m}s").
Error state (not shown) — boxes flash red + shake animation when OTP is wrong, error text appears below: "Invalid code. Try again." (production copy).
Success state — all 5 filled → brief green flash on boxes → navigate to nickname (new user) or directly to Play (returning user).