How to Implement SMS Verification Codes Auto-Fill in React Native Android Apps

React Native SMS User Consent
React Native SMS User Consent

Problem overview

The Solution

Part 1 — Our Approach

How to Start

Step 1 — Setting Up the Module

Step 2 — Implementing the Native Android Part

  • 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 subscribe method 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 unsubscribe and only calling subscribe and so on. Also, it catches exceptions in these two methods making it even safer. Furthermore, resubscribe is 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

React Native SMS User Consent — native flow diagram
React Native SMS User Consent — native flow diagram
  • 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 NativeEventEmitter and NativeModules objects, handles them, and exports ReactNativeSmsUserConsent (the file containing native methods we exposed using @ReactMethod) and eventEmitter objects that are used by other files.
  • startSmsHandling.js. Another core file that imports ReactNativeSmsUserConsent from nativeApi.js and wraps its startNativeSmsListener and stopNativeSmsListener methods to use in JavaScript.

Step 4 — Implementing Convenience Methods

  1. 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 (retrieveVerificationCode in 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.
  2. 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 useSmsUserConsent hook 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();
React Native SMS User Consent flow diagram
React Native SMS User Consent flow diagram

Part 2 — How to Market

Step 1 — Create a Dummy React Native Package

Step 2 — Add the Implementation

Step 3 — Publication

  1. Register on NPM if you’re not registered already;
  2. From the terminal, run npm login and enter your NPM credentials;
  3. Run npm publish —-access public command from the root of your package.

What’s Next?

About us

Akvelon company official logo
Akvelon company official logo

--

--

--

Frontend & React Native developer at Akvelon, Inc.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introducing Learn Storybook

How to handle all Keyboard problems in React-Native with only 5 lines of code

How To Choose A Javascript Framework

SessionStorage and LocalStorage: A UX/Security Comparison

Monitor Websites with Cheerio and DataFire

Into The Vue (Part 1 Declarative Rendering)

Flow tips and tricks, part 1: mixed and any

6 Reasons Why To Use TypeScript

Credit image to: https://blog.voltathletics.com/home/2019/12/5/motivation-and-high-performance-athletes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eldar Abdullazyanov

Eldar Abdullazyanov

Frontend & React Native developer at Akvelon, Inc.

More from Medium

Hybrid Application: Native-like Experience with WebView

WebView

Start with GraphQL in baby steps for Android

Beginner: Integration of Huawei Mobile Services Account Kit in Banking app (kotlin)

Run Android Application On Emulator and Create a build — React Native