Auth.$getUser returns null even though user is logged in (AngularFire, Firebase)

Question

Building a simple Ionic/Firebase card feed app, problem with getting current user from Firebase after they've already logged in. App structure is a basic login state that transitions to an abstract tabs state that contains two child tabs -- a card feed tab and an account tab.

Problem

Need to get the current user data after they login to display their account info. Firebase has a $firebaseAuth service with a $getAuth method that keeps returning null even though the user is logged in. Seems like user can log in but somehow isn't getting authenticated -- how can that be? From Firebase docs:

$getAuth()

Synchronously retrieves the current authentication state of the client. If the user is authenticated, an object containing the fields uid (the unique user ID), provider (string identifying the provider), auth (the authentication token payload), and expires (expiration time in seconds since the Unix epoch) - and more, depending upon the provider used to authenticate - will be returned. Otherwise, the return value will be null.

Details

Inside app.js I set up a Factory named 'Auth' inside that makes the connection to Firebase:

.factory('Auth', function($firebaseAuth) {
  var usersRef = new Firebase("https//myApp.firebaseio.com");
  return $firebaseAuth(usersRef);
})

Auth is injected into UserService which makes the $getAuth call and returns it to Account Tabs Controller. UserService is injected into Account Tab Controller which loads the account data (or should be).

UserService

//Uses Auth factory to access $firebaseAuth methods
angular.module('user.services')
    .service('UserService', ['$q', 'Auth', '$firebaseObject','$firebaseAuth',
        function($q, Auth, $firebaseObject, $firebaseAuth) {
            return {
                currentUser: function() {  //User is logged in at this point
                   return Auth.$getAuth(); //Returns null but should return current state
                },
             ... more functions
         }
 ]);

Accounts Tab Controller

// User is logged in at this point
angular.module('app.controllers')
.controller('AccountPageController', [
    '$state', '$scope', 'UserService', '$firebaseAuth',  // <-- controller dependencies
    function($state, $scope, UserService, $firebaseAuth) {        
        $scope.user = UserService.currentUser();
        console.log("user = " + $scope.user); //Evaluates to null
        ... more functions
    }
]);

How can I get the current user? Thank you in advance for your help, much appreciated :)

I have the same problem. Looks like there is no way other than querying a restricted endpoint and handling the error? — Stefan D

Aakash Aakash · Accepted Answer · 2016-06-14T07:16:38

Try binding the controller with the template in the router instead of the view. i.e.

Instead of:

<div ng-controller="AccountPageController">
...
</div>

Try this in your .state()

$stateProvider
  .state(
    ...
    templateUrl:'path/to/template.html',
    controller:'AccountPageController'
  );

Good Luck.

Auth.$getUser returns null even though user is logged in (AngularFire, Firebase)

Problem

Details

1 Answers