react-native-otp-verify-remastered
Version:
[DEPRECATED] This package is no longer maintained. Please use @pushpendersingh/react-native-otp-verify instead.
215 lines (173 loc) • 7.4 kB
Markdown
# 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`](https://www.npmjs.com/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
>
> ```sh
> 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):**
> ```javascript
> 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):**
> ```javascript
> 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
>
> ---
[](https://github.com/pushpender-singh-ap/react-native-otp-verify-remastered/actions/workflows/test.yml)
[](https://github.com/pushpender-singh-ap/react-native-otp-verify-remastered/actions/workflows/npm.yml)
[](https://github.com/pushpender-singh-ap/react-native-otp-verify-remastered/blob/main/LICENSE)
[](https://github.com/pushpender-singh-ap/react-native-otp-verify-remastered/issues)
[](https://github.com/pushpender-singh-ap/react-native-otp-verify-remastered/pulls)
[](https://GitHub.com/pushpender-singh-ap/react-native-otp-verify-remastered/pull/)
[](https://GitHub.com/pushpender-singh-ap/react-native-otp-verify-remastered/graphs/contributors/)
[](https://www.npmjs.com/package/react-native-otp-verify-remastered)
[](https://github.com/pushpender-singh-ap/react-native-otp-verify-remastered/commits)
## 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](https://www.npmjs.com/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](https://developers.google.com/identity/sms-retriever/verify)
## Getting started
```
npm i react-native-otp-verify-remastered
```
or
```
yarn add react-native-otp-verify-remastered
```
## Usage
```javascript
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 git@github.com: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.