Firebase Auth Error in Ionic 2 Application

Question

The My Firebase / Ionic 2 application works fine in the browser (ion service) and on the local Android device (Android ion launch). The application uses the Firebase database and auth functions.

The app also works great on an iOS device.

However, when I publish on Google Play for beta testing on Android, the auth authorization method always fails with the error: "A network error occurred (for example, a timeout, an interrupted connection, or an unavailable host)." But Firebase database methods work fine. I use only the Firebase email service provider.

I read every post that I can find similar to this problem and tried all these solutions. I updated to the latest versions of all components.

The cordova-plugin-whitelist plugin is installed. It is installed by default in the new Ionic 2 project. I understand that the following security settings do not block Firebase.

index.html

<meta http-equiv="Content-Security-Policy" content="font-src * data:; img-src * data:; default-src * 'unsafe-eval' 'unsafe-inline'; script-src * 'unsafe-eval' 'unsafe-inline'"> 

config.xml

 <access origin="*"/> <allow-intent href="http://*/*"/> <allow-intent href="https://*/*"/> <allow-navigation href="*"/> 

Service

 public login(email: string, password: string): Observable<any> { return Observable.fromPromise( <Promise<any>>firebase.auth().signInWithEmailAndPassword(email, password) ); } 

My form

 this.authService.login(this.loginForm.value.email, this.loginForm.value.password) .subscribe(() => { // Do something! }, error => { // A network error has occurred! }); 

Version Information

 Cordova CLI: 6.5.0 Ionic Framework Version: 2.2.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.1.4 Node Version: v7.2.1 In package.json: "firebase": "^3.7.1" In config.xml: <plugin name="cordova-plugin-whitelist" spec="1.3.1"/> 

Answer 1

I managed to get around this problem by creating locally and specifying the security configuration below.

Please note that I cannot find a suitable configuration for production. I suspect that I am missing a domain in the white list.

I generated .apk using ionic.io and for some reason it spawned problematic assemblies. It is strange that everything works, except for the Firebase check.

index.html

 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap://ready https://ssl.gstatic.com file://* ws://* wss://*; img-src * data:; font-src * data:; script-src * https://*.google-analytics.com https://*.googleapis.com https://*.firebaseio.com 'unsafe-eval' 'unsafe-inline';"> 

Note the use of default-src * and script-src * . Change any of them to "I", which will lead to errors.

config.xml

  <access origin="*"/> <access origin="https://*.google-analytics.com"/> <access origin="https://*.googleapis.com"/> <access origin="https://*.firebaseio.com"/> <allow-navigation href="*"/> <allow-navigation href="http://ionic.local/*"/> <allow-intent href="http://*/*"/> <allow-intent href="https://*/*"/> <allow-intent href="tel:*"/> <allow-intent href="sms:*"/> <allow-intent href="mailto:*"/> <allow-intent href="geo:*"/> 

Note the use of <access origin="*"/> . Deleting this line leads to errors.

Interestingly, deleting the <access origin="*"/> and the local build leads to the same error as when creating using ionic.io.