How to get the authenticated user info and use in all controllers and services?

All we need is an easy explanation of the problem, so here it is.

I’m using angularFireAuth and I want to retrieve the logged in user’s info and use in
all the controllers or services when the app is initial.

Currently, I used this in every controller but i having some problem.

$scope.$on("angularFireAuth:login", function(evt, user){ 
  console.log(user);
});

The callback will not call if it is not a full page load or return null when app initial.

I need some tips for how can I return the authenticated user’s info so I can use when app is initial and in all the controllers and services.

Example

When in controller or services

  • $scope.auth.user.id will return user’s ID
  • $scope.auth.user.name will return user’s name
  • etc

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I would start with a userService for this:

angular.module('EventBaseApp').service('userService', function userService() {
    return {
        isLogged: false,
        username: null
    }

});

And write a LoginCtrl controller:

angular.module('EventBaseApp')
  .controller('LoginCtrl', function ($scope, userService, angularFireAuth) {
    var url = "https://example.firebaseio.com";
    angularFireAuth.initialize(url, {scope: $scope, name: "user"});

    $scope.login = function() {
        angularFireAuth.login("github");

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

    $scope.$on("angularFireAuth:login", function(evt, user) {
      userService.username = $scope.user;
      userService.isLogged = true;
    });

    $scope.$on("angularFireAuth:logout", function(evt) {
      userService.isLogged = false;
      userService.username = null;
    });
});

Inject the userService anywhere you want the user.

My app that am currently working on that uses this – https://github.com/manojlds/EventBase/blob/master/app/scripts/controllers/login.js

Based on ideas presented here – http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

Method 2

i’m not sure quite what your question is. but if you are looking to authorise once rather than in each controller, you can put the code into the module instead and put it into the $rootScope.

var myapp = angular.module('myapp').run(
    function ($rootScope) {
        $rootScope.user = null;

        $rootScope.$on("angularFireAuth:login", function (evt, user) {
            $rootScope.user = user;

        });
    });

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply