@amir-hossein-karimi/react-native-android-sms-verification-api
v1.1.11
Published
A wrapper for the Android SMS Verification API. Includes both SMS Retriever for Zero-tap SMS verification and SMS User Consent for the One-tap SMS verification
Downloads
17
Maintainers
Readme
react-native-android-sms-verification-api
A wrapper for the Android SMS Verification API. Includes both SMS Retriever for Zero-tap SMS verification and SMS User Consent for the One-tap SMS verification
Installation
yarn add react-native-android-sms-verification-api
Usage
Requesting the user's phone number
import { requestPhoneNumber } from 'react-native-android-sms-verification-api';
try {
// presents a modal enabling the user to select their phone number. Requires a physical device, it won't work on an emulator
const phoneNumber = await requestPhoneNumber();
} catch (error) {
console.log(`${e.code} : ${e.message}`);
}
Using the User Consent API
import {
receiveVerificationSMS,
startSmsUserConsent,
requestPhoneNumber,
removeAllListeners,
} from 'react-native-android-sms-verification-api';
// 1. Define a callback that'll receive the message or any errors that occurs
receiveVerificationSMS((error, message) => {
if (error) {
// handle error
} else {
// parse the message to obtain the verification code
}
});
// 2. Get the user's phone number
const phoneNumber = await requestPhoneNumber();
// 3. Set's up listeners for the incoming message. !Do this before sending the sms!
await startSmsUserConsent();
// 4. Your custom logic for sending a verification code
await sendVerificationCode(phoneNumber);
// 5. Make sure to remove the listeners after you've successfully retrieved the verification code
removeAllListeners();
Using the SMS Retriever API
The SMS Retriever API requires you to include a 11-character hash string that identifies your app within the SMS body. See message requirements here
You can retrive the hash by following these steps. Or by using the getAppSignatures
function that's available within the library.
The getAppSignatures
function uses the AppSignatureHelper
java class and is not suposed to be included in your application. For this reason the getAppSignatures
function is only available on a separate branch of the library.
To get started
Include the library version with the signature helper
yarn add https://github.com/jgkiano/react-native-android-sms-verification-api.git#with-signature-helper
Change the minSdkVersion of your app to 19 but modifying the
android/build.gradle
file
ext {
minSdkVersion = 19
..//
}
- Retrive your app's signature
import { getAppSignatures } from 'react-native-android-sms-verification-api';
const [signature] = await getAppSignatures();
console.log(signature); // e.g FA+9qCX9VSu
- Once you retrive your app's signature, include it in the SMS your server sends to your users e.g
Your verification code is: 123ABC78
FA+9qCX9VSu
- Finally remove this version of the library in your project and include the offical release
yarn remove react-native-android-sms-verification-api && yarn add react-native-android-sms-verification-api
Usage
import {
requestPhoneNumber,
startSmsRetriever,
receiveVerificationSMS,
} from 'react-native-android-sms-verification-api';
// 1. Define a callback that'll receive the message or any errors that occurs
receiveVerificationSMS((error, message) => {
if (error) {
// handle error
} else {
// parse the message to obtain the verification code
}
});
// 2. Get the user's phone number
const phoneNumber = await requestPhoneNumber();
// 3. Set's up listeners for the incoming message. !Do this before sending the sms!
await startSmsRetriever();
// 4. Your custom logic for sending a verification code
await sendVerificationCode(phoneNumber);
// 5. Make sure to remove the listeners after you've successfully retrieved the verification code
removeAllListeners();
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
Documentation
License
MIT