DEV Community

Cover image for 🔐 How OTP Autofill Actually Works (Deep Dive for Developers)
Pranjal Sharma
Pranjal Sharma

Posted on

🔐 How OTP Autofill Actually Works (Deep Dive for Developers)

#webdev #programming #productivity #security

Have you ever wonder how this "OTP Auto filling " Works.

OTP auto-filling looks “magical”, but it’s actually a combination of OS-level SMS parsing + app/browser integration + security rules.

Let’s break this down properly — Android, iOS, and Web — from a developer’s perspective.

🧩 The High-Level Flow

At a system level, OTP autofill follows this lifecycle:

  1. User enters phone number.
  2. Backend generates OTP.
  3. SMS gateway delivers OTP.
  4. OS intercepts and parses the message.
  5. If conditions match → OTP is surfaced to app/browser.
  6. App auto-fills (or suggests) the code. The key insight:

Apps do NOT automatically read all your SMS messages.The operating system controls everything.

📱 Android OTP Autofill (Deep Dive)

  1. You request OTP
  • You enter phone number in an app (like WhatsApp, Paytm, etc.)
  • Server generates OTP → sends SMS via SMS gateway.
  1. SMS arrives on your phone 
Your OTP is 482913. Do not share it.
AppName: 9xYz12AbC
Enter fullscreen mode Exit fullscreen mode

Android / iOS detects OTP automatically

The operating system scans incoming SMS messages using:
Pattern detection (6-digit number etc.)
Special formatting rules

App signature hash (Android specific)

🤖 Android OTP Autofill (Two Ways)

  • Method 1: SMS Retriever API (Most Secure)[ Developed by Google] .

How it works:

  1. App generates a unique 11-character hash
  2. That hash is appended to SMS
  3. Android reads SMS
  4. If hash matches installed app → OTP is passed automatically
  5. App fills OTP without SMS permission 
Example code- 
Your OTP is 482913
FA+9qCX9VSu
Enter fullscreen mode Exit fullscreen mode

System design

  • Method 2: SMS User Consent API

Android shows popup:

“Allow AppName to read this OTP?”
Enter fullscreen mode Exit fullscreen mode

User approves → OTP passed to app.

🍏 iOS OTP Autofill

iOS does NOT allow apps to read SMS directly.

Instead:

  1. iOS detects OTP format
  2. Shows OTP suggestion above keyboard
  3. User taps it → autofills
  4. No special hash needed.

🌐 OTP Autofill in Browser (Web Apps)

If you're using Chrome, Safari etc.

We need to add -

<input autocomplete="one-time-code">

Modern browsers:

  • Detect OTP from SMS
  • Show suggestion above keyboard
  • Autofill

Chrome implements WebOTP API (from Google).

🔎 **Behind the Scenes – Pattern Detection

OS looks for:**

  • 4–8 digit numeric codes
  • Words like: OTP, code, verification
  • App name or domain

If domain matches website → autofill works.

🔐 Is It Safe?

Yes — because:

  • App must match signature hash (Android)
  • User consent required (optional method)
  • iOS does not expose SMS conten
  • WebOTP works only on secure HTTPS

Thank you to read it till now , in next i will tell the details we need to add in code to enable otp auto filling and how to design the backend for auth system.

Stay connected. Pls visit the github

Drop by our Telegram Channel and let the adventure begin! See you there, Dev Explorer! 🌐🚀

Top comments (0)