$rootScope.currentUser is null on refresh

Question

I was able to get the firebaseSimpleLogin working and storing the current user in the rootScope. When I goto another page and come back to the feed page everything loads, but when I refresh $rootScope.currentUser is null. Has anyone else had this issue?

I have this piece of code in my app.run function:

$rootScope.$on('$firebaseSimpleLogin:login',function(e, auth){
   $rootScope.currentUser = User.find(auth.id);
});

And this is my FeedCtrl that is trying to load in the user's posts

app.controller('FeedCtrl',['$scope', '$rootScope','User','Auth','Post',function($scope,     $rootScope,User,Auth,Post){
 populateFeed();
 console.log($rootScope.currentUser);

$scope.logout = function(){
   Auth.logout();
};


$scope.savePost = function(){
  Post.create($scope.post).then(function(post){
    $scope.post.text = "";
  });
};

function populateFeed(){
   $scope.posts = {};
   angular.forEach($rootScope.currentUser.posts,function(id){
    $scope.posts[id] = Post.find(id);
   });
}

}]);

My Main app Module

var app = angular.module('myapp',['ui.router','firebase']);

app.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
.state('/',{
  url: '/',
  controller: 'MainCtrl',
  templateUrl: 'views/index.html'
})
.state('feed',{
  url: '/feed',
  controller: 'FeedCtrl',
  templateUrl: 'views/feed.html',
  authenticate: true
})
.state('login',{
  url: '/login',
  controller: 'LoginCtrl',
  templateUrl: 'views/login.html'
})
.state('signup',{
  url: '/signup',
  controller: 'LoginCtrl',
  templateUrl: 'views/signup.html'
})
.state('settings',{
  url: '/settings',
  controller: 'SettingsCtrl',
  templateUrl:"views/settings.html"
})
.state('profile',{
  url: '/:slug',
  controller: 'ProfileCtrl',
  templateUrl: 'views/profile.html'
})
.state('profile-about',{
  url: '/:slug/about',
  controller: 'ProfileCtrl',
  templateUrl: 'views/profile.html'
});

$urlRouterProvider.otherwise('/');
})
.constant('FIREBASE_URL','https://{FIREBASE}.firebaseio.com/')
.run(function($rootScope, $state,FIREBASE_URL, $firebaseSimpleLogin, User, Auth){
$rootScope.$on('$stateChangeStart',function(event, next){
  if(next.authenticate && !User.getCurrentUser()){
     $state.go('login');
  }
 });

 $rootScope.$on('$firebaseSimpleLogin:login',function(e, auth){
   $rootScope.currentUser = User.find(auth.id);
  });

 $rootScope.$on('$firebaseSimpleLogin:logout',function(){
  delete $rootScope.currentUser;
  $state.go('login');
 });

 $rootScope.logout = function(){
  Auth.logout();
};

});

Is `$rootScope.$on('$firebaseSimpleLogin:login'` being run before `console.log($rootScope.currentUser)` is invoked? — Kato, Jun 12 '14 at 22:33
Yes its being ran in the run function attached to my main app module. — Markus Gray, Jun 13 '14 at 00:56
Correct, but is the callback being invoked (the part that assigns currentUser) before you attempt to log its contents? Probably not. — Kato, Jun 13 '14 at 01:00
The main module is probably superfluous here. The callback invoked by `$rootScope.$on` is an asynchronous call. It's not going to be called right away. Your controller is probably being instantiated before that callback executes. Test this by putting a console.log inside that callback and seeing that it gets invoked after you try to log the contents of `$rootScope.currentUser` — Kato, Jun 13 '14 at 01:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55566/discussion-between-markus-gray-and-kato). — Markus Gray, Jun 13 '14 at 11:45

score 28 · Accepted Answer · answered Aug 14 '14 at 20:11

28

If you by 'refresh' mean that you hit F5 in the browser that will wipe your $rootscope from memory and you will get null back as you experience (basically your entire app will be 'restarted').

In order to persist values you either need to store them in a cookie or use localStorage/sessionStorage. For example, instead of using $rootscope.currentUser use $window.sessionStorage.currentUser.

answered Aug 14 '14 at 20:11

lindstromhenrik

1,143
9
11

8

Any idea how to call $window.sessionStorage.currentUser in the html please ? – Jay Mar 08 '16 at 14:49

score 10 · Answer 2 · answered Jun 07 '16 at 08:33

To store it in localStorage: $window.localStorage.setItem("currentUser", currentUser);

or store in json format: $window.localStorage.setItem("currentUser", angular.toJson(currentUser));

To get it form there: var currentUser = $window.localStorage.getItem("currentUser");

or if you saved it using the second way: var currentUser = JSON.parse($window.localStorage.getItem("currentUser"));

$rootScope.currentUser is null on refresh

2 Answers2

Linked