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?
1
-
You could not use the JS SDK and instead build your wrappers around the native (iOS/Android/etc) SDKs.eneskaya– eneskaya2017-05-29 09:33:28 +00:00Commented May 29, 2017 at 9:33
Add a comment
|
4 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 :)
1 Comment
Eugene
Really excited to see this in the works! Do you think you could give an estimate as to when this feature would get released?
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:
- User initiates phone number sign-in in your app.
- 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.
- 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.
- 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.
1 Comment
vk.edward.li
Thanks for the complete flow, I can confirm this is working, but the user experience isn't good enough... If the page only contains the reCAPTCHA widget, the challenge appears too often since the first user interaction is a single tap on the reCAPTCHA
You can check this example of using firebase phone auth in react-native
Comments
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
- 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("");
},
});
- The Captcha.html will be needed to be deployed to a server and is called via url in react-native-webview
- Style and remove unwanted text also make webview transparent by simply
style={{backgroundColor:'transparent'}}
- Copy firebase config corresponding to your firebase project in the project and Captcha.html
