react-native-otp-auto-verify 0.1.6 → 0.1.8

package/README.md

@@ -4,13 +4,15 @@
 [![npm version](https://img.shields.io/npm/v/react-native-otp-auto-verify.svg?style=flat-square)](https://www.npmjs.com/package/react-native-otp-auto-verify)      [![npm downloads](https://img.shields.io/npm/dm/react-native-otp-auto-verify.svg?style=flat-square)](https://www.npmjs.com/package/react-native-otp-auto-verify)      [![license](https://img.shields.io/npm/l/react-native-otp-auto-verify.svg?style=flat-square)](https://github.com/kailas-rathod/react-native-otp-auto-verify/blob/main/LICENSE)         [![typescript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=flat-square)](https://www.typescriptlang.org/)
 
 **react-native-otp-auto-verify** is a lightweight and secure React Native OTP auto-verification library for Android, built on the official Google SMS Retriever API. It enables automatic OTP detection without requiring READ_SMS or RECEIVE_SMS permissions, ensuring full Google Play Store compliance and enhanced user trust. Designed for modern authentication flows, this library is ideal for fintech apps, banking applications, e-commerce platforms, and secure login systems.
+No Permissions: It requires zero SMS permissions from the user, making it compliant with strict Google Play Store policies
 
 With minimal dependencies and clean architecture, it integrates seamlessly into both React Native Old Architecture and the New Architecture (TurboModule) environments. The solution improves user experience by eliminating manual OTP entry on Android while maintaining strong server-side validation standards.
 
 Works best for onboarding/login flows in **banking**, **fintech**, and authentication-heavy apps.
 Supports both RN Old Architecture and React Native **New Architecture** (TurboModule).
 **Android**: automatic OTP detection.
-**iOS**: auto-OTP is not supported—use manual OTP entry as fallback.
+
+**iOS**: Uses iOS Security Code AutoFill (manual tap required).
 
 **Connect:** [GitHub](https://github.com/kailas-rathod/react-native-otp-auto-verify) · [npm](https://www.npmjs.com/package/react-native-otp-auto-verify) · [Issues](https://github.com/kailas-rathod/react-native-otp-auto-verify/issues) · [License](https://github.com/kailas-rathod/react-native-otp-auto-verify/blob/main/LICENSE)
 
@@ -44,9 +46,13 @@ Supports both RN Old Architecture and React Native **New Architecture** (TurboMo
 
 ```sh
 npm install react-native-otp-auto-verify
+```
 # or
+```sh
 yarn add react-native-otp-auto-verify
+```
 # or
+```sh
 pnpm add react-native-otp-auto-verify
 ```
 
@@ -133,6 +139,150 @@ sub.remove();
 // or
 removeListener();
 ```
+🔹 Step 1 – Start OTP Listener
+```ts
+import { useOtpVerification } from 'react-native-otp-auto-verify';
+
+const { startOtpListener, stopListener, otp } = useOtpVerification();
+
+useEffect(() => {
+  startOtpListener();
+
+  return () => stopListener();
+}, []);
+```
+
+## Create OTP Screen (Recommended Hook Method)
+```ts
+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
+
+```ts
+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)
 
@@ -233,6 +383,22 @@ The New Architecture (also known as Fabric + TurboModules) is React Native's new
 - Synchronous native module calls
 - Improved interoperability with native code
 
+
+
+
+## ✨ Feature Comparison
+
+| Feature                  | react-native-otp-auto-verify | Other Packages/Libraries (react-native-otp-auto-verify)|
+|---------------------------|------------------------------|---------------------------|
+| SMS Retriever API        | ✅ Yes                      | ✅ Yes                   |
+| Requires SMS Permission  | ❌ No                       | ❌ No                    |
+| TurboModule Support      | ✅ Yes                      | ❌ Usually No            |
+| TypeScript Support       | ✅ Full                     | ⚠️ Partial               |
+| Hook API                 | ✅ `useOtpVerification`     | ❌ Not Available         |
+| App Hash Utility         | ✅ Built-in                 | ⚠️ Basic                 |
+| Architecture Ready       | ✅ Old + New                | ⚠️ Mostly Old Only       |
+| Maintenance              | ✅ Actively Maintained      | ⚠️ Varies                |
+
 ### Enabling New Architecture
 
 The library works automatically with both **Old Architecture** and **New Architecture**. No code changes needed.

package/android/src/main/java/com/otpautoverify/AppSignatureHelper.kt

@@ -1,80 +1,80 @@
-package com.otpautoverify
-
-import android.content.Context
-import android.content.ContextWrapper
-import android.content.pm.PackageManager
-import android.os.Build
-import android.util.Base64
-import android.util.Log
-import java.nio.charset.StandardCharsets
-import java.security.MessageDigest
-import java.security.NoSuchAlgorithmException
-import java.util.ArrayList
-import java.util.Arrays
-
-/**
- * Computes the 11-character app hash required by the SMS Retriever API.
- * Uses GET_SIGNING_CERTIFICATES on API 28+ and GET_SIGNATURES on older versions.
- */
-class AppSignatureHelper(context: Context) : ContextWrapper(context) {
-
-    companion object {
-        private const val TAG = "AppSignatureHelper"
-        private const val HASH_TYPE = "SHA-256"
-        private const val NUM_HASHED_BYTES = 9
-        private const val NUM_BASE64_CHAR = 11
-    }
-
-    /**
-     * Returns app hash strings for the current package.
-     * Include one of these in your SMS message (e.g. at the end) for the Retriever to match.
-     */
-    fun getAppSignatures(): ArrayList<String> {
-        val appCodes = ArrayList<String>()
-        try {
-            val packageName = packageName
-            val packageManager = packageManager
-            val signatures = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
-                val packageInfo = packageManager.getPackageInfo(
-                    packageName,
-                    PackageManager.GET_SIGNING_CERTIFICATES
-                )
-                packageInfo.signingInfo?.apkContentsSigners
-            } else {
-                @Suppress("DEPRECATION")
-                val packageInfo = packageManager.getPackageInfo(
-                    packageName,
-                    PackageManager.GET_SIGNATURES
-                )
-                packageInfo.signatures
-            } ?: return appCodes
-
-            for (signature in signatures) {
-                val hash = hash(packageName, signature.toCharsString())
-                if (hash != null) {
-                    appCodes.add(hash)
-                }
-            }
-        } catch (e: PackageManager.NameNotFoundException) {
-            Log.e(TAG, "Unable to find package to obtain hash.", e)
-        }
-        return appCodes
-    }
-
-    private fun hash(packageName: String, signature: String): String? {
-        return try {
-            val appInfo = "$packageName $signature"
-            val messageDigest = MessageDigest.getInstance(HASH_TYPE)
-            messageDigest.update(appInfo.toByteArray(StandardCharsets.UTF_8))
-            var hashSignature = messageDigest.digest()
-            hashSignature = Arrays.copyOfRange(hashSignature, 0, NUM_HASHED_BYTES)
-            var base64Hash = Base64.encodeToString(hashSignature, Base64.NO_PADDING or Base64.NO_WRAP)
-            base64Hash = base64Hash.substring(0, minOf(NUM_BASE64_CHAR, base64Hash.length))
-            Log.d(TAG, "pkg: $packageName -- hash: $base64Hash")
-            base64Hash
-        } catch (e: NoSuchAlgorithmException) {
-            Log.e(TAG, "hash: NoSuchAlgorithm", e)
-            null
-        }
-    }
-}
+package com.otpautoverify
+
+import android.content.Context
+import android.content.ContextWrapper
+import android.content.pm.PackageManager
+import android.os.Build
+import android.util.Base64
+import android.util.Log
+import java.nio.charset.StandardCharsets
+import java.security.MessageDigest
+import java.security.NoSuchAlgorithmException
+import java.util.ArrayList
+import java.util.Arrays
+
+/**
+ * Computes the 11-character app hash required by the SMS Retriever API.
+ * Uses GET_SIGNING_CERTIFICATES on API 28+ and GET_SIGNATURES on older versions.
+ */
+class AppSignatureHelper(context: Context) : ContextWrapper(context) {
+
+    companion object {
+        private const val TAG = "AppSignatureHelper"
+        private const val HASH_TYPE = "SHA-256"
+        private const val NUM_HASHED_BYTES = 9
+        private const val NUM_BASE64_CHAR = 11
+    }
+
+    /**
+     * Returns app hash strings for the current package.
+     * Include one of these in your SMS message (e.g. at the end) for the Retriever to match.
+     */
+    fun getAppSignatures(): ArrayList<String> {
+        val appCodes = ArrayList<String>()
+        try {
+            val packageName = packageName
+            val packageManager = packageManager
+            val signatures = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                val packageInfo = packageManager.getPackageInfo(
+                    packageName,
+                    PackageManager.GET_SIGNING_CERTIFICATES
+                )
+                packageInfo.signingInfo?.apkContentsSigners
+            } else {
+                @Suppress("DEPRECATION")
+                val packageInfo = packageManager.getPackageInfo(
+                    packageName,
+                    PackageManager.GET_SIGNATURES
+                )
+                packageInfo.signatures
+            } ?: return appCodes
+
+            for (signature in signatures) {
+                val hash = hash(packageName, signature.toCharsString())
+                if (hash != null) {
+                    appCodes.add(hash)
+                }
+            }
+        } catch (e: PackageManager.NameNotFoundException) {
+            Log.e(TAG, "Unable to find package to obtain hash.", e)
+        }
+        return appCodes
+    }
+
+    private fun hash(packageName: String, signature: String): String? {
+        return try {
+            val appInfo = "$packageName $signature"
+            val messageDigest = MessageDigest.getInstance(HASH_TYPE)
+            messageDigest.update(appInfo.toByteArray(StandardCharsets.UTF_8))
+            var hashSignature = messageDigest.digest()
+            hashSignature = Arrays.copyOfRange(hashSignature, 0, NUM_HASHED_BYTES)
+            var base64Hash = Base64.encodeToString(hashSignature, Base64.NO_PADDING or Base64.NO_WRAP)
+            base64Hash = base64Hash.substring(0, minOf(NUM_BASE64_CHAR, base64Hash.length))
+            Log.d(TAG, "pkg: $packageName -- hash: $base64Hash")
+            base64Hash
+        } catch (e: NoSuchAlgorithmException) {
+            Log.e(TAG, "hash: NoSuchAlgorithm", e)
+            null
+        }
+    }
+}

package/android/src/main/java/com/otpautoverify/OtpAutoVerifyModule.kt

@@ -1,146 +1,146 @@
-package com.otpautoverify
-
-import android.annotation.SuppressLint
-import android.content.IntentFilter
-import android.os.Build
-import android.util.Log
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.LifecycleEventListener
-import com.facebook.react.bridge.Promise
-import com.facebook.react.bridge.ReactApplicationContext
-import com.google.android.gms.auth.api.phone.SmsRetriever
-import com.google.android.gms.tasks.OnFailureListener
-import com.google.android.gms.tasks.OnSuccessListener
-class OtpAutoVerifyModule(reactContext: ReactApplicationContext) :
-    NativeOtpAutoVerifySpec(reactContext), LifecycleEventListener {
-
-    companion object {
-        const val NAME = NativeOtpAutoVerifySpec.NAME
-        private const val TAG = "OtpAutoVerifyModule"
-        const val OTP_RECEIVED_EVENT = "otpReceived"
-    }
-
-    private var smsReceiver: SmsRetrieverBroadcastReceiver? = null
-    private var isReceiverRegistered = false
-    private var isListening = false
-
-    init {
-        reactContext.addLifecycleEventListener(this)
-    }
-
-    override fun getTypedExportedConstants(): MutableMap<String, Any> {
-        return mutableMapOf("OTP_RECEIVED_EVENT" to OTP_RECEIVED_EVENT)
-    }
-
-    override fun getHash(promise: Promise) {
-        try {
-            val helper = AppSignatureHelper(reactApplicationContext)
-            val signatures = helper.getAppSignatures()
-            val arr = Arguments.createArray()
-            for (s in signatures) {
-                arr.pushString(s)
-            }
-            promise.resolve(arr)
-        } catch (e: Exception) {
-            Log.e(TAG, "getHash failed", e)
-            promise.reject("GET_HASH_ERROR", e.message, e)
-        }
-    }
-
-    override fun startSmsRetriever(promise: Promise) {
-        val activity = currentActivity
-        if (activity == null) {
-            promise.reject("NO_ACTIVITY", "No current activity. Ensure the app is in the foreground.")
-            return
-        }
-
-        registerReceiverIfNecessary(activity)
-
-        val client = SmsRetriever.getClient(reactApplicationContext)
-        client.startSmsRetriever()
-            .addOnSuccessListener(OnSuccessListener {
-                Log.d(TAG, "SMS retriever started")
-                isListening = true
-                promise.resolve(true)
-            })
-            .addOnFailureListener(OnFailureListener { e ->
-                Log.e(TAG, "Failed to start SMS retriever", e)
-                promise.reject("START_SMS_RETRIEVER_ERROR", e.message, e)
-            })
-    }
-
-    @SuppressLint("UnspecifiedRegisterReceiverFlag")
-    private fun registerReceiverIfNecessary(activity: android.app.Activity) {
-        if (isReceiverRegistered) return
-        try {
-            smsReceiver = SmsRetrieverBroadcastReceiver(reactApplicationContext, OTP_RECEIVED_EVENT)
-            val filter = IntentFilter(SmsRetriever.SMS_RETRIEVED_ACTION)
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
-                activity.registerReceiver(
-                    smsReceiver,
-                    filter,
-                    SmsRetriever.SEND_PERMISSION,
-                    null,
-                    android.content.Context.RECEIVER_EXPORTED
-                )
-            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
-                activity.registerReceiver(
-                    smsReceiver,
-                    filter,
-                    android.content.Context.RECEIVER_EXPORTED
-                )
-            } else {
-                activity.registerReceiver(smsReceiver, filter)
-            }
-            isReceiverRegistered = true
-            Log.d(TAG, "SMS receiver registered")
-        } catch (e: Exception) {
-            Log.e(TAG, "Failed to register SMS receiver", e)
-        }
-    }
-
-    private fun unregisterReceiver() {
-        val activity = currentActivity
-        if (isReceiverRegistered && activity != null && smsReceiver != null) {
-            try {
-                activity.unregisterReceiver(smsReceiver)
-                Log.d(TAG, "SMS receiver unregistered")
-            } catch (e: Exception) {
-                Log.e(TAG, "Failed to unregister SMS receiver", e)
-            }
-            isReceiverRegistered = false
-            smsReceiver = null
-        }
-        isListening = false
-    }
-
-    override fun addListener(eventName: String) {
-        // Required for NativeEventEmitter; no-op.
-    }
-
-    override fun removeListeners(count: Double) {
-        unregisterReceiver()
-    }
-
-    override fun onHostResume() {
-        // Optionally re-register if we were listening and activity was recreated.
-        if (isListening && currentActivity != null && !isReceiverRegistered) {
-            currentActivity?.let { registerReceiverIfNecessary(it) }
-        }
-    }
-
-    override fun onHostPause() {
-        unregisterReceiver()
-    }
-
-    override fun onHostDestroy() {
-        unregisterReceiver()
-        reactApplicationContext.removeLifecycleEventListener(this)
-    }
-
-    override fun invalidate() {
-        unregisterReceiver()
-        reactApplicationContext.removeLifecycleEventListener(this)
-        super.invalidate()
-    }
-}
+package com.otpautoverify
+
+import android.annotation.SuppressLint
+import android.content.IntentFilter
+import android.os.Build
+import android.util.Log
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.google.android.gms.auth.api.phone.SmsRetriever
+import com.google.android.gms.tasks.OnFailureListener
+import com.google.android.gms.tasks.OnSuccessListener
+class OtpAutoVerifyModule(reactContext: ReactApplicationContext) :
+    NativeOtpAutoVerifySpec(reactContext), LifecycleEventListener {
+
+    companion object {
+        const val NAME = NativeOtpAutoVerifySpec.NAME
+        private const val TAG = "OtpAutoVerifyModule"
+        const val OTP_RECEIVED_EVENT = "otpReceived"
+    }
+
+    private var smsReceiver: SmsRetrieverBroadcastReceiver? = null
+    private var isReceiverRegistered = false
+    private var isListening = false
+
+    init {
+        reactContext.addLifecycleEventListener(this)
+    }
+
+    override fun getTypedExportedConstants(): MutableMap<String, Any> {
+        return mutableMapOf("OTP_RECEIVED_EVENT" to OTP_RECEIVED_EVENT)
+    }
+
+    override fun getHash(promise: Promise) {
+        try {
+            val helper = AppSignatureHelper(reactApplicationContext)
+            val signatures = helper.getAppSignatures()
+            val arr = Arguments.createArray()
+            for (s in signatures) {
+                arr.pushString(s)
+            }
+            promise.resolve(arr)
+        } catch (e: Exception) {
+            Log.e(TAG, "getHash failed", e)
+            promise.reject("GET_HASH_ERROR", e.message, e)
+        }
+    }
+
+    override fun startSmsRetriever(promise: Promise) {
+        val activity = currentActivity
+        if (activity == null) {
+            promise.reject("NO_ACTIVITY", "No current activity. Ensure the app is in the foreground.")
+            return
+        }
+
+        registerReceiverIfNecessary(activity)
+
+        val client = SmsRetriever.getClient(reactApplicationContext)
+        client.startSmsRetriever()
+            .addOnSuccessListener(OnSuccessListener {
+                Log.d(TAG, "SMS retriever started")
+                isListening = true
+                promise.resolve(true)
+            })
+            .addOnFailureListener(OnFailureListener { e ->
+                Log.e(TAG, "Failed to start SMS retriever", e)
+                promise.reject("START_SMS_RETRIEVER_ERROR", e.message, e)
+            })
+    }
+
+    @SuppressLint("UnspecifiedRegisterReceiverFlag")
+    private fun registerReceiverIfNecessary(activity: android.app.Activity) {
+        if (isReceiverRegistered) return
+        try {
+            smsReceiver = SmsRetrieverBroadcastReceiver(reactApplicationContext, OTP_RECEIVED_EVENT)
+            val filter = IntentFilter(SmsRetriever.SMS_RETRIEVED_ACTION)
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+                activity.registerReceiver(
+                    smsReceiver,
+                    filter,
+                    SmsRetriever.SEND_PERMISSION,
+                    null,
+                    android.content.Context.RECEIVER_EXPORTED
+                )
+            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
+                activity.registerReceiver(
+                    smsReceiver,
+                    filter,
+                    android.content.Context.RECEIVER_EXPORTED
+                )
+            } else {
+                activity.registerReceiver(smsReceiver, filter)
+            }
+            isReceiverRegistered = true
+            Log.d(TAG, "SMS receiver registered")
+        } catch (e: Exception) {
+            Log.e(TAG, "Failed to register SMS receiver", e)
+        }
+    }
+
+    private fun unregisterReceiver() {
+        val activity = currentActivity
+        if (isReceiverRegistered && activity != null && smsReceiver != null) {
+            try {
+                activity.unregisterReceiver(smsReceiver)
+                Log.d(TAG, "SMS receiver unregistered")
+            } catch (e: Exception) {
+                Log.e(TAG, "Failed to unregister SMS receiver", e)
+            }
+            isReceiverRegistered = false
+            smsReceiver = null
+        }
+        isListening = false
+    }
+
+    override fun addListener(eventName: String) {
+        // Required for NativeEventEmitter; no-op.
+    }
+
+    override fun removeListeners(count: Double) {
+        unregisterReceiver()
+    }
+
+    override fun onHostResume() {
+        // Optionally re-register if we were listening and activity was recreated.
+        if (isListening && currentActivity != null && !isReceiverRegistered) {
+            currentActivity?.let { registerReceiverIfNecessary(it) }
+        }
+    }
+
+    override fun onHostPause() {
+        unregisterReceiver()
+    }
+
+    override fun onHostDestroy() {
+        unregisterReceiver()
+        reactApplicationContext.removeLifecycleEventListener(this)
+    }
+
+    override fun invalidate() {
+        unregisterReceiver()
+        reactApplicationContext.removeLifecycleEventListener(this)
+        super.invalidate()
+    }
+}