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.
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.
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
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.
You should receive the SMS with your OTP. We will be using this OTP to verify your phone number.
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.