Create a Reusable React Native OTP SMS component

Learn how to create a React Native component for SMS verification and make it reusable and shareable.

In this tutorial, we’ll learn how to create a React Native component for SMS verification and make it shareable using Bit. OTP SMS Verification is the process of verifying Mobile Number of users by sending verification code(OTP) during registration. This verification method checks the existence of the Mobile Number and if the user can access that Mobile Number.

Here, for the example of OTP SMS verification, we are going to create two screens: the first is phone input and the second one is OTP checking.

So, let’s get started with our tutorial:

What you’ll learn …?

• How to use Bit.
• How to use Bit along with React Native.
• How to use React navigation.
• How to use REST API.

Problem Statement

Nowadays, every app uses a 2-factor authentication where the first one is Email and the second factor is an SMS sent to your mobile phone. The problem may arise when we use just SMS i.e a text message as the only form of authentication. This can also lead to user’s account being comprised by an unknown party who can access all the user’s details saved in one’s account and even log into the account on your behalf, etc.

Requirements

Here’s a complete list of plugins, packages, and services we’re going to need to gain something from this tutorial:

• Nodejs v8.x.x or higher installed along with NPM/yarn.
• Android or iOS simulator or hardware device.
• A starter project.
• Bit and Ringcaptcha account (free tier).
• Ringcaptcha app_key and api_key.

Brief summary

Here, we have a summary of steps we are going to perform in order to implement OTP verification component in our React project:

• Creating react-native component following bit component guide.
• Making them work with RingCaptcha REST API.
• Share the component on Bit.

Creating react-native component

In this step, we need to first clone this Github repo and checkout to the mentioned branch. Then, we will have our starter project. You can following git command to clone the starter boilerplate project into your local directory:

git clone [https://github.com/krissnawat/pubnub-react-native-chat](https://github.com/krissnawat/pubnub-react-native-chat/)

And for checkout to starter branch, we are going to use the following command in our git console:

git checkout before\_use\_auth0

Now, we have our stater React Native boilerplate project as shown in the GitHub clone completion screenshot below:

Then, we need to install the packages in our package.json file and run ios simulator using the following commands:

[yarn](https://github.com/krissnawat/pubnub-react-native-chat/blob/before_use_auth0) //to install all the packages in out package.json file

[react-native run-ios](https://github.com/krissnawat/pubnub-react-native-chat/blob/before_use_auth0) //to run ios simulator

Next, we need to create a component named OTP and create the required files structure as shown in the screenshot below:

Then, we need to use PhoneInput.js file for implementing input for the phone number and OTPChecking.js file for checking OTP. Then, we need to use the index.js file for the component entry. Here, all three files that we need to work in this chapter are explained in detail below:

PhoneInput.js

In this file, firstly, we need to import all boilerplate classes and create a simple form to accept phone number and add some style to make the form look nice as shown in the code snippet below:

Then, reload the emulator where we can see the following result:

Next, we need to get the input value and assign it to the state variable as shown in the code snippet below:

Then, we need to create a function to handle the OTP request from RingCaptcha service. Here, we are going to use Rest API and is super easy to implement. The function implementation is shown in the code snippet below:

Here, we need to use the fetch method to send POST request and attach two required parameter phone_number and API key. Then, we need to display some notification and redirect to OTP check page and send phone_number as a parameter as shown in the code snippet above.

OTPChecking.js

In this step, we are going to implement OTP checking. For checking OTP, we need to copy the code from PhoneInput.js, paste it to OTPChecking.js file and then update it.

First, we need to update form and some style as shown in the code snippet below:

Then, we reload the emulator and see the following result:

Second, we need to update the function that is used for verifying OTP. The code for the function is available in the code snippet below:

Here, we receive a phone_number from parameter and OTP code from the user. After verification is successful, we need to redirect users to the main page.

Index.js

In this file, we are going to implement a component that will have all the screens and a navigation structure. Here, we implement the entry component and include all screen and attach it to the navigation stack as shown in the code snippet below.

Here, we need to import the component files we created previously as well as a createStackNavigator module from the react-navigation package. Then, we need to integrate the components into the navigator stack as shown in the code snippet above.

Finally, we need to import the OTP component in the App.js file and include it to StackNavigator as shown in the code snippet below:

Then, we need to update the redirect to the Login screen. Then, we need to refresh the emulator again and test if it works properly:

Hence, we can see that it works as expected.

In the next step, we need to make a component to publish on Bit.

Using .env on App

In this final step, we need to deal with the component structure and make it maintainable. The important thing is it’s API Key which we can’t expose credential to the internet but React native have a package which helps us do it. We need to install the react-native-dotenv package using the command available below:

npm install react-native-dotenv --save-dev

After, we install the package. We need to create a .env file and move all credential into the file. The example is shown below:

APP\_KEY=xxxxxxxxx
API\_KEY=xxxxxxxxx

Next, we need to import the package into our required file and use the credential variables from a .env file. The APP_KEY and API_KEY are imported from the package which we set previously.

import { APP\_KEY, API\_KEY } from "react-native-dotenv";

Then, we need to replace the coded variables with the variables imported from the package as shown in the code snippet below:

Then, we need to repeat the same process on OTPChecking.js file.

Now, we need to share our component to Bit.

Make it Reusable and Sharable with Bit

Share reusable code components as a team · Bit

To make our code reusable and shareable, we’ll do some restructuring and move all our code to ‘components’ (this is not mandatory but a better practice, when using Bit). Then, we’ll export it (with all its dependencies), to a component collection on Bit’s cloud, to be shared with others and easily reused.

In this step, we are going to push the new component i.e. OTP component to Bit. We already have our Bit package installed and connected to our Bit account. So, we need to create a collection and start by tracking the component.

Note: The first and second step features an installation of Bit account. These steps can be skipped if you already have a Bit account.

1. Create a collection and initialize Bit on a project

Here, we create a new collection on Bit to which we are going to push all our component code. We use the Bit “create collection” configuration page to create a new collection named “my-react-native-collection” as shown in the screenshot below:

To successfully push the whole project to Bit, you need to follow the instructions given on the page shown below:

First, we need to install Bit CLI

Using NPM,

npm install bit-bin --global

Then, we need to go to the project directory in our Bit CLI and perform the commands bit init and run bit login on Bit CLI as shown in the screenshot below:

2. Configure a React compiler for our component

When we configure a compiler we tell Bit to capsule the component with it. Capsuling components together with their compilers gives us the freedom to use, build and test them anywhere. This includes being able to run the code in any of the applications we’d like to use the component in, as well as running it in the cloud to enable features such as the live component playground.

bit import bit.envs/compilers/react --compiler

3. Track components

We need to track our component by using the following command in your command prompt or Bit console:

bit add src/components/OTP

The result after the command is performed is shown below in the screenshot:

4. Tag and export to our collection on Bit’s cloud

Here, we are going to set a version to all tracked components, and export to this collection using following bit command:

bit tag --all 1.0.0

Finally, we need to perform following bit command to push our component code to bit collection that we created before:

bit export krissnawat.my-react-native-collection

Now, our package is live on Bit. It is our first component in our react-native collection as shown in the screenshot below:

Lastly, we need to replace the component in our _App.js _file.

But first, we need to install our component from Bit registry by using the following command:

npm i @bit/krissnawat.my-react-native-collection.otp

Then, we need to replace the code on App.js as shown in the code snippet below:

Finally, the implementation of a simple OTP component with RingCaptcha and uploading the component to Bit is complete. Now, we can run the project locally to test everything.

Conclusion

In this tutorial, we learned how to implement React Native OTP component. We got detailed guidance on the implementation of OTP component with RingCaptcha. Finally, we were successful in pushing our React Native OTP SMS verification component to Bit. In the next chapter, we are going to continue adding more packages and components to our collection. See you soon!!

Resource

• Docs
• Bit for React - Bit

Learn More

• How to Build and Share a Component Library
• How to Find and Use Components from bit.dev to Build Your App
• How Much Does It Cost to Develop a React Native Mobile App?