$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();
};

});

Answer 1

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.

Answer 2

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"));