Effortless OTP Auto Verification in React Native Using react-native-otp-auto-verify

Improve authentication UX in React Native apps by automatically reading OTP codes using Android’s SMS Retriever API.

Introduction

OTP-based authentication has become a standard pattern in modern mobile applications. From fintech platforms to ride-sharing apps, verifying a user’s phone number through a One-Time Password (OTP) is one of the most widely used identity verification methods.

However, while OTP authentication improves security and identity verification, the user experience around entering OTPs is often poor.

Users typically need to:

1. Wait for the SMS to arrive
2. Switch between apps
3. Copy the OTP manually
4. Return to the app and paste it

Even with clipboard suggestions or auto-fill keyboards, the process still introduces friction during onboarding or login flows.

For production mobile applications where conversion rate and user experience matter, this small friction can significantly impact user drop-off rates.

This is exactly the problem I wanted to solve while building production-scale mobile applications — which led to creating the open-source library

**react-native-otp-auto-verify**.

https://www.npmjs.com/package/react-native-otp-auto-verify https://github.com/kailas-rathod/react-native-otp-auto-verify

The Problem: Manual OTP Entry

When building OTP-based authentication flows in React Native, developers often encounter several challenges.

1. Friction in Authentication Flows

Every additional user action increases the chance of user abandonment.

Manual OTP entry forces the user to

• Read the message
• Remember or copy the code
• Return to the app
• Enter the OTP

Even a 5–10 second delay can negatively affect onboarding conversion rates.

2. SMS UX Problems

OTP messages often arrive when the user is already inside the app waiting for verification.

Without auto-reading capability:

• Users must switch apps
• Copy OTP manually
• Return to the app

This creates a broken UX flow.

3. Increased User Drop-Off

In production apps, OTP verification is frequently part of the following:

• New user onboarding
• Passwordless login
• Phone number verification

If the verification process feels slow or confusing, users may abandon the flow completely.

4. Implementation Complexity for Developers

Implementing automatic OTP detection in React Native is not trivial.

Developers typically need to:

• Work with Android native modules
• Integrate with Google’s SMS Retriever API
• Handle app hash generation
• Bridge native code with JavaScript

This introduces additional complexity, especially for teams focused on shipping product features quickly.

The Solution:react-native-otp-auto-verify

To simplify OTP auto-verification in React Native applications, I created the npm package

**react-native-otp-auto-verify**

This library provides a simple and reliable way to automatically read OTP messages on Android using the SMS Retriever API, without requiring SMS permissions.

Why This Library Was Created

While building authentication flows in real production apps, I noticed:

• Many libraries were outdated
• Some required dangerous SMS permissions
• Others had complicated setup steps

I wanted a solution that was

• Lightweight
• Production-friendly
• Easy to integrate
• Secure

Key Features

react-native-otp-auto-verify provides several useful capabilities:

Automatic OTP detection

The library listens for incoming OTP messages and extracts the code automatically.

No SMS permission required

It uses Google’s SMS Retriever API, which works without requesting SMS read permissions.

React Native friendly

Provides a simple JavaScript interface while handling the native Android implementation internally.

Improved authentication UX

Automatically fills OTP input fields, creating a smooth onboarding experience.

Platform Support

Currently, the library supports:

Android

• Uses SMS Retriever API
• Works without READ_SMS permission
• Secure and recommended by Google

For iOS, OTP auto-fill is typically handled by Apple’s native SMS auto-fill feature through the keyboard suggestion bar.

How It Works (Technical Overview)

Understanding the underlying mechanism helps developers correctly implement OTP auto-verification.

SMS Retriever API

Android provides the SMS Retriever API as part of Google Play Services.

This API allows apps to listen for specific SMS messages containing an app-specific hash.

The key advantage is that

• The app does not need SMS read permission
• Only messages containing the correct hash are delivered to the app

This makes the system secure and privacy-friendly.

React Native Native Bridge

react-native-otp-auto-verify connects the Android native implementation with React Native JavaScript through a native bridge.

The process looks like this:

1. React Native starts the OTP listener
2. Native Android module activates SMS Retriever
3. An incoming SMS is captured
4. OTP is extracted
5. OTP is returned

This abstraction allows developers to use the feature with only a few lines of code.

Implementation Example

Let’s look at a simple integration example.

Installation

Install the library using npm:

npm install react-native-otp-auto-verify

or using yarn:

yarn add react-native-otp-auto-verify

After installing, run:

cd ios && pod install

App Hash

The App Hash is a unique identifier generated from your app’s package name and signing certificate.

The OTP SMS sent by your backend must include this hash.

SMS Retriever only delivers messages that include your 11-character app hash. Example SMS format:

import { getHash } from 'react-native-otp-auto-verify';
const hashes = await getHash();
const appHash = hashes[0]; // send this to your backend

Dear Rathod, 321500 is your OTP for mobile authentication. This OTP is valid for the next 15 minutes. Please DO NOT share it with anyone.
uW87Uq6teXc

Where:

• 482193 → OTP code
• FA+9qCX9VSu → App hash

When Android receives this SMS, the SMS Retriever API detects the hash and delivers the message directly to the app.

2) Format your OTP SMS

Your backend must include the app hash at the end of the SMS.

Requirements:

• Message must be ≤ 140 bytes
• Must contain a 4–6 digit OTP
• Must end with the app hash from getHash()

Recommended format:

Dear Rathod, 321500 is your OTP for mobile authentication. This OTP is valid for the next 15 minutes. Please DO NOT share it with anyone.
uW87Uq6teXc

Note: You do not need <#> at the start of the message.

3) Hook usage (recommended)

Start listening only while the OTP screen is visible (foreground).

import React from 'react';
import { Text, View } from 'react-native';
import { useOtpVerification } from 'react-native-otp-auto-verify';
export function OtpScreen() {
  const { hashCode, otp, timeoutError, error, startListening, stopListening } =
    useOtpVerification({ numberOfDigits: 6 });

React.useEffect(() => {
    void startListening();
    return () => stopListening();
  }, [startListening, stopListening]);
  return (
    <View>
      {!!hashCode && <Text>Hash: {hashCode}</Text>}
      {!!otp && <Text>OTP: {otp}</Text>}
      {timeoutError && <Text>Timeout. Tap resend and try again.</Text>}
      {!!error && <Text>Error: {error.message}</Text>}
    </View>
  );
}

🔹 Step 1 — Start OTP Listener

import { useOtpVerification } from 'react-native-otp-auto-verify';
const { startOtpListener, stopListener, otp } = useOtpVerification();
useEffect(() => {
  startOtpListener();
  return () => stopListener();
}, []);

Create OTP Screen (Recommended Hook Method)

import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  Platform,
} from 'react-native';
import { useOtpVerification } from 'react-native-otp-auto-verify';
const OtpScreen = () => {
  const [otpValue, setOtpValue] = useState('');
  const {
    otp,
    hashCode,
    timeoutError,
    error,
    startListening,
    stopListening,
  } = useOtpVerification({ numberOfDigits: 6 });
  // Start listener when screen opens
  useEffect(() => {
    if (Platform.OS === 'android') {
      startListening();
    }
    return () => {
      stopListening();
    };
  }, []);
  // Auto verify when OTP received
  useEffect(() => {
    if (otp) {
      setOtpValue(otp);
      verifyOtp(otp);
    }
  }, [otp]);
  const verifyOtp = async (code: string) => {
    console.log('Verifying OTP:', code);
    // Call your backend API here
    // await api.post('/verify-otp', { otp: code })
  };
  return (
    <View style={{ padding: 20 }}>
      <Text>Enter OTP</Text>
      <TextInput
        value={otpValue}
        onChangeText={setOtpValue}
        keyboardType="number-pad"
        maxLength={6}
        textContentType="oneTimeCode"
        autoComplete="sms-otp"
        style={{
          borderWidth: 1,
          padding: 12,
          marginVertical: 12,
        }}
      />
      <Button title="Verify" onPress={() => verifyOtp(otpValue)} />
      {timeoutError && (
        <Text style={{ color: 'red' }}>
          Timeout. Please resend OTP.
        </Text>
      )}
      {error && (
        <Text style={{ color: 'red' }}>
          Error: {error.message}
        </Text>
      )}
    </View>
  );
};
export default OtpScreen;

Start OTP Listener in Screen

import React, { useEffect, useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import { useOtpVerification } from 'react-native-otp-auto-verify';
export default function OtpScreen() {
  const [otpValue, setOtpValue] = useState('');
  const {
    otp,
    startListening,
    stopListening,
  } = useOtpVerification({ numberOfDigits: 6 });
  useEffect(() => {
    startListening();   // Start listening
    return () => {
      stopListening();  // Cleanup
    };
  }, []);
  useEffect(() => {
    if (otp) {
      setOtpValue(otp);   // OTP automatically retrieved here
      console.log('Retrieved OTP:', otp);
    }
  }, [otp]);
  return (
    <View>
      <TextInput
        value={otpValue}
        onChangeText={setOtpValue}
        keyboardType="number-pad"
        maxLength={6}
      />
    </View>
  );
}

iOS OTP AutoFill (Native)

iOS does not allow third-party libraries to read SMS messages.

Automatic SMS reading is restricted by Apple for privacy and security reasons. Instead, iOS provides a native feature called Security Code AutoFill, which suggests the OTP above the keyboard when properly configured.

This library does not auto-read OTP on iOS.

How iOS OTP AutoFill Works

1. User receives an SMS containing an OTP.
2. iOS detects the code.
3. The OTP appears above the keyboard.
4. User taps the suggestion.
5. The code fills automatically into the input field.

No SMS permissions required.

Use the following configuration in your OTP input field:

<TextInput
  style={styles.input}
  keyboardType="number-pad"
  textContentType="oneTimeCode"
  autoComplete="sms-otp"
  importantForAutofill="yes"
  maxLength={6}
/>

1. User receives an SMS containing an OTP.
2. iOS detects the code.
3. The OTP appears above the keyboard.
4. User taps the suggestion.
5. The code fills automatically into the input field.

No SMS permissions required.

With this setup, the OTP will automatically appear in the input field when the SMS arrives.

Production Use Cases

OTP auto verification is widely used in production mobile applications.

Some common examples include:

Phone Number Authentication

Many apps use OTP verification as part of passwordless login systems.

This is common in:

• Social platforms
• Messaging apps
• Community platforms

Fintech Applications

Fintech apps rely heavily on OTP verification for the following:

• Secure account login
• Transaction confirmation
• Identity verification

Fast OTP auto-fill improves both security and usability.

Ride-Sharing Apps

Apps like ride-sharing or delivery platforms use OTP verification during:

• User onboarding
• Driver verification
• Phone number validation

Auto-verification reduces friction during sign-up.

E-Commerce Onboarding

Many e-commerce platforms allow users to sign up with just a phone number.

OTP auto-fill significantly speeds up the checkout or registration flow.

OTP-Based Login Systems

Modern apps increasingly adopt passwordless authentication, where OTP replaces traditional passwords.

This approach simplifies login while maintaining security.

Production Insights & Best Practices

If you’re implementing OTP auto-verification in production apps, consider these best practices.

Format Your SMS Correctly

The OTP message should follow the SMS Retriever format:

Dear Rathod, 321500 is your OTP for mobile authentication. This OTP is valid for the next 15 minutes. Please DO NOT share it with anyone.
uW87Uq6teXc

<AppHash> =="uW87Uq6teXc"

Incorrect formatting can cause OTP detection to fail.

Architecture Diagram (SMS Retriever Flow)

+-------------------+
|  React Native App |
|  OTP Screen       |
+---------+---------+
          |
          | startListening()
          |
          v
+-------------------------+
| Native Android Module   |
| (SMS Retriever API)     |
+-----------+-------------+
            |
            | Listen for SMS
            |
            v
+-----------------------------+
|   Google Play Services      |
|   SMS Retriever Service     |
+-------------+---------------+
              |
              | SMS arrives with App Hash
              |
              v
+-----------------------------+
|  User SMS Message           |
|                             |
| <#> Your OTP is 482193      |
| FA+9qCX9VSu (App Hash)      |
+-------------+---------------+
              |
              | Hash Match
              |
              v
+-----------------------------+
| OTP Extracted               |
|                             |
| 482193                      |
+-------------+---------------+
              |
              v
+-----------------------------+
| React Native Hook           |
| useOtpVerification()        |
+-------------+---------------+
              |
              v
+-----------------------------+
| OTP Auto-filled in Input    |
| Verification API Called     |
+-----------------------------+

Architecture: How OTP Auto Verification Works

User Login Request
       │
       ▼
Backend Sends OTP SMS
       │
       ▼
SMS Contains OTP + App Hash
       │
       ▼
Android SMS Retriever API
       │
       ▼
React Native Native Module
       │
       ▼
OTP Extracted Automatically
       │
       ▼
OTP Auto-filled in Input Field
       │
       ▼
Verify API Called

Use Short OTP Expiration

OTP codes should typically expire within:

30–120 seconds

This reduces security risks and improves authentication integrity.

Handle Timeouts Gracefully

Sometimes OTP detection may fail due to network delays.

Provide:

• Manual OTP entry
• Resend OTP option

This ensures the user is never blocked.

Improve Input UX

Consider improving the OTP input experience by:

• Splitting OTP fields into 6-digit input boxes
• Automatically moving focus
• Auto-submitting once OTP is complete

These small improvements significantly enhance usability.

Conclusion

OTP verification is a critical part of mobile authentication systems, but the default user experience often introduces unnecessary friction.

By automatically detecting OTP messages, developers can create seamless authentication flows that improve both usability and conversion rates.

The **react-native-otp-auto-verify** library simplifies this process for React Native developers by providing:

• A lightweight integration
• Secure OTP detection via SMS Retriever API
• A clean JavaScript interface for native functionality

If you’re building production-grade authentication flows in React Native, integrating OTP auto verification can dramatically improve the user experience.

You can explore the library here:

npm: https://www.npmjs.com/package/react-native-otp-auto-verify

GitHub: https://github.com/kailas-rathod/react-native-otp-auto-verify

If you’re working on mobile authentication systems, I hope this library helps simplify your implementation and improves the overall user experience for your users.