Ionic2 authentication firebase

Question

I am creating a system of authentication by number of cell phone in ionic 2, for that I use the google guide

First, I believe a firebase.auth.RecaptchaVerifier (Is one of the necessary parameters)

this.autVer = new firebase.auth.RecaptchaVerifier('contCatcha', {
'size': 'invisible',
'callback': function (response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
}
});

and laster use auth.signInWithPhoneNumber angularfire

this.afAuth.auth.signInWithPhoneNumber("+57" + this.numeroCelular, this.autVer).then(verificationId => {
console.log("SMS Enviado");
this.confor = verificationId;
this.loading.dismiss();
this.estado = 1;
this.esperarCodigo();
})

Where the second parameter is the firebase.auth.RecaptchaVerifier created

In the browser of my pc everything works fine, but on the mobil shows the following error message:

I need to replace that firebase.auth.RecaptchaVerifier, but I do not know if there is any plugin or sub meter to do and ahcer that everything works I really appreciate your advice

Coppery

You did not provide the error. It is not clear what the problem is. Can you clarify? Are you using it in a mobile ionic app or a mobile browser? – Roundtheclock

Sorry, it's my first post, the problem is presented in ionic, this is the error cdn-enterprise.discourse.org/ionicframework/uploads/default/… And this is my code cdn-enterprise.discourse.org/ionicframework/uploads/default/… – Coppery

I found an awesome post from javebratt.com, please check it out! – Monkery

Answer 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.

Roundtheclock

Hope you can accept this answer no?@Isaac David Chavez Perez – Gravitate

Good recommendation. This worked well for me. This should be marked as the accepted answer until the efforts to merge Phone Number Auth into Cordova Firebase Plugin are complete. – Motet

@Roundtheclock why do you say "do not use embedded webviews"? – Mattoid

Embedded webviews are incredibly insecure though extremely convenient. Google sign-in no longer works with them: developers.googleblog.com/2016/08/…. A user can't tell the source of the webview and scripts can be injected and URL redirects can be intercepted, etc. Users need to be trained to avoid them. An attacker can embed a webview with your website and trick users to sign-in and basically steal their credentials. – Roundtheclock

@JasonWasho Can you share a tutorial for it? It would have been a lot helpful for other devs. – Aponeurosis

@MadhupSinghYadav, Yes... I will. I have it figured out for Android.... just working with bojeil to finish iOS. – Motet

@MadhupSinghYadav Any updates on this? I would love to have a step by step implementation guide (or a github example) – Rice

The raptcha works good on IOS, but when I test it on my android phone I need to do the captcha verification. Are there any way I can get passed this? – Rice

It's easier to use a custom auth object with Firebase firebase.google.com/docs/auth/web/custom-auth then an external two-factor SMS authenticator. – Lubber

@Roundtheclock How did you "repackage" the token at the end? – Elide

Answer 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

Kicker

Answer 3

If you don't want to use dynamic/deep links as suggested by bojeil, you can try this:

Using Cordova, I moved all the authentication process to a webpage hosted on my server. From my app, I used an In-app Browser to launch the webpage, and then carry out all the app-browser communication by long-polling the server which acts as the middleman. I even managed to parse the SMS and close the browser in the end automatically.

For this to work, be careful with the security, which can be quite tricky.

Alternatively, you may use Firebase Realtime Database instead of server polling to pass around the messages.

You may need these cordova plugins:

• InAppBrowser
• BackgroundMode
• Permission
• Cordova SMS Receiver Plugin

Northerly

Answer 4

I was not able to apply the workaround of @bojeil as I couldn;t find a way to have my own implementation of ApplicationVerifier. However, I was able to achieve Firebase Phone Authentication on Android using cordova firebase plugin as described in this video. Hope it helps.

Kandis