Firebase Auth Network Error in Ionic 2 App

Question

My Firebase / Ionic 2 app works perfectly in the browser (ionic serve) and on a local Android device (ionic run android). The app uses Firebase database and auth features.

The app also works perfectly on an iOS device.

However, when I publish to Google Play for beta testing on Android the auth login method always fails with error: "A network error (such as timeout, interrupted connection or unreachable host) has occurred." But Firebase database methods are working fine. I'm only using Firebase email/password provider.

I've read every post I can find that's similar to this issue and have tried all those solutions. I've upgraded to the latest versions of all components.

The cordova-plugin-whitelist plugin is installed. It's installed by default in a new Ionic 2 project. My understanding is the following security settings are not blocking 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="*"/>

My 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 Info

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 was able to work around this issue by building locally and specifying the security config below.

Note that I'm unable to find a production suitable configuration. I suspect I'm missing a domain in the whitelist.

I had been been generating the .apk using ionic.io and for some reason it generated problematic builds. What's strange is everything worked except Firebase authentication.

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 either of these to 'self' results in 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="*"/>. Removing this line results in errors.

Interestingly, removing the <access origin="*"/> line and building locally results in the same error as when building with ionic.io.