Automatic SMS Verification in React Native

Automatic SMS Verification — React Native (Android)

Automatic SMS Verification is one feature that helps users to do their tasks hustle free. It’s an impressive feature to include in almost every app just because adds a “wow” feeling.

Next question will be how?

Alright, we are going to understanding more about automated OTP reading. Before we start, this only works for Android.

There are a couple of libraries out there.

https://www.npmjs.com/package/react-native-otp-verify

https://www.npmjs.com/package/react-native-sms-retriever-api

Both these packages work with SMS Retriever API. To listen to SMS from a particular app, SMS Retriever API uses the hash key, which created using the Keystore file. To work on debugging and production APK, you need to create a separate hash key.

I found the follwoing image from developers.google.com. This is what exactly what we are going to do.

Originally from https://developers.google.com/identity/sms-retriever/overview

Following, we are going to discuss the first package.

Install and link the library

$ npm install react-native-otp-verify — save

$ react-native link react-native-otp-verify

OTP listener component will listen to the SMS with the provided hash key. It will read SMS as a text string and you can trim it using regex or what ever you prefer.

Next is step is to create the hash key. Download and keep the following script in the root directory.
googlearchive/android-credentials
*Migrated:. Contribute to googlearchive/android-credentials development by creating an account on GitHub.*github.com

$./sms_retriever_hash_v9.sh — package “com.awesomeproject” — keystore ./android/app/debug.keystore

Here I’m using debug.keystore as the app is in the development stage and ‘com.awesomeproject’ is the package name. After that, you need to enter debug. keystore password; which is most of the time ‘android’. If the password is right you hash key is generated with message ‘SMS Retriever hash code: ‘.

While crafting the OTP message keep below things in mind

1. Should start with <#>, to register as an OTP SMS

2. The message should end with the generated hash key

If you haven’t an SMS service, verify this using emulator.

Install the app in the emulator. Click on More (three dots), select phone, from the opened widget you can see a text input where you can type any message.

sending OTP SMS using Emulator

Sample Message

<#> Welcome to AwsomeProject. Your verification code is 5843.
kFUwfusCq/+

Further Reading

1. https://developers.google.com/identity/sms-retriever/overview

2. https://developers.google.com/identity/sms-retriever/verify

Cover image rights belong to Photo by Jamie Street on Unsplash