14 Apr How to Implement SMS Verification Codes Auto-Fill in React Native Android Apps
This article was originally published on Medium by Eldar Abdullazyanov, a Frontend and React Native Developer at Akvelon.
On one of my projects, I was tasked with implementing the two-factor auth flow which included the auto-fill feature. I encountered the problem that React Native doesn’t support such a feature out-of-box for Android. So I searched for 3rd-party solutions and found only one. It worked in general, but was unstable and led to several app crashes. Also, I could see some architectural issues in it. Considering this, rather than devoting countless hours trying to debug it, my team decided to implement a solution on our own. I implemented it and made the solution an open-source library, so anyone who encounters the same problem can just use it instead of spending their resources unnecessarily doing the exact same work.
This article discusses my experience developing the solution, as well as my experience creating an open-source NPM package for React Native.
If you just want to solve the problem without digging into details, you can jump to the library at GitHub and use the solution. For those of you who are interested in some more info and tech details, please continue reading.
Part 1 — Our Approach
How to Start
In order to implement a React Native Android module, a developer has to have experience with native Android and Java/Kotlin. Also, for the SMS User Consent module, they need to study the official tutorial (the overview and the implementation) that explains how it works and how to use it.
Want to read this story later? Save it in Journal.
Additionally, to upload the solution to NPM, we will use the NPM CLI and a package builder. This process is described in Part 2 of this tutorial.
Here we will learn how the module was implemented. It’s considered that it was implemented within an app as opposed to as an external package.
Step 1 — Setting Up the Module
I added main files (
ReactNativeSmsUserConsentPackage.java) following React Native’s official tutorial. In our case, these files live in this
android/src/main/java/com/akvelon/reactnativesmsuserconsent folder as well as other implementation files.
ReactNativeSmsUserConsentModule.java is the main file that aggregates functionality. We will cover some of its methods later in the tutorial.
Step 2 — Implementing the Native Android Part
Next, I implemented the core SMS User Consent functionality following the official Android tutorial, excluding step 1 since we didn’t need the user’s phone number for our purposes. After following the tutorial, we have the solution that shows the SMS User Consent modal and receives the SMS text.
To view the actual code I ended up with, please see the
subscribe method of
ReactNativeSmsUserConsentModule.java, which also involves
SmsListener.java files that are part of the implementation.
Now we have the core of our solution, but we need some more control and convenience for real-life purposes. There are a couple more methods addressing this:
unsubscribe. Removes the listener and stops showing SMS User Consent modal when the SMS is received. This is a crucial method that covers such cases as when the user left the code entry screen before the SMS is received.
resubscribe. Since the
subscribemethod basically handles only one SMS and not any more, we need to unsubscribe and subscribe again every time in order to receive another one. This method handles this, making it a bit easier and safer because there is no space for errors like not calling
unsubscribeand only calling
subscribeand so on. Also, it catches exceptions in these two methods making it even safer. Furthermore,
resubscribeis called automatically when an SMS is handled, which we will examine in the next step, so users of the package don’t need to care about re-subscribing after every single SMS. This is a huge convenience that simplifies life for the React side of the question. This, in particular, makes the final API dramatically simpler.
Step 3 — Connecting Native with React and Creating Wrapper Methods
To expose our methods to the React side we will create methods that are annotated by
@ReactMethod following the official React Native guide. The methods are:
stopNativeSmsListener. They are nothing but wrapped
unsubscribe methods respectfully that use promises as a way of passing data to the React side.
Now we have a way to start and stop listening to SMS from the React side, but we don’t have a way of getting the SMS content when the SMS is received. Let’s add such a way. We receive the SMS text in
SmsListener.java. So we create the
handleSms method in
ReactNativeSmsUserConsentModule.java and call it from the
SmsListener.java with the SMS text as the parameter. This is how our main class receives the SMS text. After that, we emit the event using React Native’s standard native event emitter from the
sendSmsEventToJs method which is created specifically for this purpose, and this is how the React side gets the SMS text. Also within the
handleSms method we call
resubscribe so that our code is insta-ready to receive another SMS with a verification code.
Here is how the native part looks:
Now, on the JS-side, we use these methods to form the actual API. Basically, it can be any file. In our package, the API lives in the
src/ folder. Let’s shed light on key files in it:
index.android.js. Android-only entry point that aggregates all the API methods and exports them.
index.ios.js. iOS-only entry point. Since the package is Android-only, we export no-op methods from here, handling iOS for users so that they won’t have to write additional code to handle iOS.
nativeApi.js. The core file, which is basically the bridge connecting the Native part with the JS part. It imports
NativeModulesobjects, handles them, and exports
ReactNativeSmsUserConsent(the file containing native methods we exposed using
eventEmitterobjects that are used by other files.
startSmsHandling.js. Another core file that imports
nativeApi.jsand wraps its
Now, with the
startSmsHandling API method we created, users can add the auto-fill functionality to their apps:
Though this is still not optimal, we’ll examine this in the next (the last) step.
Step 4 — Implementing Convenience Methods
We provided the
startSmsHandling method to users which is totally sufficient to add the auto-fill feature to their 2FA screen, but we still can make the usage even easier.
There are two things:
- Since the SMS User Consent API provides the whole SMS text and we only need a code from it, it’s a must-have function to parse the code from the SMS (
retrieveVerificationCodein the example). And instead of making our users implement it, we implement it for them and provide it as a util method so that they won’t have to bother with it. Users can pass a second argument that specifies the code length, which is 6 by default.
- Finally, having all the enhancements we made on native and JS parts, we can leverage code that users have to write to a single line. Since the usage is quite predictable and there is not much space for variability, we can abstract the entire boilerplate by implementing a React hook that controls everything and just provides the verification code once it is received. Actually, this is exactly what I was looking for when searching for a solution, because it’s the most convenient and easy way for a user. This is what
useSmsUserConsenthook is. It provides all the quite huge functionality we implemented in previous steps and compresses all the complexity into one simple React hook call:
const code = useSmsUserConsent();
And now, the package can be used in the following way:
Here is a simple diagram showing the flow:
Part 2 — How to Market
In this part, we will examine how the solution was prepared and published as an NPM package. This can also be treated as a general guide for how to create a React Native NPM package.
Step 1 — Create a Dummy React Native Package
For this, we can use either react-native-builder-bob or create-react-native-module as stated in React Native docs. For this project, I used “create-react-native-module” and followed its “Example module with no view” guide. It worked just fine, except for one thing. After generating the package and trying to install it to the test app, I encountered an issue that caused the app to crash. Using the
--example-file-linkage param while generating the package resolved the issue.
So, “create-react-native-module” generated a minimal package that can already be uploaded to NPM and used. It added all the necessary files, including
package.json, Android build config and dummy implementation files on native and JS side.
Step 2 — Add the Implementation
“create-react-native-module” builder created basic native files in the
android/src/main/java/com/akvelon/reactnativesmsuserconsent directory for us. This is where we put our Android-side implementation that we covered in Part 1 of this article. Make sure that for every file in this directory, you specified the correct package name that matches the folder structure, like:
I recommend editing files in Android Studio so that you can see all the warnings it provides and fix them.
Once we added the native files, we should add the React side files.
index.js is the entry point, so we add js files based on it. One more thing is to make sure we populated all the needed fields in
package.json. For details, please see package.json docs.
After we have added all the implementation files and populated meta-information, we can test the package by installing it to the example app. Considering that the example app is located in a folder inside our package, the command for installation is:
yarn install file:../
This is a good point of time to provide QA and make sure everything works when you use the installed package. Also, it’s a good idea to write an informative README file that describes how to use your package, its API, etc.
After that, the package is ready to publish.
Step 3 — Publication
Publication is the easiest thing in this tutorial, it consists of three simple steps:
- Register on NPM if you’re not registered already;
- From the terminal, run
npm loginand enter your NPM credentials;
npm publish —-access publiccommand from the root of your package.
To publish further versions, use the
npm version command and then run
Once the package is published, you can test it by installing the uploaded package from NPM. Also, it is a good idea to have its source code on GitHub, so that users could learn it, ask questions, open issues, make contributions, etc.
In this article, I tried to share my experience of creating a React Native SMS User Consent NPM package. I hope it helps people who are interested in learning more details about SMS code auto-fill implementation and publishing to NPM. And of course, I hope the package itself will help many developers who are looking for a solution to the SMS-code auto-fill problem.
Now I am in maintenance mode, looking forward to feedback, and ready to help or answer questions, which can be asked in comments section of the original article post.
At Akvelon Inc, we love working with cutting-edge technologies in mobile development, blockchain, big data, machine learning, artificial intelligence, computer vision, and many others. This article is the result of one of many projects developed in our Office Strategy Labs where we’re testing new technologies and approaches before delivering them to our clients.
If you would like to work with our strong Akvelon team — please see our open positions.
Written in collaboration with Nail Shakirov.
This article was written by Eldar Abdullazyanov, a Frontend and React Native Developer at Akvelon
PixelArt by Akvelon: Developing the Machine Learning Model
A closer look at how Akvelon developed their PixelArt Machine Learning Model that transforms photos into pixelated images. Read more here.
MeowTalk, The App that Gives your cat a voice with the help of AI and Machine Learning
Introducing Akvelon’s newest app, MeowTalk, which uses AI and Machine Learning to translate cats’ meows Read more here.