Phone Auth is not working on Ionic/Cordova App

phyr0s commented 7 years ago

I want to use fireBase auth in my hybrid app but.. I can't use.

When I run in a real phone all times I get one Message "Recaptcha Verifier is only supported in a browser HTTP/HTTPS environment

The popUp to introduce de phone number never fires. Any help to fix that ¿?

¿Any cordova fireBase auth plugin with phone validator?

I'm trying to migrate DIGITS to FIREBASE because google buy it but ....... I can't Really need help in that

Thanks

bojeil-google commented 7 years ago

Please check this post for guidance on supporting phone authentication in an Ionic/Cordova environment. Currently this is not available in FirebaseUI and the Firebase core: http://stackoverflow.com/questions/44081040/ionic2-authentication-firebase

phyr0s commented 7 years ago

Any plans in that feature? I think that is a must have in firebase.

grrrian commented 7 years ago

We are also looking to add Firebase Phone Auth in our Cordova app.

Digits sign in was our unique Auth method for our Cordova app. It is now being retired and we must move to Firebase Phone Auth before Sep. 30th.

The suggested workaround seems like a confusing user experience.

Do you plan on supporting Phone Auth on Cordova? If so, what is the timeline?

jaufgang commented 7 years ago

My team has an Ionic app that was using Digits authentication which was working perfectly. We have followed the instructions and ported over to Firebase Phone Auth and now authentication is broken due to this reCAPTCHA issue. The documentation has no mention of any lack of support in Ionic/Cordova or warning that this will happen. This is incredibly frustrating.

Will Firebase release a new version of the Cordova Firebase Plugin that supports phone authentication before Digits is retired? Or are you planning on retiring Digits without providing a solution for Cordova/Ionic developers?

guyromb commented 7 years ago

@jaufgang if you implement it natively it's possible to skip the reCAPTCHA. check this https://github.com/guyromb/cordova-firebase-phoneauth/issues/1 and this https://stackoverflow.com/a/44260571/2478215

bojeil-google commented 7 years ago

We apologize for not clearly documenting this. We are looking into supporting Cordova/Ionic applications, though I don't have any solid timelines for this. I will relay your thoughts on this issue to the Auth team.
I just want to clarify that every platform has a mechanism for anti-abuse and app impersonation (with downsides and upsides). This is quite important, especially when developers may get charged above a certain quota, and user security is at stake. reCAPTCHA is the mechanism for web and invisible reCAPTCHA makes that more seamless than the more traditional reCAPTCHA. Unfortunately, this doesn't work for Cordova/Ionic apps where the origin check fails since the origin will look like file://assets/.../index.html. We take your issue very seriously and are looking into a solution for this. I will update this bug when I have more actionable news for you.

choubey355 commented 7 years ago

Any update regarding this?

thesabareesh commented 7 years ago

Please update guys

radiarama commented 7 years ago

Hi @choubey355 ,

Please see our awesome starter on ionic market

https://market.ionic.io/starters/ionfirebaseaccountkitphoneauth

scottohara commented 7 years ago

(At the risk of getting another 👎 reaction like previous commenters who asked a similar question...)

We take your issue very seriously and are looking into a solution for this. I will update this bug when I have more actionable news for you.

@bojeil-google as it has been nearly 4 weeks since your previous comment, I'm compelled to ask if there are any further updates at this time?

With less than 3 weeks to go until the 30 September deadline for migrating off Digits and over to Firebase Phone Auth, those of us with Ionic/Cordova apps are desperate to know whether firebaseui-web will be able to handle phone authentication before the deadline, or whether we need to be implementing complex workarounds such as the one in the StackOverflow link above.

With time required for app testing and App Store submission/approval, we really need to be finalising our implementations of Firebase Phone Auth in the next week.

StackOverflow link

The SO solution linked above looks promising but complex, as it requires setting up Dynamic Links & Browser Tabs plugins, and maintaining a website to host the page for the reCAPTCHA.

Some commenters on the SO post had asked for assistance on implementing the solution (via a step-by-step guide or tutorial), and something was hinted at in early August by @washowasho, but at this point no further guidance has been provided over there.

App

Our company produces a SaaS application called ApplyOnline, which is an electronic lodgement and processing platform for mortgage applications. Mortgage brokers use ApplyOnline to lodge loan applications on behalf of their customers.

In addition, we offer a companion mobile app for brokers to track their customer's applications and receive push notifications as they progress through to approval.

For a basic intro on the mobile app, see https://www.nextgen.net/applyonlineapp/

The mobile app is implemented using Ionic/Cordova; and is available in both the Apple App Store and Android Play Store.

Digits

At the bottom of the above link you will find a short tutorial video. At 00:19-00:32 in the video, the Digits sign-in flow can be seen.

To accomplish this flow, we are using cordova-plugin-digits.

This provides a simple $window.plugins.digits.authenticate() API that renders the Digits UI and handles the auth (akin to calling ui.start('#firebaseui-auth-container', uiConfig) in firebaseui-web).

The response from Digits is an OAuth echo response, which is POSTed to our backend API for verification.

Retiring Digits

On September 1, 2017; we received the following email from Digits:

Hey there,

As announced at Google I/O, Digits is being replaced with Firebase phone authentication. We wanted to remind you that you’ll need to upgrade to Firebase by September 30th, 2017 to continue authenticating users.

After this date, your users will be unable to authenticate their device if they try to sign in with Digits. In addition, app backends will not be able to verify existing user tokens using Digits’ /sdk/account endpoint. So be sure to upgrade as soon as possible!

To upgrade, just follow our migration guide: • iOS • Android • Web

Feel free to ping us at support@fabric.io if you have any questions. If you're not planning to migrate, kindly let us know here and we won't send you or your team any more reminders :)

Being a hybrid app developed with Ionic, we naturally looked to the Web migration guide above, which in turn led us to firebaseui-web as the recommended and easiest solution.

We replaced the call to $window.plugins.digits.authenticate() with the corresponding firebaseui-web code and tested our app successfully using the device emulation features in desktop Chrome:

var ui = new $window.firebaseui.auth.AuthUI($window.firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

reCAPTCHA

It was only once we started testing the app on iPhone/Android devices that we discovered the reCAPTCHA limitation (due to the file:// origin), which then led us here to this GitHub issue.

We have been monitoring this issue ever since, for any further news on whether firebaseui-web would support Ionic/Cordova in future.

Finally, with time quickly running out before the 30 September deadline, I felt it necessary yesterday to post a comment asking for any further updates.

Conclusion

If it is unlikely that firebaseweb-ui (or the underlying SDK) can resolve the reCAPTCHA limitation before the Digits SDK stops working; we must look at either:

Alternate workarounds for Firebase Phone Auth (i.e. the solution in the StackOverflow post)
Alternates to firebaseui-web, such as the myriad of unofficial cordova-plugin-firebase forks that add phone auth support for iOS or Android (we are yet to find one that is cross-platform like cordova-plugin-digits)
Alternate 2-factor solutions, such as Twilio's Authy 2FA.

I hope this provides the detail you were looking for.

washowasho commented 7 years ago

@scottohara, did you try launching the recaptcha in a browser tab in invisible mode? It launches a quick window and then instantly closes. I have it working in iOS and Android using custom URL scheme.

scottohara commented 7 years ago

Hi @washowasho, are you referring to the solution as per the StackOverflow link?

If so, we haven't yet tried that as it would seem to require:

Addition of two new plugins (cordova-plugin-browsertab and cordova-universal-links) which aren't currently used in our app
Setting up Firebase Dynamic Links
Hosting the reCAPTCHA page on an external http(s):// server

This seems overly complex if there is any chance that, as per @bojeil-google 's earlier comment, firebaseui-web might be modified to handle Ionic/Cordova hybrid apps.

But if the feedback is that firebaseui-web isn't likely to gain support in time, then yes we plan to look into implementing that workaround.

If you're able to share any example code that you used to get this working, it would be greatly appreciated.

(I've only recently inherited the maintenance of our app, so my experience with Ionic/Cordova is fairly limited at this stage...and reading through that StackOverflow post, there were few things in there that I didn't fully understand).

washowasho commented 7 years ago

@scottohara My thoughts below:

1 - Yes, requires the use of plugins. If you are using a Cordova environment, I would not be opposed to adding plugins. IMO, the purpose of Cordova is to bridge the gap between device and browser, and that's done through plugins.

2 - IMO, it makes perfect sense for reCAPTCHA to work on only HTTPS. Seems like more of a security feature than a miss or bug. Execution of "secure" JavaScript from non-secure sources seems to be a no-no these days. For example, Stripe only allows production API calls from an HTTPS source. @bojeil-google , any additional thoughts on this? I personally don't like the fact that I have to load a browser tab to execute HTTPS only javascript, but I really don't see any other way around it in Cordova (file://).

3 - As far as dynamic links go... you are obviously already using Firebase for authentication... so why not use dynamic links? :)

scottohara commented 7 years ago

@washowasho your points are all valid. I would love to see some example code to get this working.

I have discovered that in the last 4-6 days, two plugins have added support for cross-platform phone auth (though it is worth noting that neither of these have yet published their updates versions to npm):

https://github.com/arnesson/cordova-plugin-firebase/pull/325 https://github.com/chemerisuk/cordova-plugin-firebase-authentication/commit/366f028993e3e3043b0df9ab9502670499b76efb

I might try implementing one of these plugins first, as that would seem to be a simpler solution than handling the reCAPTCHA in a separate browser tab and passing back the verification via dynamic links.

mrakowski0 commented 6 years ago

@scottohara Hey, I'm having the same issue right now and will try to use the forks to make it work since deadline for the migration is close. Can you let me know here if using these forks worked for you or maybe you found some better solution?

Much appreciated,

scottohara commented 6 years ago

Yes, I've had some success with arnesson/cordova-plugin-firebase#325.

The downside is that you are responsible for rendering your own UI to capture the phone number and verification code, where as using firebaseui-web you simply call ui.start() and you get the UI capture for free.

(Even if firebaseui-web were unable to resolve the reCAPTCHA limitation, it would be very useful to have an API that just renders the UI, e.g. ui.promptForPhoneNumber(), ui.promptForVerificationCode()).

Also, I was previously using the phonegap-plugin-push for push notifications; but it has a conflict with cordova-plugin-firebase so I had to switch over to using the Firebase plugin for handling registration of push notifications, etc.

bojeil-google commented 6 years ago

Hey @scottohara, the solution that is being planned will not be be ready before the end of the month. I talked to the Digits team; according to them, their library was not officially designed to work in Cordova/Ionic but happens to work in that environment with some developer tweaks.

Here is what I recommend, I recommend you keep pursuing the solution with the rest of the community's collaboration. Thanks everyone for helping out. I also recommend you reach out to official Digits/Firebase support to possibly whitelist your app/extend the deadline so you have more time to migrate.

Realistically speaking, there is no way way the fix will be released in time for you and others to use it and then publish your apps before the deadline.

I am working on a solution that will be compatible with the existing OAuth Cordova sign-in solution and it will be compatible with FirebaseUI-web. The end product should be easy to use. It will just take time as it is not trivial to cover all use cases.

sagarudasi commented 6 years ago

Any update on this?

saryuvc commented 6 years ago

import cordova native plugin first then...

first set the sha1 to firebase setting and generate google config.json then add to poject's root directory and add to build.gradle dependency. it'll work properly

prantikv commented 6 years ago

Is there any solution to this?

barmok commented 5 years ago

joining the conversation to get updates on this issue

schankam commented 5 years ago

Well, we're in 2019 and this is still not working with Cordova / Capacitor hosted app. I don't think it will ever be the case, so I recommend switching to a native solution.

In my case, we're building a PWA, and everything is working amazingly on Android, specially with the arrival of Trusted Web Activities, I don't even need to have a Cordova Wrapper for my app for my Android users.

Unfortunately Apple is not really friendly to PWA and so many stuff are not working there, including Firebase Auth, therefore forcing us to develop a native implementation just for that :/

bojeil-google commented 5 years ago

Hey folks, we are still planning to support phone Auth in Cordova/Ionic, but we have decided to delay this feature to include it in the modularized library: https://github.com/firebase/firebase-js-sdk/issues/332

The Auth library has become too large as it supports multiple environments and multiple functionality that certain developers do not need. We are going with a different approach where developers can pick and choose the dependencies they need. We believe this is the better long term approach. We want to support as many use cases and environments as we can but we don't want to penalize developers who do not need them.

Radecom commented 5 years ago

@bojeil-google How can we help this happen?

Crewnie commented 5 years ago

Yes, Please! @bojeil-google

SouradeepMisra commented 5 years ago

I also faced this issue. I faced this issue because of plugin version. try to update your 'webview' plugin version. It is work for me.

scriptPilot commented 5 years ago

Same for me ... different alternative solutions are not working well. Is there any chance to use FirebaseUI in near future in Cordova / Capacitor Apps?

romeo4934 commented 4 years ago

any news?

wahkiz commented 4 years ago

Any updates on this?

nargetdev commented 4 years ago

I'm in this Frey too. Also working out of the box for web and for android but failing on iOS due to the capacitor:// origin. Going to go Native and see what we find.

hiepxanh commented 4 years ago

capacitor is nice enviroment for this feature to support to

arun-rajagopal-42 commented 4 years ago

Is there an update on this?

kotran88 commented 4 years ago

I think on ios , there's no way to do firebase phone authentication...I looked for whole week but can't find a way to do it... if someone find out the way to do sms phone auth that can be used globally, please refer to it..

sam-gc commented 4 years ago

Hi folks, while we are aware of the issue unfortunately we don't have any updates at this time.

ASomerN commented 3 years ago

I also want to see this available in capacitor apps.

aidanas commented 3 years ago

We are also faced with the same issue and it would have been great to have it working without additional Cordova plugins. However while Firebase team is working on it this plugin might provide a solution for some of you who needs 2FA (sms) to work on their apps. https://www.npmjs.com/package/cordova-plugin-firebase-authentication

bojanbizjak commented 3 years ago

Any update?

bahablgn commented 3 years ago

any update ?

rodrigoslayertech commented 3 years ago

Up. Updates???

caginbektas commented 3 years ago

Following, would be better to have a native solution here instead of using any other plugins

ollyde commented 3 years ago

Dam we really didn't want to add native Firebase to our projects (it's horrible to switch between prod-stage-dev) and it slows the compile time down a lot.

hammadjamil commented 3 years ago

Hi @sam-gc @bojeil-google its been a year we have last heard of you guys. Can you provide us any update on this bug as I am also stuck in iOS app where phone auth gives error "Recaptcha Verifier is only supported in a browser HTTP/HTTPS environment".

If you could give us any update to a possible solution it will be a great help.

bojeil-google commented 3 years ago

Hey folks, as I mentioned above, we are focusing on modularizing the library first and then we can look into this issue. This is a significant effort as the UI library will eventually no longer depend on the non-modularized library. We can't work on this issue before that.