Ionic Google OAuth Authentication, Firebase 3 and (ngCordovaOauth plugin or cordova-plugin-googleplus)

app.js

angular.module('App', ['ionic', 'ngCordova', 'ngAnimate', 'ngCordovaOauth', 'firebase'])

.run(['$ionicPlatform', 
      '$rootScope',
      '$firebaseAuth',
      function($ionicPlatform, $rootScope, $firebaseAuth) {

  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });

  $firebaseAuth().$onAuthStateChanged(function(user) {
      $rootScope.user = user;
  });
}])

auth-new.js

//https://github.com/EddyVerbruggen/cordova-plugin-googleplus

(function(firebase) {
'use strict';

    angular
        .module('App')
        .factory('Auth', Auth);

    Auth.$inject = ['$q', 'myConfig'];
    function Auth($q, myConfig) {
        
        var _nativeLogin = function(){
          return $q(function(resolve, reject) {
            window.plugins.googleplus.login(
              {
                'scopes': 'email profile',
                'webClientId': myConfig.googleClientId
                'offline': true,
              },
              function (obj) {
                resolve(obj)
              },
              function (msg) {
                reject(msg);
              }
            );
          });
        }
      
        return {
            login : function () {
                if(ionic.Platform.isWebView()){
                    return _nativeLogin().then(function (result) {
                        var credential = firebase.auth.GoogleAuthProvider.credential(result.idToken);
                        return firebase.auth().signInWithCredential(credential);
                    });
                }
                else{
                    var provider = new firebase.auth.GoogleAuthProvider();
                    provider.addScope('email');
                    provider.addScope('profile');
                    return firebase.auth().signInWithPopup(provider);
                }
            }
        };
    }
})(firebase);

auth-old.js

//Google scopes - https://developers.google.com/identity/protocols/googlescopes
//myConfig - Angular constants
(function(firebase) {
'use strict';

    angular
        .module('App')
        .factory('Auth', Auth);

    Auth.$inject = ['$cordovaOauth', 'myConfig'];
    function Auth($cordovaOauth, myConfig) {
        
        return {
            login : function () {
                if(ionic.Platform.isWebView()){
                    return $cordovaOauth.google(myConfig.googleClientId + '&include_profile=true', ["email", "profile"]).then(function (result) {
                        var credential = firebase.auth.GoogleAuthProvider.credential(result.id_token);
                        return firebase.auth().signInWithCredential(credential);
                    });
                }
                else{
                    var provider = new firebase.auth.GoogleAuthProvider();
                    provider.addScope('email');
                    provider.addScope('profile');
                    return firebase.auth().signInWithPopup(provider);
                }
            }
        };
    }
})(firebase);

Yeah!! Excelente Juan!

jaja con gusto @f1lander

I'm doing exactly the same thing but I'm getting displayName, photoUrl as null in the response of signInWithCredential! A weird thing is it works if I'm trying to login through the same account which is associated with my firebase project. Is the issue related to any permission or making the app public?

@code247 Maybe you can use the providerData, what do you think?

@code247 Check my pull request => nraboy/ng-cordova-oauth#276

For the moment, my solution is the following:

$cordovaOauth.google(myConfig.googleClientId + '&include_profile=true', scopes)

And you can see the info using firebase.auth().currentUser.providerData[0]

Regards, Nicholls

This is super awesome. So much help after hectic days.

Can u provide an example with facebook?

@decltypeme You´re welcome! 👍
@henriquesacramento But is similar 💯

Nice code, and thanks for sharing this!

And can you also give an example for the controller code, or how to bind it with ng-click?

Nevermind, i finally able to do it :)

Thanks for the code thats really helpful!

Hola @jdnichollsc,
podrias decir como configuras en firebase? en tipo de aplicacion seleccionas web? yo he realizado e firebase login con facebook (seleccionando web) y en navegador web funciona perfecto pero lo pruebo en android y no me funciona.....

muchas gracias!

@ilman it's a pleasure!
@enklenke Hola man, es por eso que en mi ejemplo estoy utilizando un plugin de cordova cuando la aplicación se abre en el móvil, por lo cual funciona tanto en desktop como en el móvil! 👍

hola @jdnichollsc, el código funciona perfecto, tienes idea de como funciona el login anonimo?

I don't know about Anonymous login. Guys, my example was updated using the native way with cordova-plugin-googleplus

Where were you 6 months ago!, haha great plugin thank you for your work!.

@alxanthony haha you're welcome!