Firebase + Ionic + Cordova signInWithRedirect redirects to localhost on Android

Question

I have recently re built my Ionic app, after a series of updates, and signInWithRedirect stopped working on Android, and redirects to localhost:8080 after login, while it's fine on iOS.

Here is my package.json:

{
  ...
  "dependencies": {
    ...,
    "firebase": "5.4.2",
    "@angular/fire": "5.0.0",
    "@ionic-native/firebase": "4.12.2",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-buildinfo": "2.0.2",
    "cordova-plugin-customurlscheme": "4.3.0",
    "cordova-plugin-firebase": "2.0.0",
    "cordova-plugin-ionic-webview": "2.1.4",
    "cordova-universal-links-plugin": "git+https://github.com/andyepx/cordova-universal-links-plugin.git#b91b58fb8a7ff9f2b2de83b4adceece13e9cf2a8",
  },
  ...
  "cordova": {
    "plugins": {
      ...
      "cordova-plugin-local-notification": {},
      "cordova-plugin-firebase": {},
      "cordova-plugin-browsertab": {},
      "cordova-universal-links-plugin": {}
    },
}

The version of cordova-universal-links-plugin I am using it's a fork of the original plugin, with a few fixes for Cordova 8.

In config.xml

<preference name="AndroidLaunchMode" value="singleTask" />

<universal-links>
        <host event="openAppEvent" name="app.my.com" scheme="https" />
        <host name="myapp.page.link" scheme="https" />
        <host name="myapp.app.goo.gl" scheme="https" />
        <host name="myapp.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback" />
        </host>
</universal-links>

And the login snippet I'm using:

// this.firebaseLogin is an instance of AngularFireAuth

return this.firebaseLogin.auth.signInWithRedirect(new auth.GoogleAuthProvider())
      .then(() => {
        return this.firebaseLogin.auth.getRedirectResult()
          .then(x => authCallback(x))
      })

I can't find what the issue with this configuration is, especially as it works perfectly on iOS...

Answer 1

With these versions:

"cordova-android": "^8.0.0",
"cordova-plugin-browsertab": "0.2.0",
"cordova-plugin-buildinfo": "2.0.3",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-device": "2.0.3",
"cordova-plugin-inappbrowser": "3.1.0",
"cordova-plugin-whitelist": "1.3.4",
"cordova-universal-links-plugin-fix": "1.2.1",
"firebase": "^5.9.4",
"cordova-universal-links-plugin": "~1.2.1",
"@angular/fire": "^5.1.2"

I was able to fix this problem by adding the following to my config.xml:

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

Then however I got a 403 error: disallowed_useragent (similar to in this SO question) which I managed to fix by adding the following line to config.xml:

<preference name="OverrideUserAgent" value="Mozilla/5.0 Google" />

Answer 2

After further exploring, and following @bojeil suggestion above, turns out that cordova-plugin-ionic-webview@latest runs an integrated webserver, at http://localhost:8080 which doesn't work with how the Firebase SDK looks for Cordova / handles redirects.

So, the working solution 🎊🎉 for now is to use "cordova-plugin-ionic-webview": "1.2.1" and hope that Firebase will solve this issue in the upcoming versions of their JS SDK.

I have also raised this issue here https://github.com/firebase/firebase-js-sdk/issues/1244