close

DEV Community

Kailas Rathod
Kailas Rathod

Posted on • Edited on

🚀 Boost Login UX with Auto OTP Verification in React Native: react-native-otp-auto-verify (Complete Guide)

#mobile #reactnative #ux #verify

OTP (One-Time Password) flows are critical—but poorly implemented OTP UX leads to drop-offs, delays, and frustration.

This guide shows how to implement automatic OTP verification in React Native using:

  • SMS Retriever (auto)
  • SMS User Consent (fallback)
  • ✅ With real working code

🔐 Why Auto OTP Matters

Without auto verification:

  • Users switch apps
  • Copy/paste OTP
  • Make errors

With auto verification:

  • ⚡ Instant login
  • 🎯 Zero errors
  • 📈 Better conversion

📦 Install Library 

npm install react-native-otp-auto-verify
Enter fullscreen mode Exit fullscreen mode 
cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

⚡ Step 1: Get App Hash (IMPORTANT)

This hash must be added to your OTP SMS.

import { getHash } from 'react-native-otp-auto-verify';

const fetchHash = async () => {
  const hashes = await getHash();
  console.log('App Hash:', hashes[0]);
};
Enter fullscreen mode Exit fullscreen mode

👉 Send this hash to your backend
👉 Backend must append it to SMS (Medium)

📩 SMS Format (Backend) 

Dear User, 123456 is your OTP for login.

FA+9qCX9VSu
Enter fullscreen mode Exit fullscreen mode

✔ Last line = app hash
✔ Required for auto detection

⚡ Step 2: Auto OTP Detection (Recommended Hook) 

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { useOtpVerification } from 'react-native-otp-auto-verify';

export default function OtpScreen() {
  const {
    hashCode,
    otp,
    error,
    timeoutError,
    startListening,
    stopListening,
  } = useOtpVerification({ numberOfDigits: 6 });

  useEffect(() => {
    startListening();

    return () => {
      stopListening();
    };
  }, []);

  return (
    <View>
      <Text>Hash: {hashCode}</Text>

      {otp ? (
        <Text>✅ OTP Received: {otp}</Text>
      ) : (
        <Text>Waiting for OTP...</Text>
      )}

      {timeoutError && <Text>⏱ Timeout, retry</Text>}
      {error && <Text>❌ Error: {error.message}</Text>}
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

👉 This listens for SMS and auto-fills OTP
👉 No SMS permission required (Medium)

⚡ Step 3: Extract OTP into Input Field

Example with input:

import React, { useEffect, useState } from 'react';
import { View, TextInput } from 'react-native';
import { useOtpVerification } from 'react-native-otp-auto-verify';

export default function OtpInputScreen() {
  const [code, setCode] = useState('');

  const { otp, startListening, stopListening } =
    useOtpVerification({ numberOfDigits: 6 });

  useEffect(() => {
    startListening();
    return () => stopListening();
  }, []);

  useEffect(() => {
    if (otp) {
      setCode(otp); // auto fill
      console.log('Auto OTP:', otp);
    }
  }, [otp]);

  return (
    <View>
      <TextInput
        value={code}
        onChangeText={setCode}
        placeholder="Enter OTP"
        keyboardType="numeric"
      />
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

👆 Step 4: Fallback Strategy (Important)

Auto detection may fail if:

  • SMS format incorrect
  • Delay in SMS
  • No hash

👉 Always add fallback:

if (!otp) {
  // show manual input + resend button
}
Enter fullscreen mode Exit fullscreen mode

🧠 Best Practice (Production)

✅ Hybrid Flow 

try {
  startListening(); // auto (SMS Retriever)
} catch (e) {
  // fallback UI
}
Enter fullscreen mode Exit fullscreen mode

🔒 Security Notes

  • No READ_SMS permission required
  • Only messages with your app hash are read
  • OTP must always be verified on backend (Medium)

🏁 Conclusion

To build a production-grade OTP system:

✔ Use SMS Retriever → best UX
✔ Add manual fallback → reliability
✔ Format SMS correctly → critical

📦 GitHub

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

🔥 Final Takeaway

Auto OTP verification is not just a feature—it’s a UX upgrade.

Implement it correctly, and your login flow becomes:
👉 Faster
👉 Cleaner
👉 Conversion-friendly

ReactNative #OTP #MobileDevelopment #AndroidDev #UX #Authentication

Top comments (0)