OTP SMS Verification Screen UI for Mobile, Done Well

An OTP (one-time code) verification screen is small but high-stakes: it sits between the user and their account. The short answer: build it from a free VP0 design with clean code boxes, automatic code AutoFill, auto-advance and paste support, a resend with a countdown, and clear error and expiry states. Use a real SMS provider with rate limiting, and remember the security trade-off, SMS codes can be intercepted. The FBI’s IC3 reported SIM-swapping losses of more than $68 million in 2021, which is why passkeys are often the safer goal.

What a great OTP screen does

The ideal OTP screen barely asks anything of the user. On iOS, set the one-time-code content type so the keyboard offers the SMS code from the Messages app automatically, no app switching. The boxes auto-advance as digits arrive and support pasting the whole code at once. A clear timer shows when the user can resend, and resend is obvious without being abusable. Every failure has its own state: wrong code (with attempts remaining), expired code (with an easy resend), and too many attempts (a clear cooldown). Apple’s Human Interface Guidelines and Security Code AutoFill make most of this nearly free.

Build it from a free design

VP0 is a free iOS design library for AI builders. Pick a verification or input design, copy its link, and have Cursor or Claude Code rebuild it in SwiftUI or React Native. Wire the boxes to the textContentType oneTimeCode so AutoFill works, support paste, and handle focus so backspace moves to the previous box. On the backend, send codes through a reputable SMS provider, expire them quickly, and rate-limit both sending and verification to stop abuse and brute force. Because SMS is the weak link, offer a stronger path where possible: see passkey creation biometric UI mobile and Apple Sign-In UI guidelines Figma for phishing-resistant alternatives.

OTP screen states

Design all of these, not just the success path.

State	What the user sees	Note
Entry	Auto-filling code boxes	oneTimeCode AutoFill
Wrong code	Inline error, attempts left	Do not clear silently
Expired	Easy resend, fresh code	Short expiry window
Resend timer	Countdown then resend	Rate-limited
Locked	Cooldown message	After too many tries

Common mistakes

The first mistake is skipping AutoFill, forcing users to switch to Messages and type the code by hand. The second is no paste support, which breaks the fast path. The third is a single vague error that does not distinguish a typo from an expired code. The fourth is unlimited resends or verification attempts, an open door to abuse and brute force. The fifth is treating SMS OTP as strong security; it is convenient but phishable, so for sensitive accounts, steer users toward passkeys.

A worked example

Say a user signs in and you text a six-digit code. Your VP0-built screen shows six boxes; the moment the SMS arrives, iOS offers the code above the keyboard and one tap fills it. If they paste, all six land at once. A wrong digit shows “Incorrect code, 2 tries left” without wiping their entry; an expired code offers an immediate resend behind a short timer. Sending and checking are rate-limited server-side. For the onboarding this lives inside, see iOS onboarding screen design that actually converts, and for handling a rejected build, see App Store reject design fix templates.

Key takeaways

• A great OTP screen autofills the SMS code and barely needs the user.
• Build it from a free VP0 design with auto-advance, paste, and a clear resend timer.
• Design every state: wrong code, expired, resend cooldown, and locked.
• Rate-limit sending and verification server-side to stop abuse and brute force.
• SMS codes are phishable and SIM-swappable; prefer passkeys for sensitive accounts.

Frequently asked questions

How do I build an OTP verification screen on iOS? Build the code boxes from a free VP0 design, set textContentType to oneTimeCode so iOS AutoFills the SMS code, support paste and auto-advance, and handle wrong, expired, and locked states.

How do I make the SMS code fill automatically? Use the one-time-code content type on your input fields. iOS reads the code from the Messages app and offers it above the keyboard, so the user can fill it with one tap.

Is SMS OTP secure enough? It is convenient but not the strongest option. SMS codes can be phished or intercepted via SIM swapping, so for sensitive accounts prefer passkeys or Sign in with Apple.

How do I stop OTP abuse? Rate-limit both code sending and verification on the server, expire codes quickly, and lock the flow after too many failed attempts to prevent brute force and spam.