Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Firebase Phone number Auth with react-native

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?

like image 390
jasan Avatar asked May 18 '17 06:05

jasan


People also ask

How do I add my phone number to Firebase authentication?

In the Firebase console, open the Authentication section. In the Sign in method tab, enable the Phone provider if you haven't already. Open the Phone numbers for testing accordion menu. Provide the phone number you want to test, for example: +1 650-555-3434.

How do I use Firebase authentication with React Native app?

Email/Password sign-in Ensure the "Email/Password" sign-in provider is enabled on the Firebase Console. The createUserWithEmailAndPassword performs two operations; first creating the user if they do not already exist, and then signing them in. import auth from '@react-native-firebase/auth'; auth() .


3 Answers

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 :)

like image 181
Salakar Avatar answered Oct 19 '22 10:10

Salakar


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.

like image 10
bojeil Avatar answered Oct 19 '22 09:10

bojeil


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

react-native-firebase-phone-auth

like image 1
boudlal Avatar answered Oct 19 '22 10:10

boudlal