Firebase SMS auth intergration?

Hi, has anyone been able to integrate Firebase SMS with their app? Since Twilio SMS pricing is expensive in my country, 0.05 USD per message would add the bill very quickly for login and sign-up purposes.

I wish to use firebase for SMS auth as it provides 10k SMS per month. But I couldn’t find any plugins or videos about it. Has anyone successfully integrate the firebase SMS to their app and wish to show how it’s done or even making a plugin both free or paid available for bubble users?

Thanks!

3 Likes

Following

Thanks @warformstudios for bring this to daylight.

This is very interesting. I have been searching for this kind of feature for my web app for ages.

Can agree with your that the cost of SMS is very expensive in most country.

So far had found the following articles regarding such implementation but solely for phone number authentication but of course a little bit of hacks can help to achieve what you required:-
[1] Verifying Phone Numbers with Firebase Phone Authentication on Your Backend for FREE* | by Lim Shang Yi | Google Developers Experts | Medium

[2] How can I validate google reCAPTCHA v2 using javascript/jQuery? - Stack Overflow

[3] Method: getRecaptchaParams  |  Identity Platform Documentation

Trying to cook out something from it but I am not programmer/ coder so best of luck to me :sweat_smile:

It’s very convenient in node js platform but nowhere in bubble world :sob:

Here it goes to integrate Firebase Phone Number authentication via SMS using some codes and REST APIs.

Before proceeds please enable phone authentication in Firebase console. More information please read the following:-
[1] Authenticate with Firebase with a Phone Number Using JavaScript
[2] Verifying Phone Numbers with Firebase Phone Authentication on Your Backend for FREE* | by Lim Shang Yi | Google Developers Experts | Medium

The 3-steps are:-
[1] Obtain RecaptchaToken
[2] Obtain Session Code
[3] Verified SMS 6-digit code

[1] Get Recaptcha Token
You need to generate a Recaptcha Token. To do that you need a Recaptcha SiteKey.

To get the Recaptcha Sitekey use the following REST API:-
GET https://identitytoolkit.googleapis.com/v1/recaptchaParams?key=[YOUR_API_KEY]

Read more at Method: getRecaptchaParams  |  Identity Platform Documentation

The copy the following code into HTML element:-

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<div class="g-recaptcha"
      data-sitekey="Put the Recaptcha SiteKey obtain from [1] here using Insert Dynamic Data"
      data-callback="recaptchaToken"
      data-size="invisible"> // I am using invisible Recaptcha here
</div>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction); // myBtn puts in ID attribute of a Button Element

function myFunction() {
  grecaptcha.execute();
}

var recaptchaToken = function(response) {
        console.log(response);

// I am using Backend WF to get the Recaptcha Token and the mobile number and save to DB. You can use other method such as Javascript to Bubble element from Toolbox plugin.
fetch('**Put Your REST API here**', {
        method: 'POST',
    	headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
        token: response,
        mobileno : document.getElementById('mobileNo').value // mobileNo puts in ID attribute of an Input Element
        
    }),
})
    
    if (recaptchaToken == "" || recaptchaToken == undefined || recaptchaToken.length == 0)
         {
          console.log("You can't leave Captcha Code empty");
          return false;
         }
       grecaptcha.reset();
       console.log("Captcha completed");
       return true;     
};
</script>

[2] Obtain Session Code

Next is to obtain the Session Code using the following REST API:-
POST https://identitytoolkit.googleapis.com/v1/accounts:sendVerificationCode?key=[YOUR_API_KEY]

Your will need 2 parameters

  1. phoneNumber
  2. recaptchaToken

Read more at Method: accounts.sendVerificationCode

I saved the response i.e. the Session Code in the DB corresponding to phone number and Recaptcha Code.

A 6-digit SMS code will be sent to the mobile number.

[3] Verified SMS 6-digit code

Next to verifiy the 6-digit code received via SMS use the following REST API:-
POST https://identitytoolkit.googleapis.com/v1/accounts:signInWithPhoneNumber?key=[YOUR_API_KEY]

Your will need 2 parameters

  1. sessionInfo
  2. code

Read more at Method: accounts.signInWithPhoneNumber

This is what I had achieved so far. Is this it? Don’t know. But I found out you can use Firebase Phone Authentication or even Google Cloud Platform IAM Phone Authentication. The free tier the same and pricing after free tier also the same but Google Cloud Platform IAM Phone Authentication seem like to have free 50K MAU - no sure of the impact and it seems the SMS response can be edited (haven’t try) compare to fixed response for Firebase.

8 Likes

Thanks for the detailed solution!

hopefully, it would help more people to get free SMS functions for their apps.

@NoCodeWan
Thanks for the info but i am stuck @ first part [1]

I added the API but during call i get this

So if the API is showing error how can I enter its value in HTML
API is not being saved because its getting error !!

Thanks,

Have you done the following:-

Before proceeds please enable phone authentication in Firebase console. More information please read the following:-
[1] Authenticate with Firebase with a Phone Number Using JavaScript
[2] Verifying Phone Numbers with Firebase Phone Authentication on Your Backend for FREE* | by Lim Shang Yi | Google Developers Experts | Medium

Most important there is snippt of code you need to get from Firebase console when you created web project. I put the snippet of code in Setting>SEO/Mettags>Script in the body. Example is shown below:-

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.4/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.6.4/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

Give it a try.

Hey! If you need help setting up a Firebase login, send a DM. I can help you out here!

2 Likes

Thanks for the detailed answer!

Although I am a little confused on Step 1. I am assuming the API calls are made via the API Connector plugin?
So, I am getting a response for the API call that contains a “kind”, "recaptchaStoken"and a “recaptchaSiteKey”.

Then I stuck that in “data-sitekey”, but I am list after that. A couple of questions I have on my mind are -

  1. What are the backend workflows?
  2. What to put in ‘Put Your REST API here’?

Thanks in advance. Would be really great if there is a demo app.

Hi! I am stuck in Step 1 – Not able to get the reCaptcha Token. I have configured the other steps in the API Connector though. If you can record a video that will be great.

Thanks

What would be the values for these?

and how do you this action? -

its been like a week since i go trough forum and this is the closest ive been, but still its not quit beginer friendly :smiley: Any help would be appreciated much!!!

I am getting this. Any advice?
image