There'll come a time where you will need your app users to validate their phone number when performing certain tasks on your app. The most common solution is to subscribe to a SMS service provider, and build your own SMS verification system. There is so much that needs to be done for the sake of just verifying a phone number! Alternatively, you could use Firebase's Phone Authentication offering which allows you to login into your app by sending a verification code to your phone via SMS, for FREE*

*free - first 10k verifications/month.

But wait! I don't want to log into my app with Firebase Phone Authentication. I just want to verify my users phone number! I already have a login system in place!

What if I told you that you can in fact use Firebase Phone Authentication as a phone number verification service! The Firebase Phone Authentication documentation only guides you how to setup phone auth on the client side,but not using it as a phone verification mechanism.

Heres how you can in fact use it on the backend!!

You won't be able to use the Firebase SDKs on the backend though, but there is still a glimmer of hope to get it working!

The Firebase client SDK utilizes the Google Identity Toolkit API, which you can simply call via REST, or you can use the Google API Client libraries of your choice.

Let's go through how to get started.

1. Enable Phone Authentication in Firebase Console

If you don't have a Firebase project, create one here. Go to Authentication, Sign-in method, and enable Phone under sign in providers. On the same page, if the domain that will host your app isn't listed in the OAuth redirect domains section, add your domain.

2. Generate reCAPTCHA verifier on client side

In order to use the API, you are required to generate a reCAPTCHA token which needs to be passed to the API to avoid abuse. In order to regenerate a reCAPTCHA token you would need to have the reCAPTCHA widget in place. If you are starting to think of all the hassle you need to go through to setup a reCAPTCHA, fret not! The Firebase Client SDK automatically creates and handles any necessary client keys and secrets via RecaptchaVerifier.

Don't forget to include the Firebase Client SDK in your client app.

With recapchaVerfier, you can choose to either show or use the invisible reCapcha:

None
left: visible reCAPTCHA, right: invisible reCAPTCHA

For this article, we will just use the invisible reCAPTCHA instead:

The RecaptchaVerifier's callback method gets invoked when the sendCode button is clicked. The callback sends the recapcha token as parameter.

3. Send the SMS with Identity Toolkit API

Once we have the recaptcha token, we can start to call Google's Identity Toolkit API to send the SMS. In this example I will be using the Google API Node.js Client Library. If the client is not in the flavor of your choice, simply issue a REST call to the approprate endpoint.

Install the Client Library in your backend node app:

$ npm install googleapis

In order to proceed further, you will need to get the Server Key from Google Cloud Platform to access the API.

Obtaining Server API Key

Go to Google Cloud Platform Console, and select your project from the list. Your Firebase project should be listed in the Google Cloud Platform because Firebase is part of the Google Cloud Platform. Once you are in your project, click on the APIs & Services in the side menu.

None

Click on Credentials and you should see the API keys. Copy the server key and keep it somewhere safe in your backend environment.

WARNING: This key can be used to access all Google APIs that support the API key. Please read how to keep your API keys secure.

None

After you have your API key, plug it into the identitytoolkit to start using it.

In your backend application, call identityToolkit.relyingparty.sendVerificationCode with the phoneNumber and the recaptcha token.

You can also do this via a simple API call:

curl -X POST \
  'https://www.googleapis.com/identitytoolkit/v3/relyingparty/sendVerificationCode?key=api_key' \
  -H 'content-type: application/json' \
  -d '{
 "phoneNumber": "phone_number_to_verify",
 "recaptchaToken": "generated_recaptcha_token"
}'

If succesful, you should get a response with sessionInfo andd receive an SMS. Make sure to save the sessionInfo on your backend database so that we can verify the number received.

{
    "sessionInfo": "session_info_token"
}
None

4. Verifying the code

Verifying the code is pretty much straight forward. All you need to do is to use the sessionInfo that was saved into your database and the verification code the user will send from the client side, and plug it into identityToolkit.relyingparty.verifyPhoneNumber.

You can also do so by calling the API:

curl -X POST \
  'https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPhoneNumber?key=api_key' \
  -H 'content-type: application/json' \
  -d '{
  "sessionInfo": "session_token",
  "code":"sms_code"
}'

🙌 Thats it! You're all done! 🙌

If everything goes to plan, the verification code should be accepted by the API, and you can go on your merry way.

There's a few caveats though:

  1. The SMS sent CANNOT be customized. At the time of writing, it will always follow this format:
verification_code is your verification code for domain_name.

If your reCHAPCHA has an authorized domain www.my-awesome-app.com, it will show the following

00000 is your verification code for www.my-awesome-app.com

If this isn't ideal for you, its best to find another provider that allows you to customize this message

2. reCAPTCHA via the Firebase Client SDK is required in order for this to work. Although having reCAPTCHA prevents spamming, if your client app somehow is not able to use reCAPTCHa, then you would have to look somewhere else.

3. Invisible reCAPTCHA != no reCAPTCHA. Its pretty cool that you can setup invisible reCAPTCHAs, but the invisible reCAPTCHAs will trigger the challenge sometimes if suspicious activity is detected. So do expect that your UI may show the challenge from time to time :

None
le random challege appears!