signInWithRedirect does not redirect back to app

[h2u]

Version info

Windows 10 64
Ionic 4
Cordova 8
Android 7 (26)

{
  "name": "appTest",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/fire": "^5.0.0",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.12.0",
    "@ionic-native/splash-screen": "~4.12.0",
    "@ionic-native/status-bar": "~4.12.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-buildinfo": "^2.0.2",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-customurlscheme": "^4.3.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-universal-links-plugin": "^1.2.1",
    "firebase": "^5.4.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-buildinfo": {},
      "cordova-universal-links-plugin": {},
      "cordova-plugin-browsertab": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-customurlscheme": {
        "URL_SCHEME": "io.ionic.starter",
        "ANDROID_SCHEME": " ",
        "ANDROID_HOST": " ",
        "ANDROID_PATHPREFIX": "/"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

How to reproduce these conditions

• start blank ionic project
• install & setup angularfire
• complete guide: https://firebase.google.com/docs/auth/web/cordova?authuser=2

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    public afAuth: AngularFireAuth
  ) {

  }

  login() {
    this.afAuth.auth.signInWithRedirect(new auth.GoogleAuthProvider()).then(() => {
      this.afAuth.auth.getRedirectResult().then(result => {
        console.log('auth result', result);
      }).catch(error => {
        console.log('auth error', error);
      });
    });
  }

  logout() {
    this.afAuth.auth.signOut();
  }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div *ngIf="afAuth.user | async as user; else showLogin">
      <h1>Hello {{ user.displayName }}!</h1>
      <button ion-button (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <p>Please login.</p>
      <button ion-button (click)="login()">Login with Google</button>
    </ng-template>
</ion-content>

Debug output

Console is empty.
After i logged in on google accounts, it redirects me to here:

Expected behavior

Redirect to app

Actual behavior

Stuck in browser

[codediodeio]

I can confirm this issue as well, but have no idea how to debug. It's not an issue with AF, which works fine with redirect auth on the web, so I'm assuming it's an issue in one of those cordova black boxes.

A workaround for Google Auth is to use the Google Plus Plugin and and use signInWithCredential. Here's a full guide verified with Ionic 4 https://angularfirebase.com/lessons/ionic-google-login-with-firebase-and-angularfire/

[h2u]

Hey, @codediodeio . Thanks for reply. Tried today your solution but it's not working giving everytime error: Object(...) is not a function at GooglePlus.login (index.js:24)

Spent few hours of finding the solution, nothing helped, switched to another work :) Maybe you know something about this error?

"promise-polyfill": "^8.1.0",
"rxjs": "^6.3.1",
"rxjs-compat": "^6.3.1",
"cordova-android": "7.0.0",
"@ionic-native/core": "^4.12.2",
"@ionic-native/google-plus": "^5.0.0-beta.17",
"cordova-plugin-googleplus": "^5.3.1"

[codediodeio]

That error is usually related to RxJS, does npm install rxjs-compat fix it? (and restart your dev server)

[h2u]

Just updated rxjs-compat, restarted server. Nothing changed.

TypeError: Object(...) is not a function
    at GooglePlus.login (index.js:24)
    at AppProvider.<anonymous> (app.provider.ts:37)
    at step (main.ts:5)
    at Object.next (main.ts:5)
    at main.ts:5
    at new t (polyfills.js:3)
    at webpackJsonp.37.__awaiter (main.ts:5)
    at AppProvider.webpackJsonp.37.AppProvider.nativeGoogleLogin (app.provider.ts:34)
    at AppProvider.webpackJsonp.37.AppProvider.doGoogleLogin (app.provider.ts:75)
    at Object.eval [as handleEvent] (WelcomePage.html:10)

    async nativeGoogleLogin() {
        try {

            const gplusUser = await this.gplus.login({
                'webClientId': 'longid.apps.googleusercontent.com',
                'offline': true,
                'scopes': 'profile email'
            });

            return await this.afAuth.auth.signInWithCredential(firebase.auth.GoogleAuthProvider.credential(gplusUser.idToken));

        } catch (err) {
            console.log(err)
        }
    }

[codediodeio]

If you're on Ionic v3 you want npm i @ionic-native/google-plus@4.12.2 and the import should look like

import { GooglePlus } from '@ionic-native/google-plus'

On Ionic v4, you need all native plugins updated to 5.0.0-beta and imported from npx.

import { GooglePlus } from '@ionic-native/google-plus/npx'

[h2u]

Im on v4 and imports are as you say.

[codediodeio]

Are you sure, v4 should have "@ionic/angular": "^4.0.0-beta", but the package on this issue is "ionic-angular": "3.9.2"

[h2u]

I thought @ionic-native/core is ionic version and it's 4.12.2, and there is no package @ionic/angular, only ionic-angular and the latest version is 4.0.0-alpha.0 not 4.0.0-beta. You sure that i need to update ionic-angular?

[h2u]

Okay, everything works now. I did not installed @ionic/angular. Downgraded @ionic-native/google-plus to 4.12.2 and it's working now. Thank you.

But the main issues still exists.

[raphrmx]

Hello,

I also encounter this problem since switching to ionic V4 and its latest plugin "cordova-plugin-ionic-webview" without finding an alternative.
I wish I could connect with other social networks (Facebook, Twiter, etc.)
If I understand correctly the problem comes from an ionic webview compatibility issue that uses an internal web server.

Do you plan to patch this to make it compatible with this one?

Thank you in advance for your responsiveness :)

[ngrealish]

I'm also having an issue with this. Both signInWithRedirect and signInWithPopUp don't work. When I use redirect, I get the exact same issue as above with the same alert boxes. I have everything upgraded

"dependencies": {
    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.0",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.0",
    "angularfire2": "^5.0.0-rc.11",
    "cordova-android": "7.1.4",
    "cordova-browser": "^5.0.4",
    "cordova-ios": "^4.5.5",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic": "^5.2.10",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.3",
    "dragula": "^3.7.2",
    "firebase": "^5.7.3",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"
  },

[murat0]

Anyone still experiencing this issue

• add <allow-navigation href="*"/> into your config

[FelixODev]

And add <preference name="OverrideUserAgent" value="Mozilla/5.0 Google" /> if you run into a disallowed user agent screen