Authentication using Phone Number

Onboarding your users using the phone number

Read the articles

Today we will authenticate the user using a phone number. After login via Google, I found authentication via OTP is the simplest and easy to onboard process.

We will be using the repository which we have used for adding Twitter authentication using Firebase and will continue to add the phone number authentication using the Firebase in the same repository.

Twitter authentication repository => Repo

Overview

1. Enable sign-in-method in the Firebase authentication console
2. Add your phone number in the sing-in-method section
3. Enable Firebase Recaptcha verifier to prevent abuse of the authentication process.
4. Send Verification Code to a user phone number using firebase providers.
5. Authenticate the verification code sent to the user and one user entered.

Enable Recaptcha verifier

Firebase provides a method to enable the re-captcha verifier. We will be using the invisible Recaptcha verifier method of Firebase. You can read more here =>

https://firebase.google.com/docs/auth/web/phone-auth?authuser=0

Enabling reCaptcha verifier is quite easy, you can call the firebase enabling Recaptcha function when components get mounted or probably in useEffect hooks provided by react. You can copy-paste the code from the above link.

PhoneNumber.jsx in module

The Process should go like the user should enter his/her phone number followed by sending the Verification code to the user’s entered phone number via Firebase API and then ask the user to submit his/her verification code and the last step before authenticating user is to check his/her entered verification code using Firebase methods. For a user to enter his/her phone number, I am using a react phone input package.

NPM package => https://www.npmjs.com/package/react-phone-input-2

This package simple provide phone number input with the additional functionality of selecting the country user is based from.It's quite easy to integrate and handle.

One important thing if you using this package: add the react-phone-input-2 CSS inside _app.js file of your pages folder.

Sending Code

Firebase provides the signInWithPhone method which accepts the user phone number and reCaptcha verifier. This method helps to confirm the reCaptcha and user phone number followed by sending the code to the corresponding phone number.

firebase.auth().signInWithPhoneNumber(phoneValue, appVerifier)  .then((confirmationResult) => {
    window.confirmationResult = confirmationResult;
}).catch(error => console.log(error));

Sending code to the user-entered phone number

Authenticating the Code

The last step is to cross the code entered by the user and the code sent to the user.

Checking the Code Send to user

The confirmationResult we set to window object is used to confirm the code and when entered code is correct firebase sent you the user object in response.

User object in the console after entering correct code

Firebase also provides the error object in case the user entered the invalid code or wrong code.

Error in console when the user entered the wrong code

Conclusion

Firebase provided the easiest way to onboard the user. You can check the methods of signing in the user under the Authentication -> sign-in-method tab. I have already covered 5 ways to authenticate your user. Stay tuned as I will be covering all the methods to Sing-in your users.

Until next time. Have a good day!

Code Repository => https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/PhoneNumberAuthentication