Creating Phone Number Verification Component Using React.JS and Twilio Services.

Step by step guide to creating a phone verification component with React.JS and Twilio Services.

Introduction

Phone number verification is required for phone sign-in or Two Factor Authentication (2FA). Twilio provides phone verification services, which we will be using with NodeJS backend with express and React.JS for the front-end web interface.

Requirements

• NodeJS and NPM
• create-react-app for quick React.JS project setup
• A free Twilio account (can be set up at a later stage)
• A code editor such as Visual Studio Code or Atom
• Postman

React.JS setup

For the front-end, a new React.JS project needed. We will be using create-react-app for this.

• Create a new project by typing the following command in the terminal window inside your working directory.

create-react-app demoproject

• Change to project directory and open your code editor.

Since we are focused on only one screen we will be doing all of our code in a single file, App.js

UI

For the UI, I will be using Material-UI. Using Material-UI is optional and similar results can be achieved with basic JSX and CSS.

In case you already have a premade front-end you can go directly to the back-end part.

Install the required packages

npm install @material-ui/core @material-ui/icons

After installation you can directly use these libraries in your App.js and design your front-end. It should look something like this.

And the Otp.js component file should look something like this.

Backend Setup

mkdir demoproject-back

Open a terminal window in the new directory and create package.json by running the following command.

npm init

Install the following npm packages.

npm install express cors twilio dotenv

Install nodemon for backend auto-start.

npm install -g nodemon

Backend

Add a start script under scripts and change main to server.js inside package.json

Your package.json should look something like this,

Next server.js

create a server.js in the same directory (as package.json). Inside server.js we will be importing dotenv package to use .env and start the back-end service.

Next app.js

create a app.js in the same directory. Inside app.js we will be importing routes for verification.

Next we will be creating route for our Twilio verify service

Create a new directory routes and verify.js inside routes directory.

Your routes/verify.js should look like this

Next we will be creating verify controller. Create a new directory controllers and verifyController.js inside controllers directory.

Inside verifyController.js we will be importing twilio package and will be using its verify service. Your verifyController.js should look like this.

Finally we will create a .env file in the project directory to store all our environment constants.

To get the Account SID and Auth Token login to your Twilio account and on your Dashboard you will see your Account SID and Auth Token.

Twilio Dashboard

To get the Verify Service SID got to Verify service under All products and services. Create a new service and give it your project’s name. Select your service and copy the Service SID.

Twilio Verify Service

Copy your Account SID, Auth Token and Verify Service SID in your .env file.

Run your backend server by running this command in terminal inside of your project directory.

npm start

Terminal window on running the backend

Twilio takes phone number in E. 164 format and you have to add your country code before your phone number. For example, if the user is from India the country code is +91 so the number which is passed to the request should start with the country code, like this, 91–123–456–7890.

Postman get request to http://localhost:8000/verify/getcode

You should receive the SMS with your OTP. We will be using this OTP to verify your phone number.

Postman get request to http://localhost:8000/verify/verifycode

With the testing complete our back-end is ready.

Wiring it Up

With the back-end ready we need to connect it to the front-end.

To connect it to the front-end we will be using axios library(you can also use fetch). Axios is used to make get or post request to backend service.

Install axios in your front-end project directory by using the following command.

npm install axios

Import axios in your App.js and make functions to make requests to your back-end server. Call these functions on verify button click.

App.js should finally look like this.

With this, you have wired your front-end to the back-end.

Wrapping Up

Your Phone Number Verification component is ready. Run your front-end React server and the back-end NodeJS server and test out your system. Congrats you have reached the end of this story. Now you can use this system in any of your future projects. ✌

This story was written with MERN stack in mind so you can plug the NodeJS back-end with any other backend service and front-end can also be reused.

If there are any issues or suggestions regarding the story. Do leave a note and I will address them.

Edit: Somebody pointed out that I have not included the Otp.js component file. Which I have now included.