React native sms verification without additional permissions.
npm install react-native-otp-autocompleteIt uses Automatic SMS Verification with the SMS Retriever API.
With the SMS Retriever API, you can perform SMS-based user verification in your Android app automatically, without requiring the user to manually type verification codes, and without requiring any extra app permissions.
## Message Format/Structure
In order to detect the message, SMS message must include a hash that identifies your app. This hash can be obtained by using the getHash() method below.
Please read the official documentation for the message structure at this
Google developer guide
$ npm install react-native-otp-autocomplete --save
or$ yarn react-native-otp-autocomplete
$ react-native link react-native-otp-autocomplete1. Open up android/app/src/main/java/[...]/MainActivity.java
- Add import com.jmlavoier.OtpAutocomplete.RNOtpAutocompletePackage; to the imports at the top of the file
- Add new RNOtpAutocompletePackage() to the list returned by the getPackages() method
2. Append the following lines to android/settings.gradle:
``gradle`
include ':react-native-otp-autocomplete'
project(':react-native-otp-autocomplete').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-otp-autocomplete/android')
android/app/build.gradle
3. Insert the following lines inside the dependencies block in :`
gradle`
compile project(':react-native-otp-autocomplete')
javascript
import OtpAutocomplete from 'react-native-otp-autocomplete';const getHash = () =>
OtpAutocomplete.getHash()
.then(console.log)
.catch(console.log);
const startListeningForOtp = () =>
OtpAutocomplete.getOtp()
.then(p => OtpAutocomplete.addListener(otpHandler))
.catch(p => console.log(p));
const otpHandler = (message: string) => {
const otp = /(\d{4})/g.exec(message)[1];
this.setState({ otp });
OtpAutocomplete.removeListener();
Keyboard.dismiss();
}
useEffet(() => {
startListeningForOtp();
return () => OtpAutocomplete.removeListener();
}, [startListeningForOtp]);
``#### Methods
---
Start listening for OTP/SMS. Return true if listener starts else throws error.
---
Gets the hash code for the application which should be added at the end of message.
This is just a one time process.
---
Adds a javascript listener to the handler passed which is called when message is received.
---
Removes the listener.
---