AngularJS call Firebase uid from controller

Question

Im trying to verify that a user is logged in. Initially I went with $scope.use, $scope.user.uid, $scope.getCurrenUser() as described on Firebase docs but I think I simply have the dependencies wrong.

Code: myApp.js https://gist.github.com/sebbe605/2b9ff7d3b798a58a3886

firebase.js https://gist.github.com/sebbe605/f9e7b9a75590b3938524

If I understand this correctly there is no way for the program to know that I'm referring to a Firebase user. To clarify I want .controller('templateCtrl',function($scope, $firebase) to have the ability to show a certain button if the user is logged in.

--UPDATE 1-- So, i have updated my files and for what i understand this should work. Previous code are as gits above to enhance the cluther.

myApp.js

    angular.module('myApp', [
    'ngRoute',
    'firebase'
])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/template',
            {
                templateUrl:'partials/template.html', controller:'templateCtrl'
            });
        $routeProvider
            .when('/login',
            {
                templateUrl:'partials/login.html', controller:'signupCtrl'
            });
        $routeProvider
            .when('/signup',
            {
                templateUrl:'partials/signup.html', controller:'signupCtrl'
            });
        $routeProvider
            .when('/user',
            {
                templateUrl:'partials/user.html', controller:'userCtrl'
            });
        $routeProvider
            .otherwise('/template');
    }])

controllers.js

'use strict';
angular.module('myApp').controller('signupCtrl', function($scope, $http, angularFire, angularFireAuth){
    $scope.loginBusy = false;
    $scope.userData = $scope.userData || {};

    var ref = new Firebase('https://boostme.firebaseio.com/');
    angularFireAuth.initialize(ref, {scope: $scope, name: 'user'});

    /*//////////////LOGIN - LOGOUT - REGISTER////////////////////*/

    $scope.loginEmailText = "Email"
    $scope.loginPasswordText = "Password"

    $scope.login = function() {
        $scope.loginMessage = "";
        if ((angular.isDefined($scope.loginEmail) && $scope.loginEmail != "") && (angular.isDefined($scope.loginPassword) && $scope.loginPassword != "")) {
            $scope.loginBusy = true;
            angularFireAuth.login('password', {
                email: $scope.loginEmail,
                password: $scope.loginPassword
            });
        } else {
            $scope.loginPassword = ""
            $scope.loginPasswordText = "Incorrect email or password"
        }
    };

    $scope.logout = function() {
        $scope.loginBusy = true;
        $scope.loginMessage = "";
        $scope.greeting = "";
        $scope.disassociateUserData();
        $scope.userData = {};
        angularFireAuth.logout();
    };

    $scope.emailText = "Email"
    $scope.passwordText = "Password"
    $scope.confirmPasswordText = "Confirm Password"

    $scope.register = function() {
        $scope.loginMessage = "";
        if ((angular.isDefined($scope.email) && $scope.email != "") && (angular.isDefined($scope.password0) && $scope.password0 != "" && $scope.password0 == $scope.password1)) {
            $scope.loginBusy = true;
            angularFireAuth.createUser($scope.email, $scope.password0, function(err, user) {
                if (user) {
                    console.log('New User Registered');
                }
                $scope.loginBusy = false;
            });
        } else  {
            $scope.password0 =""
            $scope.password1 =""
            $scope.passwordText = "Password Not Matching"
            $scope.confirmPasswordText = "Password Not Matching"
        }
    };

    $scope.$on('angularFireAuth:login', function(evt, user) {
        $scope.loginBusy = false;
        $scope.user = user;
        console.log("User is Logged In");
        angularFire(ref.child('users/' + $scope.user.id), $scope, 'userData').then(function(disassociate) {
            $scope.userData.name = $scope.userData.name || {};
            if (!$scope.userData.name.first) {
                $scope.greeting = "Hello!";
            } else {
                $scope.greeting = "Hello, " + $scope.userData.name.first + "!";
            }
            $scope.disassociateUserData = function() {
                disassociate();
            };
        });
    });

    $scope.$on('angularFireAuth:logout', function(evt) {
        $scope.loginBusy = false;
        $scope.user = {};
        console.log('User is Logged Out');
    });

    $scope.$on('angularFireAuth:error', function(evt, err) {
        $scope.greeting = "";
        $scope.loginBusy = false;
        $scope.loginMessage = "";
        console.log('Error: ' + err.code);
        switch(err.code) {
            case 'EMAIL_TAKEN':
                $scope.loginMessage = "That email address is already registered!";
                break;
            case 'INVALID_PASSWORD':
                $scope.loginMessage = "Invalid username + password";
        }
    });
})

Output:

Error: [$injector:unpr] Unknown provider: angularFireProvider <- angularFire
http://errors.angularjs.org/1.3.0-rc.3/$injector/unpr?p0=angularFireProvider%20%3C-%20angularFire
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:80:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3938:19
    at Object.getService [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3943:45
    at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
    at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4103:13)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4123:23)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7771:28
    at link (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js:938:26)
    at invokeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7549:9) <div ng-view="" class="ng-scope">
  (anonymous function)  angular.js:10683
  (anonymous function)  angular.js:7858
  invokeLinkFn  angular.js:7551
  nodeLinkFn    angular.js:7069
  compositeLinkFn   angular.js:6441
  publicLinkFn  angular.js:6320
  boundTranscludeFn angular.js:6461
  controllersBoundTransclude    angular.js:7096
  update    angular-route.js:896
  Scope.$broadcast  angular.js:13751
  (anonymous function)  angular-route.js:579
  processQueue  angular.js:12234
  (anonymous function)  angular.js:12250
  Scope.$eval   angular.js:13436
  Scope.$digest angular.js:13248
  Scope.$apply  angular.js:13540
  done  angular.js:8884
  completeRequest   angular.js:9099
  xhr.onreadystatechange    angular.js:9038

I cant figure out what the problem is. However i think there is something wrong with: but i can't tell. If more information is needed i'm happy to post it.

I simply bind the user to the scope with $scope.auth = $firebaseSimpleLogin(new Firebase(FBURL)); and then <div ng-show="auth.user">. See github.com/puf/trenches/blob/master/app.js#L10 and further down. — Frank van Puffelen
– Frank van Puffelen, Commented Oct 13, 2014 at 14:35
Im not sure if i'm overcomplicating things. Maybe i should have a look angularfire-seed instead? — seb
– seb, Commented Oct 13, 2014 at 14:39
Could be, but I simply rolled my own. The (currently) 137 lines of JavaScript I linked above is a fully functional Firebase application. If the angularfire-seed is longer, feel free to start from mine (and strip the custom directives from it). — Frank van Puffelen
– Frank van Puffelen, Commented Oct 13, 2014 at 14:41
They do have github.com/firebase/angularfire-seed/blob/master/app/js/… i figure i could just take that with some minor modifications. Not sure how i will do this the best way yet though. — seb
– seb, Commented Oct 13, 2014 at 14:49
The best way is the one that works. :-) It's important to understand the code that you copy/paste, unless you want to depend on the original creator's willingness/availability to help. I think your biggest problem is that you're thinking code-first instead of view-first, as angular seems to prefer. — Frank van Puffelen
– Frank van Puffelen, Commented Oct 13, 2014 at 14:58

Frank van Puffelen · Accepted Answer · 2014-10-13 20:52:57Z

I initially was taking the same if-then-else approach as you do for handling privileged actions. But it turns out this is not the best approach when using Angular. Instead of having this if-then-else approach, try to reframe the problem to a solution that isolates the privileged code.

show a certain button if the user is logged in

So your original question was about showing an HTML element only when the user if logged in, which is easy with something like this in your controller:

$scope.auth = $firebaseSimpleLogin(new Firebase(FBURL));

This line binds the Firebase login status to the current scope, which makes it available to the view. No if-then-else is needed, since there is always a login status. AngularFire ensure that the view gets notified when that status changes, so all we have to do is ensure that we have the HTML markup to handle both presence and absence of authenticated users:

<div ng-controller="TrenchesCtrl" class='auth'>
    <div ng-show="auth.user">
        <p>You are logged in as <i class='fa fa-{{auth.user.provider}}'></i> {{auth.user.displayName}}</p>
        <button ng-click="auth.$logout()">Logout</button>
    </div>
    <div ng-hide="auth.user">
        <p>Welcome, please log in.</p>
        <button ng-click="auth.$login('twitter')">Login with <i class='fa fa-twitter'> Twitter</i></button>
        <button ng-click="auth.$login('github')">Login with <i class='fa fa-github'> GitHub</i></button>
    </div>
</div>

See how it almost reads like an if-then-else? But then one without me writing code that tries to detect if the user is logged in. It is all declaratively handled by AngularJS and AngularFire.

perform actions only when a user is logged in

When you actually need to perform a privileged action, I've found it easiest to isolate the code like this:

function updateCard(id, update) {
    var auth = $firebaseSimpleLogin(new Firebase(FBURL));
    auth.$getCurrentUser().then(function(user) {
        update.owned_by = user.username;
        var sync = $firebase(ref.child('cards').child(id));
        sync.$update(update);
    });
};

Note that these are (simplified) fragments from my Trenches app (demo), which I wrote to learn more about Angular and AngularFire.

Collectives™ on Stack Overflow

AngularJS call Firebase uid from controller

1 Answer 1

show a certain button if the user is logged in

perform actions only when a user is logged in

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

show a certain button if the user is logged in

perform actions only when a user is logged in

Comments

Your Answer

Sign up or log in

Post as a guest

Related