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:
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.
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.
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"
}
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:
- 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 :