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

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.