Authentication using Phone Number
Onboarding your users using the phone number
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 => RepoOverview
- Enable sign-in-method in the Firebase authentication console
- Add your phone number in the sing-in-method section
- Enable Firebase Recaptcha verifier to prevent abuse of the authentication process.
- Send Verification Code to a user phone number using firebase providers.
- 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=0Enabling 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.
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-2This 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));
Authenticating the Code
The last step is to cross the code entered by the user and the code sent to the 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.
Firebase also provides the error object in case the user entered the invalid code or 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
