Ionic2 authentication firebase

Solution 1:

Unfortunately, phone authentication using Firebase JS library will not work in a Cordova/Ionic environment since the reCAPTCHA will be unable to verify the origin of your application. This is due to the fact that the origin will look like file://assets/index.html.

What you can do to get it to work is the following: Firebase Phone auth for web depends on an app verifier interface: https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier which RecaptchaVerifier implements. It defines a property 'type' which should be equals to 'recaptcha'. It defines a method verify(): Promise which resolves with the reCAPTCHA token.

What you can do is you will need to open a website, render the reCAPTCHA, get the reCAPTCHA token and then pass it back to your app where you will implement your own firebase.auth.ApplicationVerifier

The most secure way to do that is the following:

1. Open a chrome custom tab or SFSafariViewController (do not use embedded webviews) and redirect to the website you own and whitelisted in the Firebase Console where firebase.auth.RecaptchaVerifier will be rendered. You can use cordova-plugin-browsertab for this.

2. You then pass the reCAPTCHA response token back to your app using FDL (Firebase Dynamic Links) and add it in the deep link. This guarantees that only your app can open it. You will need to configure Firebase Dynamic Links to get them to work correctly.

3. You need to listen to incoming links in your mobile app. You can use cordova-universal-links-plugin.

4. Parse the reCAPTCHA token from the deep link. Repackage it in a firebase.auth.ApplicationVerifier implementation. You can now pass it to signInWithPhoneNumber to complete sign-in.

This will require some work but is necessary to minimize the risk of phishing attacks and abuse.

Solution 2:

First of all, Cordova/Ionic uses file:/// protocol so Recaptcha won't work on your app (only on the browser since it's http). Firebase/Recaptcha library checks for location.protocol and expects for http/https but this is not the case for Cordova as mentioned. A possible workaround would be to have a local server running on your phone. e.g. cordova-httpd or cordova-plugins#local-webserver (or in-app http browsers). After that you can implement invisible captcha (as described in firebase docs). But still, sometimes the user will get a popup to solve a captcha so it's not ideal.

Since it doesn't make sense to have captcha on mobile environment (in most cases at least), I started working on the native implementation of firebase phone authentication for Cordova/Ionic. I started with the iOS version.

Can someone support me to implement the java/android version?

https://github.com/guyromb/cordova-firebase-phoneauth