A service and several directives based on ng-cloak, which wait for angularFire to finish authenticating--rather than just until Angular bootstraps--before displaying it's content. Handy to get rid of those blips that display when user isn't logged in--oh, wait, now they are.

ngCloakAuth.js

app.directive('ngCloakAuth', function($rootScope) {
    var notLoggedInYet = true;
    return {
        restrict: 'A',
        compile: function(el) {
            el.toggleClass('hide', notLoggedInYet);
            function fn() {
                notLoggedInYet = false;
                el.removeClass('hide'); 
            }
            $rootScope.$on("angularFireAuth:login", fn);
            $rootScope.$on("angularFireAuth:logout", fn);
            $rootScope.$on("angularFireAuth:error", fn);
        }
    }
});
    

ngShowAuth.js

app.directive('ngShowAuth', function($rootScope) {
    return {
        restrict: 'A',
        compile: function(el, attr) {
            var hasUser = !!$rootScope.user;
            var state = attr.ngShowAuth;
            el.toggleClass('hide', state === 'error' || (!hasUser && state === 'login') || (hasUser && state === 'logout') );
            function show() { el.removeClass('hide'); }
            function hide() { el.addClass('hide'); }
            $rootScope.$on("angularFireAuth:login", state === 'login'? show : hide);
            $rootScope.$on("angularFireAuth:logout", state === 'logout'? show : hide);
            $rootScope.$on("angularFireAuth:error", state === 'error'? show : hide);
       }
    }
});

usage.examples.html

<style>
  .hide { display: none; }
</style>

<div ng-cloak-auth>Authentication has resolved.</div>

<div ng-show-auth="login">{{user.id}} is logged in</div>

<div ng-show-auth="logout">Logged out</div>

<div ng-show-auth="error">An error occurred during authentication</div>

Updated for AngularFire 0.6 (releasing this coming week)

Seriously. Killer. Thanks!

Upgraded this to work a bit more reliably. Is also now a drag-and-drop plugin suitable for angularFire, angularFire-seed, and generator-angularfire installs.

Sometimes $firebaseSimpleLogin:logout fires before waitForAuth being registered then that promise is never resolved and ng-show-auth is never showed.

@katowulf do u know what could be the problem?

I solve this calling waitForAuth service into app run()

waitForAuth is 'undefined' when I try calling it from my controller, even though I have included 'simpleLoginTools' as a dependency for my app module.

Any ideas?

Hi, I'm having issues with this module and ui-router. I have view setup like this:

app.config(['$stateProvider',
    function($stateProvider) {
      $stateProvider.state('home', {
        url: '/home',
        views: {
          "main": {
            controller: 'HomeController',
            templateUrl: 'home/home.tpl.html'
          },
          "top-nav": {
            controller: 'HomeController',
            templateUrl: 'home/home-topNav.tpl.html'
          }
        },
        data: {
          pageTitle: 'Home'
        },
        resolve: {
          currentUser: ["simpleLogin",
            function(simpleLogin) {
              // $getCurrentUser returns a promise so the resolve waits for it to complete
              return simpleLogin.getCurrentUser();
            }
          ]

        }
      });
    }
  ]);

My top-nav template looks like this:

<nav class="navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="home">Home</a>
    </div>
    <div class="control-group nav navbar-nav navbar-right">
      <button class="btn btn-default navbar-btn" ng-cloak ng-show-auth="['logout','error']" ui-sref="login">Log In</button>
      <button class="btn btn-default navbar-btn" ng-cloak ng-show-auth="login" ng-controller="LoginController" ng-click="logout()">Log Out</button>
      <button class="btn btn-default navbar-btn" ng-cloak ng-show-auth="login" ng-click="createStory()">Create Story</button>
    </div>
  </div>
</nav>

The problem is that ng-show-auth directives are not working. They resolve to 'logout' state even though the user is logged in. When I remove 'resolve' from my route state config, directives work fine. Can you help please?