OTP verification code
A 6-digit verification code screen for iOS and Android apps. Three digits filled, one active with a blinking cursor, and a countdown resend timer below. Use it as step two after email sign-in to complete magic link or OTP authentication. Works for any mobile app built with Bolt, Lovable, or Replit.
About this app template
Every passwordless sign-in needs a step two. After the user enters their email, this screen asks for the 6-digit code sent to their inbox. Six individual input boxes replace the single text field so users can see exactly how far along they are. The first three boxes show filled digits, the fourth box is active with a blue border and blinking cursor, and the last two sit empty. A countdown timer below the Verify button shows how long before the user can request a new code. Paste it into Bolt, Lovable, or Replit alongside the email sign-in template and ask your AI to wire the two screens together with your OTP provider.
Common questions about this template
How do I build an OTP verification screen for my iOS app?
Paste this template into Bolt, Lovable, or Replit as step two of your sign-in flow. Tell your AI which OTP provider you use: Supabase, Clerk, Twilio Verify, or Firebase. Your AI wires the Verify button to validate the code and route the user to the home screen on success.
What is the difference between a magic link and an OTP code?
A magic link is a URL the user taps in their email to sign in automatically. An OTP is a short numeric code the user copies from their email and types into the app. Both are passwordless. Use this screen for OTP flows where users type the code manually.
How do I add a resend timer to a verification screen?
Ask your AI to add a JavaScript countdown that starts at 60 seconds when the screen loads. When it reaches zero, replace the countdown text with a tappable Resend code link that calls your OTP provider to issue a new code.
Can I use this for SMS verification as well as email?
Yes. The layout works for any 6-digit code. Change the sub-heading from the email address to the user's phone number and ask your AI to wire it to Twilio Verify or your SMS provider instead of an email OTP service.
Use this template for
- ·OTP and verification code entry screens for iOS and Android
- ·Step two of a magic link or passwordless sign-in flow
- ·Two-factor authentication screens for mobile apps
- ·Email confirmation screens after account creation
Works with every vibe coding tool
More app templates
View allApp paywall with feature grid
App paywall with feature grid
Paywall
Social auth sign-in
Social auth sign-in
Sign in
Onboarding with social proof
Onboarding with social proof
Onboarding
Welcome splash with photo background
Welcome splash with photo background
Splash
Email sign-in
Email sign-in
Sign in
Notification permission prompt
Notification permission prompt
Onboarding