How To Add Firebase Phone number Authentication in Expo ( React native ) (Updated with SDK 36 )

Thareek Anvar M
2 min readFeb 2, 2019

--

Hi Friends I am a small developer just like a newbie . Once i was searched for the firebase phone authentication in expo .i didnt get any positive response from any site blogs and any where.. i always here its not possible in expo ..

firebase authentications

After a long time i found a small solution . which is use with a fake firebase captcha with a html page .. that html page will retrieve the token which we want use in app to get the sms code from the firebase .

Here u can see the codes which is works for me and i think its will works for you also..

  1. We have special static “Captcha” web page, hosted on domain, that authorized on our Firebase project. It simply shows firebase.auth.RecaptchaVerifier. User resolves captcha and it gives token string from response of callback.
  2. On application login screen we show WebBrowser with "Captcha" page and listening url change event by Linking methods. On new url, we extract token string from it.
  3. Then we create fake firebase.auth.ApplicationVerifier object with token and pass it to firebase.auth().signInWithPhoneNumber (with phone number). SMS code will be sent.

I wrote tested simplest code below. You can directly “copy-paste” it. Just add firebase config (this config must be same for both) and set correct “Captcha” page url. Don’t forget that phone must be entered in international format. In this code “Captcha” page hosted on firebase hosting, so it automatically initializing by including init.js and authorized by default.

“Captcha” page (hosted on firebase hosting):

Here The Above Link is That Html page u dont need to change anything ..

Auth screen in expo project:

1.Go to " ./authentication/Loginscreen " Edit captchaUrl with Your Hosted URL2.Go to " App.js " Change Your Firebase Config3.Here You Must Enter The Number is in international format eg: if indian Number then type " +91xxxxxxxxxx "

I dont know how to add codes here properly that’s why i choose the Github Link . There You can get the full example of this so You can made app with this firebase Phone number authentication in Expo..

Example :

https://i.imgur.com/HeRMohw.gif

If You Have any doubt you can ask me simply i will help You…

Full Example in GitHub Below Link :

--

--

Responses (12)