CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfirefirebasesimplelogin
seb
seb

Reputation: 55

AngularJS call Firebase uid from controller

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.

Upvotes: 1

Views: 844

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 600131

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.

Upvotes: 1

Related Questions