CODEWITHSUNDEEP
angularjsangularfire
vzhen
vzhen

Reputation: 11157

How to use angularFireAuth values in controllers and services?

Let say I put angularFireAuth inside a service.

app.factory('authService',
function($rootScope, $timeout, angularFireAuth, FIREBASE_URL) {
    return function() {
        angularFireAuth.initialize(new Firebase(FIREBASE_URL), {
            scope: $rootScope,
            name: 'user',
            path: "/"
        });
        $rootScope.$on('angularFireAuth:login', function _set(evt, user) {
            $timeout(function() {
                $rootScope.auth = {
                    authenticated: true
                   };
            });
         });
        $rootScope.$on('angularFireAuth:logout', function(){
            $timeout(function() {
                $rootScope.auth = {
                    authenticated: false
                   };
            });    
        });
      }
    });

Then I initial it in .run()

.run(['$rootScope', 'authService', function($rootScope, authService){
  authService();
});

My question is how can I use $scope.auth.authenticated in other services and controllers.

I console.log($scope.auth.authenticated) in controller. It always return false. Seem like it is not listening / watching the login

Or

Can I use $scope.user directly in controller and listening on it?

UPDATE

I created a plunker.

Upvotes: 0

Views: 1081

Answers (4)

bennash
bennash

Reputation: 39

Thanks to Tom Chen's second example I'm using angularfire's auth like so:

myapp.controller("UserController", ["$scope", "$firebase", "$firebaseSimpleLogin",       function($scope, $firebase, $firebaseSimpleLogin) {
var ref = new Firebase("https://XXXXXX.firebaseio.com/");
$scope.auth = $firebaseSimpleLogin(ref);

$scope.$watch('auth', function(newAuth, oldAuth){
    console.log(newAuth, oldAuth);
    // logged in, 
    // can reference newAuth.user.id
  }, true);

}]);

UPDATE

This example is also a call back 

$scope.$on("$firebaseSimpleLogin:login", function(e, user) {
  // can reference user.id 
});

Upvotes: 1

Tom Chen
Tom Chen

Reputation: 1519

I would replace angularFire with angular-on-fire and use the provided fireEntry service.

module('app.auth', ['angular-on-fire'])
.constant({FirebaseUrl: "https://YOUR_FB_NAME.firebaseIO.com/"})
.run(['$rootScope', 'fireEntry', function($rootScope, fireEntry){
  var auth = {};
  $rootScope.auth = auth;
  fireEntry(auth);
}]]);

So, any update to auth will reflected in the $rootScope auth variable.
If user logged in, auth will contain user information provided by FirebaseSimpleLogin. Once logged out, auth will be empty.

You can now watch on $rootScope.auth to receive any auth update!

module('app.ctrl', ['app.auth']).controller('HomeCtrl', ['$scope', function($scope){
  $scope.$watch('auth', function(newAuth, oldAuth){
    console.log(newAuth, oldAuth);
  }, true);
}]);

Upvotes: 0

Kato
Kato

Reputation: 40582

The problem is that $scope.user (and by extension $scope.auth) are not created until the login takes place, which isn't until one clicks the login button. But the console.log event takes place as soon as the controller is created (onDOMReady).

You probably don't need the $scope.auth at all. Firereader is using that because it needs some additional data put into the user object and specifically a boolean which is used in an ng-switch statement. In your case, you can probably just use $scope.user, which is set by angularFireAuth and not bother with the $scope.auth object.

So, to summarize, if you move your console.log to wait until the login is completed, it will work as expected: http://plnkr.co/edit/Bd23DGFtEpqO2g4jo06v?p=preview

var app = angular.module('plunker', ['firebase']);

app.constant('FIREBASE_URL', 'https://newname.firebaseio.com/');
app.run(['$rootScope', 'authService', function($rootScope, authService){
    authService();
    $rootScope.$watch('auth.authenticated', function() {
        isAuthenticated = $rootScope.auth.authenticated;
    });
}]);

app.factory('authService', [
    '$rootScope',
    '$timeout',
    'angularFireAuth',
    'FIREBASE_URL',

    function($rootScope, $timeout, angularFireAuth, FIREBASE_URL) {
        return function() {
            angularFireAuth.initialize(new Firebase(FIREBASE_URL), {
                scope: $rootScope,
                name: 'user'
            });

            $rootScope.$on('angularFireAuth:login', _log);

            function _log(evt, user) {
                // this is where $scope.user and $scope.auth will be set
                  console.log($scope.user);
             }
        }
    }
]);



app.controller('MainCtrl', function($scope, authService, angularFireAuth) {
  $scope.name = 'World';

  $scope.login = function(){
    angularFireAuth.login('facebook');
  }

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

  // angularFireAuth hasn't returned yet at this point
  // console.log($scope.auth);
});

Upvotes: 2

Chandermani
Chandermani

Reputation: 42669

One reason that i can think on why this is not working could be that the local scope is shadowing the variable declared on $rootScope. Maybe there has been an assignment to the local scope object auth. You can very much verify this in firebug or chrome tools by putting some breakpoints and verify values for both $rootScope.auth and $scope.auth.

Better to check when the auth completes within a child scope.

Upvotes: 0

Related Questions