this stories is the third part of series Clone FireBase web-ui with React and Bit here the list of previous part First part: Building a Reusable Firebase Facebook Login Component

Second part: Building a Reusable React Login Component

In this chapter, we will continue with our FireBaseWeb-UI clone in React series and integrate Phone Authentication with OTP into it. In order to understand this tutorial properly, it is recommended to go through previous chapters of this tutorial series. Here, we are going to implement the Phone authentication component with React and FirebaseWeb-UI and push the code to Bit’s cloud where it could be shared, discovered and used by others or even collaborated on.

Share components in bit.dev so you can easily reuse them across projects

So, let us begin!

What you’ll learn …?

How to use Bit.

How to use Bit along with React.

How to use React router DOM (Document Object Model).

How to use Firebase phone authentication.

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.

or higher installed along with NPM/yarn. VScode or your favorite IDE.

Bit and Firebase account (free tier).

React starter boilerplate project using create-react-app command.

Brief summary

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

Creating React component following bit component guide.

Implement React router DOM for simple navigation.

Share the component on Bit.

Import component from Bit and add new feature, i.e. re-send SMS then push the component back to Bit.

Creating React component

Firstly, we need to create a new component in src/components/PhoneAuth. Then, we need to add App.css CSS file that we got from the previous part of this tutorial series. Next, we need to create three files, an index.js for an entry point, InputPhone.jsx to handle phone number configurations and PhoneButton.jsx to display a phone button that will have the function to navigate to InputPhone component. The overall structure of directory files is shown below:

Activate Firebase Phone Authentication

Here, we need to go to the firebase console, Then, navigate to > authentication > authentication method then activate Phone authentication as shown in the console screenshot below:

Now, we can use Phone authentication with Firebase.

Working on component

In this step, we are going to start working on our Authentication component.

Setup react-router-dom

Here, we need to set up the react-router-dom in order to navigate to different files. We are going to use index.js file for the entry point. Then, we register a route to make navigation between PhoneButton to InputPhone components.

Firstly, we need to install react-router-dom package using the command given below:

npm install react-router-dom

Then, we need to activate react-router-dom package eat the main root index.js by importing BrowserRouter component from the react-router-dom package as shown in the code snippet below:

Here, we are importing BrowserRouter component and wrapping the App component using it.

Then, we need to copy the code below and paste to src/components/PhoneAuth/index.js.

Here, we are importing Switch and Route component from the react-router-dom package.

Route component is used to define URL location and Switch component is used as a wrapper to Route component.

Then, we need to define a route for our two-components that we created before, which are PhoneButton and InputPhone components.

For the index route, we are using PhoneButton component.

For the input_phone route, we are using InputPhone component.

Now, we can navigate between these two components.

PhoneButtton.jsx

In PhoneButton.jsx file, we are going to implement a phone button. Then, we are going to use this component to display the phone button and navigate to InputPhone component.

To implement this, we need to open PhoneButton.jsx file and paste the code in the code snippet below:

Here, we are using Link component from react-router-dom in order to create a link to InputPhone Component.

Then, we import our component to App.js file and implement it to render() function as shown in the code snippet below:

Now, we need to start the server to see the result screen. After starting the server, we will see the following result in our screen:

InputPhone.jsx

Our main work to be done is in InputPhone component. We are going to use this component to handle sending SMS and verify OTP. For this, we need to open src/components/PhoneAuth/PhoneInput.jsx and paste the code given in the code snippet below:

Here, the code given in the code snippet above is used to construct a form and initialize firebase in our project.

Now, If we restart the server and test the screen buttons, we will get the following result:

Here, when we click on Sign in with phone button, we will get a form and verify button to verify with firebase.

Getting Form Value

In this step, we need to get the form values and set it to the internal state variables.

Here, we need to create an internal state named phone_number then attach it to Input field with this.state.value to set the value of the state.

Then, we need to create a new function named handlePhoneChange() in order to get value from the input field and when onChange event is fired we set a new value to the state variable.

Send SMS with Firebase

Next, we are going to implement ‘send SMS’ feature with firebase. Here, before implementing send SMS feature, we have a requirement to install Recaptcha firebase to prevent fraud and spam on their service.

For this, we need to create componentDidmount and paste the code given in the code snippet below:

Here, we need to set up CSS id named Recaptcha-container to place Recaptcha and define size, callback function with success and error. Then, we need to render on target and last assign object to window object that makes it global, and we can use the object across the function.

Then, we need to place a new div element to the location that we want to render Recaptcha:

<div id="recaptcha-container" />

As a result, our form will appear as shown in the emulator simulation below:

For better functioning, we need to disable VERIFY button until Recaptcha is verified successfully. We can do this using the following code:

Here, we need to create a new state named isButtonDisabled and toggle the state with Recaptcha callback. Then, we need to place the isButtonDisabled state at the button in the disabled event as shown in the code snippet below:

As a result, the VERIFY button remains disabled until the Recaptcha is verified as shown in the emulator simulation below:

Now, we have the Recaptcha that we required for the firebase.

Next, we need to implement Phone authentication.

For this, first, we need to create a new function named handleLogin() as shown in the code snippet below:

Here, we need to grab the Recaptcha object and call signInWithPhoneNumber then pass two required parameter phone_number and ReCaptcha object i.e. appVerifier . On success, we need to print result i.e. conformationResult .

Submit form

Next, we need to implement the functionality to submit the form. But the problem is that the page reloads after we hit the submit button and submit the form. To prevent the form reload, we add function name handleSubmit() and add the function to <form> element wrapping the button we implemented before. The code for this is given in the code snippet below: