Ionic 2 | GooglePlus authentication using Firebase and Angularfire on Android device

Vijay

Software Consultant

You may also like...

30 Responses

  1. Comments don’t work.

    When I tried to implement it myself. I got an error about missing definition of “firebase” in the next line: var provider = firebase.auth.GoogleAuthProvider.credential(userData.idToken); Can you help me and clarify the problem? Also, there are some issues with html representation of the source code (<) Thank you for advance! P.S. There are some problems with comments on the post page. It says that problem is in invalid token. Please, fix it.

    • admin says:

      I fixed the code for app.module.ts
      Make sure that you have upgraded latest Ionic 2 RC1 otherwise you may get firebase not found error.
      Missing Firebase error will occur, if Ionic 2 RC0 exists or any previous version.
      Make sure you run the following command
      npm install @ionic/app–scripts@beta —save

      Delete node_modules and run npm install command.

  2. Everything is working properly now, thanks.

  3. Mohammed Faraaz C says:

    i am geeting 12501 error . any idea?

  4. I keep getting the error “10” in the second “catch”.

    ` GooglePlus.login({
    ‘webClientId’ : ‘ {

    var provider = firebase.auth.GoogleAuthProvider.credential(userData.idToken);

    firebase.auth().signInWithCredential(provider)
    .then((success) => {
    console.log(“Firebase success: ” + JSON.stringify(success));
    this.displayAlert(success,”signInWithCredential successful”)
    this.userProfile = success;

    })
    .catch((error) => {
    console.log(“Firebase failure: ” + JSON.stringify(error));
    this.displayAlert(error,”signInWithCredential failed”)
    });

    })
    .catch((error) => {
    console.log(“Firebase failure: ” + JSON.stringify(error));
    this.displayAlert(error,”signInWithCredential failed”)
    });

    })`

    Any hint?

    • Vijay says:

      There is something wrong with GooglePlus webClientId.
      Please check whether webClientId is correct from firebase console.

      After looking at GooglePlus Java code, I see following errors but no 10 :-

      * SIGN_IN_CANCELLED = 12501 -> cancelled by the user, flow exited, oauth consent denied
      * SIGN_IN_FAILED = 12500 -> sign in attempt didn’t succeed with the current account
      * SIGN_IN_REQUIRED = 4 -> Sign in is needed to access API but the user is not signed in
      * INTERNAL_ERROR = 8
      * NETWORK_ERROR = 7

      If you want to know exact error, run Android Monitor in Android studio to check correct error in debug mode.

  5. Right I was using the “android” id and not the “web app” id. After I changed it now I get “{}” as the error message (again in the 2nd .catch).
    Any hint?
    (it is strange because userData var already contains email, profile picture etc… but the login does not seem to be finished)

    • Vijay says:

      Hector,

      I fixed home.ts code with latest Ionic release and updated the article.
      You can test and let me know whether it works.

      Thanks,
      Vijay

  6. Now it works like charm.

    There is 2 things that I would appreciate clarification for:
    1) what exactly has been fixed or what was the cause of the error? the JSON.stringify? the displayAlert?
    2) why is this needed?
    this.af.auth.subscribe((data: FirebaseAuthState) => {
    this.af.auth.unsubscribe()

    I just have one suscription in the constructor like this:
    this.af.auth.subscribe(user => {
    if(user) {
    alert(‘fire user logged in’);
    this.user = user;
    }else {
    alert(‘fire user logged out’);
    this.user = {};
    }
    });

    • Vijay says:

      1. The problem was in firebase.auth.GoogleAuthProvider.credential of home.ts
      Firebase was not loaded in current version of Ionic which caused error in second catch.

      I was able to find this error using logcat debugger of Android studio.

      In RC1, firebase was initialized in a different way globally and then home.ts was able to run this credential method successfully.
      In current version of Ionic, firebase was not initialized globally.
      I just imported firebase in home.ts to make it work.

      2. You are correct, I should have subscribed only once initially.But I am calling it from button click which will end in multiple registry of this event called from googlePlusLogin method.

      To avoid GooglePlus.login call multiple times, I am unsubscribing immediately.
      This can be improved by subscribing only once initially without unsubscribing which will call GooglePlus.login. As I didn’t get time,I didn’t optimize the code.
      Good catch on this.

      Thanks,
      Vijay

    • istenith says:

      but in my case its not working
      i m getting “{}” error agian

    • Vijay says:

      This error happens when Android API key is not setup properly using Cordova plugin.
      Also check your web client ID is setup in home.ts

  7. Suresh Jain says:

    I am getting 12501 error.

    • Vijay says:

      12501 error occurs when something is wrong in Firebase web client API or Android Client API.
      Please revisit the article about these two client API.

      There is also solution about this in one of my comment.

  8. vishakhamu says:

    Hey! how can a I accomplish this in ionic 1

  9. Vijay says:

    I didn’t try in Ionic 1 but it should be simple.
    You need to setup Android and web client id to authorize Google login.
    Android client id should be setup using cordova plugin as explained in this article.
    I think there are examples on Google login and you need to pass WebClientId to authorize.

  10. sir i followed same step but im getting runtime error Cannot find module “ionic-native” i also installed ionic native plz help me to debug this i tried a lot your help will be life saver for me thanks my code
    home.ts
    import { Component } from ‘@angular/core’;
    import { NavController, AlertController, Platform } from ‘ionic-angular’;
    import { AngularFire, FirebaseAuthState} from ‘angularfire2’;
    import { GooglePlus } from ‘ionic-native’;
    import firebase from ‘firebase’

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

    userProfile: any = null;

    constructor(public navCtrl: NavController, public af: AngularFire,
    public alertController : AlertController, private platform: Platform ) {

    }

    googlePlusLogin()
    {

    this.af.auth.subscribe((data: FirebaseAuthState) => {

    this.af.auth.unsubscribe()
    console.log(“in auth subscribe”, data)

    this.platform.ready().then(() => {
    GooglePlus.login({
    ‘webClientId’ : ‘595383641078-0aaa8s0n6qlq2p0vnikdjijrqt7t6jat.apps.googleusercontent.com’
    })
    .then((userData) => {

    console.log(“userData ” + JSON.stringify(userData));
    console.log(“firebase ” + firebase);
    var provider = firebase.auth.GoogleAuthProvider.credential(userData.idToken);

    firebase.auth().signInWithCredential(provider)
    .then((success) => {
    console.log(“Firebase success: ” + JSON.stringify(success));
    this.displayAlert(JSON.stringify(success),”signInWithCredential successful”)
    this.userProfile = success;

    })
    .catch((error) => {
    console.log(“Firebase failure: ” + JSON.stringify(error));
    this.displayAlert(error,”signInWithCredential failed”)
    });

    })
    .catch((gplusErr) => {
    console.log(“GooglePlus failure: ” + JSON.stringify(gplusErr));
    this.displayAlert(JSON.stringify(gplusErr),”GooglePlus failed”)
    });

    })
    })

    }

    displayAlert(value,title)
    {
    let coolAlert = this.alertController.create({
    title: title,
    message: JSON.stringify(value),
    buttons: [
    {
    text: “OK”
    }
    ]
    });
    coolAlert.present();

    }

    }

Leave a Reply

%d bloggers like this: