Hi, In this blog post, we will create firebase phone number authentication in javascript. We will send OTP to number and then verify that number using OTP. For this, we use firebase auth to send OTP which is a free service from google.

Create Project on Firebase

Let's create a free project on firebase with easy steps. Open firebase console, and click on "Add project". Give project a unique name and click continue. Disable Google Analytics and click "Create project". After taking some time, your project will be created and project screen will open. Click "Build" on the left side, a drop menu will open. Click on "Authentication" and then click on "Get Started". Click "Phone" from the available buttons and click enable button on the right side. Click save. Then click on the ⚙ symbol, available with "Project Overview" on the top of the left side. Then click on the "Project Settings" available on the popup box. Scroll to the bottom of the project and click on the </> symboled button. This button is used for creating a project app for the website.

Give your app a name and click on the optional checkbox that is used for setting up hosting for your app. You can skip this option. Then click next and after all click "Continue to console". Then again scroll down and now you have app setup and configuration. We just need configuration, so click "Config" button. Here, you have a configuration object will all keys and identifiers, which we need for number authentication. We have completed from firebase, so let's start coding.

Add Firebase SDK

Use the below CDNs to add firebase SDK to your project. First CDN for adding firebase app that can be used with each type of firebase operation. And the second one is for adding firebase authentication services.

Configure Firebase App in your Project

Now, we need configuration object that we have created before during creating firebase app. Copy the complete object by clicking copy button and paste in JS file as given below. Initialize the firebase app using that object.

Render Recaptcha Verifier

Now add a ReCaptcha Verifier in your project to verify a user. Use RecaptchaVerifier() method and provide the id of the HTML element which can contain ReCaptcha and render it using the render() method. This will show ReCaptcha to the user and handle the further processes all by itself.

Send OTP

Now we are going to send OTP to the given phone number. Phone number must be with the country code. Use signInWithPhoneNumber() method and provide the number and window.recaptchaVerifier that we already use, as a parameter. In then(), confirmationResult return a token that will use further to verify OTP. Catch() will return an error if occurred.

Verify OTP

Take the user input OTP from the input field and pass it to confirm() method of coderesult object. Coderesult has a token to verify the OTP. If OTP is correct, show a confirmation message in then(), otherwise, show error in the catch().

Final Thoughts

OTP is one of the best ways to authenticate a user using their phone numbers and can be used on any platform easily. Firebase provides this service for free with an easy integration process. You can watch the youtube video to be clear about the process. Get the source code below to get help.

Reference from Firebase Number Authentication Docs