react-native-otp-verify-remastered

⚠️ DEPRECATED - This package is no longer maintained

This package has been deprecated and replaced with a new, modern implementation.

🚀 Migrate to the new package: @pushpendersingh/react-native-otp-verify

Why migrate?

• ✅ Built with New Architecture: Full support for React Native's new architecture (TurboModules)
• ✅ Modern React Native: Supports React Native >= 0.76
• ✅ Better APIs: Improved API design with TypeScript support
• ✅ Two verification methods: SMS Retriever API (automatic) + SMS User Consent API (with user approval)
• ✅ Zero permissions: No READ_SMS or RECEIVE_SMS required
• ✅ Easy iOS handling: Proper iOS platform exclusion with react-native.config.js
• ✅ Active maintenance: Regular updates and bug fixes
• ✅ Better documentation: Comprehensive guides and examples

📦 Installation

npm uninstall react-native-otp-verify-remastered
npm install @pushpendersingh/react-native-otp-verify

🔄 Quick Migration Guide

The new package has a cleaner, more intuitive API. Here's how to migrate:

Old (react-native-otp-verify-remastered):

import RNOtpVerify from 'react-native-otp-verify-remastered';

// Get hash
RNOtpVerify.getHash().then(console.log);

// Start listening
RNOtpVerify.getOtp()
  .then(() => RNOtpVerify.addListener(this.otpHandler))
  .catch(console.log);

otpHandler = (message) => {
  const otp = /(\d{4})/g.exec(message)[1];
  RNOtpVerify.removeListener();
}

New (@pushpendersingh/react-native-otp-verify):

import {
  startSmsRetriever,
  addSmsListener,
  getAppSignature,
  extractOtp,
} from '@pushpendersingh/react-native-otp-verify';

// Get hash
const signature = await getAppSignature();
console.log(signature);

// Start listening
await startSmsRetriever();
const removeListener = addSmsListener((message) => {
  if (message.status === 'success' && message.message) {
    const otp = extractOtp(message.message);
    // Use OTP
  }
});

// Cleanup
removeListener();

📚 Full Documentation

Visit the new package for complete documentation: https://www.npmjs.com/package/@pushpendersingh/react-native-otp-verify

---

Due to the lack of response from the maintenance team, I am deploying my own package for my projects. If you'd like to use this package, feel free to do so.

Original Package react-native-otp-verify

Currently supported React Native version: >= 0.64.0

react-native-otp-verify-remastered

The SMS Retriever API is used in Automatic SMS Verification. You can use the API to automatically verify users' identities through SMS, without requiring them to type verification codes manually or requiring them to grant additional permissions to your app.

Message Format/Structure

In order to detect the message, a hash that identifies your application must be included in the SMS. Below, you can find this hash by using the getHash() method.

For more information on the message structure, consult the official documentation here. Google developer guide

Getting started

npm i react-native-otp-verify-remastered

or

yarn add react-native-otp-verify-remastered

Usage

import RNOtpVerify from 'react-native-otp-verify-remastered';


// THIS PACKAGE ONLY FOR ANDROID

getHash = () =>
    RNOtpVerify.getHash()
    .then(console.log)
    .catch(console.log);

startListeningForOtp = () =>
    RNOtpVerify.getOtp()
    .then(p => RNOtpVerify.addListener(this.otpHandler))
    .catch(p => console.log(p));

otpHandler = (message: string) => {
        const otp = /(\d{4})/g.exec(message)[1];
        this.setState({ otp });
        RNOtpVerify.removeListener();
        Keyboard.dismiss();
}

getMobilehint = () => {
    RNOtpVerify.requestHint()
    .then((h) => console.log(h))
    .catch((e) => console.log(e));
}

componentWillUnmount() {
    RNOtpVerify.removeListener();
}

Example React Native App

This project includes an example React Native app. You can run the apps by following these steps:

1. Clone the repository

cd ~
git clone [email protected]:pushpender-singh-ap/react-native-otp-verify-remastered.git

2. cd to example

cd react-native-otp-verify-remastered/example

3. Install dependencies

npm install

4. Run the apps:

Run the Android app

react-native run-android

Methods

getOtp():Promise<boolean>

Start listening for OTP/SMS. Return true if listener starts else throws error.

getOtp():Promise<boolean>

Start listening for OTP/SMS. Return true if listener starts else throws error.

getHash():Promise<string[]>

Gets the hash code for the application which should be added at the end of message. This is just a one time process.

requestHint():Promise<string[]>

This method is part of sms retreiver api and its show available phone number list.

addListener(handler:(message:string)=>any):Promise<boolean>

Adds a javascript listener to the handler passed which is called when message is received.

removeListener():void

Removes the listener.