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

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.