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 wit

Solution 1:

import { GooglePlus } from'@ionic-native/google-plus/ngx';
import { LoadingController, AlertController, Platform } from'@ionic/angular';
import { Router } from'@angular/router';
import { environment } from'../../environments/environment';
import * as firebase from'firebase/app';
import { AngularFireAuth } from'@angular/fire/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
exportclassLoginPage {

  constructor(private afAuth: AngularFireAuth,
    private googlePlus: GooglePlus,
    public loadingController: LoadingController,
    private router: Router,
    private platform: Platform,
    public alertController: AlertController,

  ) {
  }

  asyncnativeGoogleLogin(): Promise<void> {
    try {
      const user = awaitthis.googlePlus.login({
        'scopes': '', // optional - space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.'webClientId': environment.googleWebClientId, // optional - clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.'offline': true, // Optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
      })
      const firebaseUser = awaitthis.afAuth.auth.signInWithCredential(firebase.auth.GoogleAuthProvider.credential(user.idToken));
      this.updateUserData(firebaseUser);
      this.router.navigate(["/tabs/profile"]);
    } catch (err) {
      // console.log(err)
    }
  }
}

In environments folder, environment.ts file, change your api key

exportconst environment = {
  production: false,
  googleWebClientId: "78565xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
  firebase : { 
      apiKey: "AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxTn-0",
      authDomain: "xxxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxxxx",
      storageBucket: "xxxxxxxxxx.appspot.com",
      messagingSenderId: "725xxxxxxxx765"
}};

Solution 2:

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.