Using Firebase Phone number Auth with react-native

Question

With the newly released Firebase Phone number Auth, I was wondering if it is possible to use it using the firebase JS SDK within react native. If so how?

Answer 1

For better user experience refer to this repo https://github.com/boudlal/react-native-firebase-phone-auth and i would suggest making some changes so that the user doesn't have to complete any challenges or click i am not a robot

1. In Captcha.html file change the size to invisible so that token is generated in the background

    var captcha = new firebase.auth.RecaptchaVerifier("captcha", {
          size: "normal",
          callback: function (token) {
            callback(token);
          },
          "expired-callback": function () {
            callback("");
          },
        });

2. The Captcha.html will be needed to be deployed to a server and is called via url in react-native-webview
3. Style and remove unwanted text also make webview transparent by simply

style={{backgroundColor:'transparent'}}

4. Copy firebase config corresponding to your firebase project in the project and Captcha.html

Answer 2

Unfortunately, phone authentication does not work out of the box with react-native. Currently, what you can do is the following: Prerequisite, Firebase Phone auth for web depends on an app verifier interface: https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier

You can provide your own implementation for with the verify() method resolving with a reCAPTCHA token. Here is how you can do it:

1. User initiates phone number sign-in in your app.
2. You will need to open a chrome custom tab or SFSafariViewController and redirect to a website you own which you whitelisted. You then render a firebase.auth.RecaptchaVerifier instance. You ask the user to solve the reCAPTCHA. You may also use an invisible reCAPTCHA which may not require any challenge to be presented to a user.
3. You then pass the reCAPTCHA response token back to your app using FDL (Firebase Dynamic Links). This guarantees that only your app can open it.
4. You will then provide your own implementation of the ApplicationVerifier interface which on verify() returns a promise that resolves with the reCAPTCHA token. You can now call signInWithPhoneNumber successfully in your react native app.

It requires some work but it is possible. Feel free to file a request for dedicated react native support in the Firebase Google Group forum.

Answer 3

We (react-native-firebase team) are actually working on this at the moment, see this issue: https://github.com/invertase/react-native-firebase/issues/119

Edit: this is now live and available in v3.0.0 onwards :)

Answer 4

You can check this example of using firebase phone auth in react-native

react-native-firebase-phone-auth