How to authenticate phone number using firebase in ReactJS ?

User authentication is a critical aspect of many web applications, and phone number authentication has become increasingly popular for its convenience and security. Firebase, a powerful platform developed by Google, offers various authentication methods, including phone number authentication.

Prerequisites

• React JS
• Firebase

Approach

To authenticate phone numbers using Firebase in React JS we will install the Firebase module and configure the credentials. Create a login form component that accepts the phone number and authenticate it using the Firebase.

Steps to create React Application

Step 1: Create a React myapp using the following command:

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command:

cd myapp

Project Structure:

👁 Image

Step 3: After creating the ReactJS application, Install the firebase module using the following command:

npm i --save firebase@8.3.1 react-firebase-hooks

Dependencies list after installing packages

{
 "dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "firebase": "^8.3.1",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-firebase-hooks": "^5.1.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
 }
}

Step 4: Go to your firebase dashboard and create a new project and copy your credentials.

const firebaseConfig = {
 apiKey: "your api key",
 authDomain: "your credentials",
 projectId: "your credentials",
 storageBucket: "your credentials",
 messagingSenderId: "your credentials",
 appId: "your credentials"
};

Example: It shows alogin form acception number input to authenticate using the firebase by sending an OTP.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

👁 Image