Ad

Ionic Angular Firebase Authentication With Google Plus Not Working

I've spent a lot of time trying to authenticate my users on Firebase with a Google account in my Ionic app. I'm using Ionic 4 with Angular.

I'm posting this question and answer with the research I've made because I could not find everything I needed in one place and I had to go through a lot of searches and tries to get the result I wanted.

First of all I've tried 2 ways with the firebase packages that lead me nowhere:

Having a google provider from firebase:

import * as firebase from 'firebase';
import { auth } from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
...
const provider = new auth.GoogleAuthProvider();

First try was the popup sign in (although I know that is not the recommended way):

firebase.auth().signInWithPopup(provider).then(function(result) {

But I immediately ran into google's barrier that tell me that I'm using a dissallowed_useragent (because of WebView) ... so this is not an option.

Second is signInWithRedirect using the same provider:

firebase.auth().signInWithRedirect(provider).then(function(result) {

The user is then redirected to Chrome and the login works good BUT after that it gets redirected to localhost/login (the URL that he left the app with). So it ends there and the login is not completed.

My last option was the Google Plus plugin from Ionic:
https://ionicframework.com/docs/native/google-plus But after the following code:

this.googlePlus.login({
  'webClientId': 'webclientid',
  'offline': true,
  'scopes': 'profile email'
}).then(res => {
  ...
});

Nothing happened ... not even an error was returned (used with try - catch as well).

Ad

Answer

The problem is that the android project.properties some libraries where using old versions. The solution is to rewrite them in platforms/android/project.properties.

I am also using Ionic Appflow to build so I had to do this in config.xml. So .. I installed cordova-plugin-platform-replace and added the following lines in config.xml:

    <platform name="android">
        <replace-string file="project.properties" find="com.google.android.gms:play-services-auth:11.8.0" replace="com.google.android.gms:play-services-auth:+" />
        <replace-string file="project.properties" find="com.google.android.gms:play-services-identity:11.8.0" replace="com.google.android.gms:play-services-identity:+" />

Now everything works like a charm.

I found the answer at this post: https://github.com/EddyVerbruggen/cordova-plugin-googleplus/issues/487#issuecomment-402683868

Hope this helps others save some time.

Ad
source: stackoverflow.com
Ad