I am using Auth0 which allows me to retrieve user profile information once the login pletes as follows:

<span>Name is {{auth.profile.nickname}}</span>

// UserInfoCtrl.js
function UserInfoCtrl($scope, auth) {
  $scope.auth = auth;
}

What I want to do is use ng-show and ng-hide to only show content once a user is logged in. How have others achieved this? I was envisioning something like a conditional statement within my UserInfoCtrl.js such as:

if($scope.auth !== null) {
  $scope.loggedin
}

UPDATE: Per the ment about falselys and that $scope.auth provides some value, perhaps it is better to tie something to the Login controller. Any ideas?

// Login and logout functionality
pfcControllers.controller('loginCtrl', ['$scope', 'auth', '$location', 'store', function ($scope, auth, $location, store) {
$scope.login = function () {
    auth.signin({}, function (profile, token) {
        store.set('profile', profile);
        store.set('token', token);
        $location.path("/");
    }, function (error) {
        console.log("There was an error logging in", error);
    });
}

$scope.logout = function () {
    auth.signout();
    store.remove('profile');
    store.remove('token');
    $location.path('/login');
}
}]);

I am using Auth0 which allows me to retrieve user profile information once the login pletes as follows:

<span>Name is {{auth.profile.nickname}}</span>

// UserInfoCtrl.js
function UserInfoCtrl($scope, auth) {
  $scope.auth = auth;
}

What I want to do is use ng-show and ng-hide to only show content once a user is logged in. How have others achieved this? I was envisioning something like a conditional statement within my UserInfoCtrl.js such as:

if($scope.auth !== null) {
  $scope.loggedin
}

UPDATE: Per the ment about falselys and that $scope.auth provides some value, perhaps it is better to tie something to the Login controller. Any ideas?

// Login and logout functionality
pfcControllers.controller('loginCtrl', ['$scope', 'auth', '$location', 'store', function ($scope, auth, $location, store) {
$scope.login = function () {
    auth.signin({}, function (profile, token) {
        store.set('profile', profile);
        store.set('token', token);
        $location.path("/");
    }, function (error) {
        console.log("There was an error logging in", error);
    });
}

$scope.logout = function () {
    auth.signout();
    store.remove('profile');
    store.remove('token');
    $location.path('/login');
}
}]);

• javascript
• angularjs

• 2 ng-show="auth" - if $scope.auth is falsy it won't show. Altho you should really be hiding and showing from the server, anyone can edit the HTML. – tymeJV Commented Jan 12, 2015 at 14:47

3 Answers 3

If $scope.auth has a value only when the user is logged in you could do:

<span ng-show="auth">Name is {{auth.profile.nickname}}</span>

That way, you'll only see the span if auth is defined.

For security reasons, I think your server should send the content of the logged area only when the user is logged.

However if, for some reason, you want do this control on the logged area you have some alternatives:

1. Use ng-show="auth" on your element. It will display or hide the element, according to the 'auth' value. The element is never removed from the DOM, the frameworky simply add or remove a css class;
2. Use ng-if="auth" on your element. It will add or remove the element according to the auth value. The element is entirely removed if auth evaluates to false;

Both ng-show and ng-if receive an expression, the reference is here.

Try do:

1. on your controller method create: $scope.loggedin = false;
2. update $scope.loggedin value where it can be changed;
3. on the html use ng-show="loggedin" or ng-if="loggedin";
4. if the functions that changes the loggedin value was not called from angular (events...), try do $scope.$apply(function(){ .... }). See here

The simplest way to do that is putting this in your view code:

<div ng-show='auth'></div>

Now, this is not the best practice, I would remend you to use tokens, here is post about tokens in angular

note: this is not a valid JS syntax:

  if($scope.auth is not null {
     $scope.loggedin
  }

use this instead:

  if($scope.auth != null) {
    $scope.loggedin
 }