katowulf · March 3, 2016 04:26 · Feb 19, 2014 · Jan 9, 2014 · Jan 9, 2014 · Jan 9, 2014
diff --git a/module.simpleLoginTools.js b/module.simpleLoginTools.js
@@ -0,0 +1,146 @@
+'use strict';
+
+/**
+ * This module monitors angularFire's authentication and performs actions based on authentication state.
+ * directives/directive.ngcloakauth.js depends on this file
+ *
+ * Modify ng-cloak to hide content until FirebaseSimpleLogin resolves. Also
+ * provides ng-show-auth methods for displaying content only when certain login
+ * states are active.
+ *
+ * Just like other ng-cloak ops, this works best if you put the following into your CSS:
+ [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+        display: none !important;
+   }
+ *
+ * See usage examples here: https://gist.github.com/katowulf/7328023
+ */
+angular.module('simpleLoginTools', [])
+
+/**
+ * A service that returns a promise object, which is resolved once $firebaseSimpleLogin
+ * is initialized.
+ *
+ * <code>
+ *    function(waitForAuth) {
+ *        waitForAuth.then(function() {
+ *            console.log('auth initialized');
+ *        });
+ *    }
+ * </code>
+ */
+  .service('waitForAuth', function($rootScope, $q, $timeout) {
+    function fn(err) {
+      if($rootScope.auth) {
+        $rootScope.auth.error = err instanceof Error? err.toString() : null;
+      }
+      for(var i=0; i < subs.length; i++) { subs[i](); }
+      $timeout(function() {
+        // force $scope.$apply to be re-run after login resolves
+        def.resolve();
+      });
+    }
+
+    var def = $q.defer(), subs = [];
+    subs.push($rootScope.$on('$firebaseSimpleLogin:login', fn));
+    subs.push($rootScope.$on('$firebaseSimpleLogin:logout', fn));
+    subs.push($rootScope.$on('$firebaseSimpleLogin:error', fn));
+    return def.promise;
+  })
+
+/**
+ * A directive that wraps ng-cloak so that, instead of simply waiting for Angular to compile, it waits until
+ * waitForAuth resolves (in other words, until the user's login status resolves via Firebase)
+ *
+ * <code>
+ *    <div ng-cloak>Authentication has resolved.</div>
+ * </code>
+ */
+  .config(function($provide) {
+    // adapt ng-cloak to wait for auth before it does its magic
+    $provide.decorator('ngCloakDirective', function($delegate, waitForAuth) {
+      var directive = $delegate[0];
+      // make a copy of the old directive
+      var _compile = directive.compile;
+      directive.compile = function(element, attr) {
+        waitForAuth.then(function() {
+          // after auth, run the original ng-cloak directive
+          _compile.call(directive, element, attr);
+        });
+      };
+      // return the modified directive
+      return $delegate;
+    });
+  })
+
+/**
+ * A directive that shows elements only when the given authentication state is in effect
+ *
+ * <code>
+ *    <div ng-show-auth="login">{{auth.user.id}} is logged in</div>
+ *    <div ng-show-auth="logout">Logged out</div>
+ *    <div ng-show-auth="error">An error occurred: {{auth.error}}</div>
+ *    <div ng-show-auth="logout,error">This appears for logout or for error condition!</div>
+ * </code>
+ */
+  .directive('ngShowAuth', function ($rootScope) {
+    var loginState = 'logout';
+    $rootScope.$on('$firebaseSimpleLogin:login',  function() { loginState = 'login'; });
+    $rootScope.$on('$firebaseSimpleLogin:logout', function() { loginState = 'logout'; });
+    $rootScope.$on('$firebaseSimpleLogin:error',  function() { loginState = 'error'; });
+
+    function getExpectedState(scope, attr) {
+      var expState = scope.$eval(attr);
+      if( typeof(expState) !== 'string' && !angular.isArray(expState) ) {
+        expState = attr;
+      }
+      if( typeof(expState) === 'string' ) {
+        expState = expState.split(',');
+      }
+      return expState;
+    }
+
+    function inList(needle, list) {
+      var res = false;
+      angular.forEach(list, function(x) {
+        if( x === needle ) {
+          res = true;
+          return true;
+        }
+        return false;
+      });
+      return res;
+    }
+
+    function assertValidStates(states) {
+      if( !states.length ) {
+        throw new Error('ng-show-auth directive must be login, logout, or error (you may use a comma-separated list)');
+      }
+      angular.forEach(states, function(s) {
+        if( !inList(s, ['login', 'logout', 'error']) ) {
+          throw new Error('Invalid state "'+s+'" for ng-show-auth directive, must be one of login, logout, or error');
+        }
+      });
+      return true;
+    }
+
+    return {
+      restrict: 'A',
+      link: function(scope, el, attr) {
+        var expState = getExpectedState(scope, attr.ngShowAuth);
+        assertValidStates(expState);
+        function fn() {
+          var show = inList(loginState, expState);
+          // sometimes if ngCloak exists on same element, they argue, so make sure that
+          // this one always runs last for reliability
+          setTimeout(function() {
+            el.toggleClass('ng-cloak', !show);
+          }, 0);
+        }
+        fn();
+        $rootScope.$on('$firebaseSimpleLogin:login',  fn);
+        $rootScope.$on('$firebaseSimpleLogin:logout', fn);
+        $rootScope.$on('$firebaseSimpleLogin:error',  fn);
+      }
+    };
+  });
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -1,92 +0,0 @@
-/**
- * This module monitors angularFire's authentication and performs actions based on authentication state.
- *
- * See usage examples here: https://gist.github.com/katowulf/7328023
- */
-angular.module('waitForAuth', [])
-
-/**
- * A service that returns a promise object, which is resolved once $firebaseSimpleLogin
- * is initialized (i.e. it returns login, logout, or error)
- */
-   .service('waitForAuth', function($rootScope, $q, $timeout) {
-      var def = $q.defer(), subs = [];
-      subs.push($rootScope.$on('$firebaseSimpleLogin:login', fn));
-      subs.push($rootScope.$on('$firebaseSimpleLogin:logout', fn));
-      subs.push($rootScope.$on('$firebaseSimpleLogin:error', fn));
-      function fn(err) {
-         if( $rootScope.auth ) {
-            $rootScope.auth.error = err instanceof Error? err.toString() : null;
-         }
-         for(var i=0; i < subs.length; i++) { subs[i](); }
-         $timeout(function() {
-            // force $scope.$apply to be re-run after login resolves
-            def.resolve();
-         });
-      }
-      return def.promise;
-   })
-
-/**
- * A directive that hides the element from view until waitForAuth resolves
- */
-   .directive('ngCloakAuth', function(waitForAuth) {
-      return {
-         restrict: 'A',
-         compile: function(el) {
-            el.addClass('hide');
-            waitForAuth.then(function() {
-               el.removeClass('hide');
-            })
-         }
-      }
-   })
-
-/**
- * A directive that shows elements only when the given authentication state is in effect
- */
-   .directive('ngShowAuth', function($rootScope) {
-      var loginState;
-      $rootScope.$on("$firebaseSimpleLogin:login",  function() { loginState = 'login' });
-      $rootScope.$on("$firebaseSimpleLogin:logout", function() { loginState = 'logout' });
-      $rootScope.$on("$firebaseSimpleLogin:error",  function() { loginState = 'error' });
-      function inList(needle, list) {
-         var res = false;
-         angular.forEach(list, function(x) {
-            if( x === needle ) {
-               res = true;
-               return true;
-            }
-            return false;
-         });
-         return res;
-      }
-      function assertValidState(state) {
-         if( !state ) {
-            throw new Error('ng-show-auth directive must be login, logout, or error (you may use a comma-separated list)');
-         }
-         var states = (state||'').split(',');
-         angular.forEach(states, function(s) {
-            if( !inList(s, ['login', 'logout', 'error']) ) {
-               throw new Error('Invalid state "'+s+'" for ng-show-auth directive, must be one of login, logout, or error');
-            }
-         });
-         return true;
-      }
-      return {
-         restrict: 'A',
-         compile: function(el, attr) {
-            assertValidState(attr.ngShowAuth);
-            var expState = (attr.ngShowAuth||'').split(',');
-            function fn(newState) {
-               loginState = newState;
-               var hide = !inList(newState, expState);
-               el.toggleClass('hide', hide );
-            }
-            fn(loginState);
-            $rootScope.$on("$firebaseSimpleLogin:login",  function() { fn('login') });
-            $rootScope.$on("$firebaseSimpleLogin:logout", function() { fn('logout') });
-            $rootScope.$on("$firebaseSimpleLogin:error",  function() { fn('error') });
-         }
-      }
-   });

diff --git a/usage.examples.html b/usage.examples.html
@@ -1,10 +1,12 @@
 <style>
-  .hide { display: none; }
+  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+    display: none !important;
+  }
 </style>
 
 <script>
   // include the waitForAuth module as a dependency
-  angular.module('myApp', ['waitForAuth'])
+  angular.module('myApp', ['simpleLoginTools'])
 
   // you can use waitForAuth directly from your scripts
   .controller('myController', function(waitForAuth) {
@@ -14,13 +16,16 @@
   })
 </script>
 
-<!-- and you can use the directives in your views -->
-<div ng-cloak-auth>Authentication has resolved.</div>
+<!-- ng-cloak now waits for simple login to resolve -->
+<div ng-cloak>Authentication has resolved.</div>
 
-<div ng-show-auth="login">{{auth.user.id}} is logged in</div>
+<!-- using a string -->
+<div ng-show-auth="'login'">{{auth.user.id}} is logged in</div>
 
-<div ng-show-auth="logout">Logged out</div>
+<!-- using a $scope variable which equals 'login', 'logout', 'error', or an array of those -->
+<div ng-show-auth="variable_name">Logged out</div>
 
-<div ng-show-auth="error">An error occurred: {{auth.error}}</div>
+<div ng-show-auth="'error'">An error occurred: {{auth.error}}</div>
 
-<div ng-show-auth="logout,error">This appears for logout or for error condition!</div>
+<!-- using an array -->
+<div ng-show-auth="['logout','error']">This appears for logout or for error condition!</div>
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -50,13 +50,24 @@ angular.module('waitForAuth', [])
       $rootScope.$on("$firebaseSimpleLogin:login",  function() { loginState = 'login' });
       $rootScope.$on("$firebaseSimpleLogin:logout", function() { loginState = 'logout' });
       $rootScope.$on("$firebaseSimpleLogin:error",  function() { loginState = 'error' });
+      function inList(needle, list) {
+         var res = false;
+         angular.forEach(list, function(x) {
+            if( x === needle ) {
+               res = true;
+               return true;
+            }
+            return false;
+         });
+         return res;
+      }
       function assertValidState(state) {
          if( !state ) {
             throw new Error('ng-show-auth directive must be login, logout, or error (you may use a comma-separated list)');
          }
          var states = (state||'').split(',');
          angular.forEach(states, function(s) {
-            if( s !== 'login' && s !== 'logout' && s !== 'error' ) {
+            if( !inList(s, ['login', 'logout', 'error']) ) {
                throw new Error('Invalid state "'+s+'" for ng-show-auth directive, must be one of login, logout, or error');
             }
          });
@@ -69,7 +80,8 @@ angular.module('waitForAuth', [])
             var expState = (attr.ngShowAuth||'').split(',');
             function fn(newState) {
                loginState = newState;
-               el.toggleClass('hide', loginState !== expState );
+               var hide = !inList(newState, expState);
+               el.toggleClass('hide', hide );
             }
             fn(loginState);
             $rootScope.$on("$firebaseSimpleLogin:login",  function() { fn('login') });

diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -50,10 +50,23 @@ angular.module('waitForAuth', [])
       $rootScope.$on("$firebaseSimpleLogin:login",  function() { loginState = 'login' });
       $rootScope.$on("$firebaseSimpleLogin:logout", function() { loginState = 'logout' });
       $rootScope.$on("$firebaseSimpleLogin:error",  function() { loginState = 'error' });
+      function assertValidState(state) {
+         if( !state ) {
+            throw new Error('ng-show-auth directive must be login, logout, or error (you may use a comma-separated list)');
+         }
+         var states = (state||'').split(',');
+         angular.forEach(states, function(s) {
+            if( s !== 'login' && s !== 'logout' && s !== 'error' ) {
+               throw new Error('Invalid state "'+s+'" for ng-show-auth directive, must be one of login, logout, or error');
+            }
+         });
+         return true;
+      }
       return {
          restrict: 'A',
          compile: function(el, attr) {
-            var expState = attr.ngShowAuth;
+            assertValidState(attr.ngShowAuth);
+            var expState = (attr.ngShowAuth||'').split(',');
             function fn(newState) {
                loginState = newState;
                el.toggleClass('hide', loginState !== expState );

diff --git a/usage.examples.html b/usage.examples.html
@@ -21,4 +21,6 @@
 
 <div ng-show-auth="logout">Logged out</div>
 
-<div ng-show-auth="error">An error occurred: {{auth.error}}</div>
+<div ng-show-auth="error">An error occurred: {{auth.error}}</div>
+
+<div ng-show-auth="logout,error">This appears for logout or for error condition!</div>
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -6,14 +6,14 @@
 angular.module('waitForAuth', [])
 
 /**
- * A service that returns a promise object, which is resolved once $firebaseAuth
+ * A service that returns a promise object, which is resolved once $firebaseSimpleLogin
  * is initialized (i.e. it returns login, logout, or error)
  */
    .service('waitForAuth', function($rootScope, $q, $timeout) {
       var def = $q.defer(), subs = [];
-      subs.push($rootScope.$on('$firebaseAuth:login', fn));
-      subs.push($rootScope.$on('$firebaseAuth:logout', fn));
-      subs.push($rootScope.$on('$firebaseAuth:error', fn));
+      subs.push($rootScope.$on('$firebaseSimpleLogin:login', fn));
+      subs.push($rootScope.$on('$firebaseSimpleLogin:logout', fn));
+      subs.push($rootScope.$on('$firebaseSimpleLogin:error', fn));
       function fn(err) {
          if( $rootScope.auth ) {
             $rootScope.auth.error = err instanceof Error? err.toString() : null;
@@ -47,9 +47,9 @@ angular.module('waitForAuth', [])
  */
    .directive('ngShowAuth', function($rootScope) {
       var loginState;
-      $rootScope.$on("$firebaseAuth:login",  function() { loginState = 'login' });
-      $rootScope.$on("$firebaseAuth:logout", function() { loginState = 'logout' });
-      $rootScope.$on("$firebaseAuth:error",  function() { loginState = 'error' });
+      $rootScope.$on("$firebaseSimpleLogin:login",  function() { loginState = 'login' });
+      $rootScope.$on("$firebaseSimpleLogin:logout", function() { loginState = 'logout' });
+      $rootScope.$on("$firebaseSimpleLogin:error",  function() { loginState = 'error' });
       return {
          restrict: 'A',
          compile: function(el, attr) {
@@ -59,9 +59,9 @@ angular.module('waitForAuth', [])
                el.toggleClass('hide', loginState !== expState );
             }
             fn(loginState);
-            $rootScope.$on("$firebaseAuth:login",  function() { fn('login') });
-            $rootScope.$on("$firebaseAuth:logout", function() { fn('logout') });
-            $rootScope.$on("$firebaseAuth:error",  function() { fn('error') });
+            $rootScope.$on("$firebaseSimpleLogin:login",  function() { fn('login') });
+            $rootScope.$on("$firebaseSimpleLogin:logout", function() { fn('logout') });
+            $rootScope.$on("$firebaseSimpleLogin:error",  function() { fn('error') });
          }
       }
    });
diff --git a/usage.examples.html b/usage.examples.html
@@ -17,7 +17,7 @@
 <!-- and you can use the directives in your views -->
 <div ng-cloak-auth>Authentication has resolved.</div>
 
-<div ng-show-auth="login">{{user.id}} is logged in</div>
+<div ng-show-auth="login">{{auth.user.id}} is logged in</div>
 
 <div ng-show-auth="logout">Logged out</div>
 

diff --git a/usage.examples.html b/usage.examples.html
@@ -21,4 +21,4 @@
 
 <div ng-show-auth="logout">Logged out</div>
 
-<div ng-show-auth="error">An error occurred during authentication</div>
+<div ng-show-auth="error">An error occurred: {{auth.error}}</div>
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -1,6 +1,7 @@
 /**
  * This module monitors angularFire's authentication and performs actions based on authentication state.
-
+ *
+ * See usage examples here: https://gist.github.com/katowulf/7328023
  */
 angular.module('waitForAuth', [])
 
@@ -13,7 +14,10 @@ angular.module('waitForAuth', [])
       subs.push($rootScope.$on('$firebaseAuth:login', fn));
       subs.push($rootScope.$on('$firebaseAuth:logout', fn));
       subs.push($rootScope.$on('$firebaseAuth:error', fn));
-      function fn() {
+      function fn(err) {
+         if( $rootScope.auth ) {
+            $rootScope.auth.error = err instanceof Error? err.toString() : null;
+         }
          for(var i=0; i < subs.length; i++) { subs[i](); }
          $timeout(function() {
             // force $scope.$apply to be re-run after login resolves
@@ -43,6 +47,9 @@ angular.module('waitForAuth', [])
  */
    .directive('ngShowAuth', function($rootScope) {
       var loginState;
+      $rootScope.$on("$firebaseAuth:login",  function() { loginState = 'login' });
+      $rootScope.$on("$firebaseAuth:logout", function() { loginState = 'logout' });
+      $rootScope.$on("$firebaseAuth:error",  function() { loginState = 'error' });
       return {
          restrict: 'A',
          compile: function(el, attr) {
@@ -51,7 +58,7 @@ angular.module('waitForAuth', [])
                loginState = newState;
                el.toggleClass('hide', loginState !== expState );
             }
-            fn(null);
+            fn(loginState);
             $rootScope.$on("$firebaseAuth:login",  function() { fn('login') });
             $rootScope.$on("$firebaseAuth:logout", function() { fn('logout') });
             $rootScope.$on("$firebaseAuth:error",  function() { fn('error') });

diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -1,58 +1,60 @@
+/**
+ * This module monitors angularFire's authentication and performs actions based on authentication state.
+
+ */
 angular.module('waitForAuth', [])
 
 /**
- * A service that returns a promise object, which is resolved once angularFireAuth
+ * A service that returns a promise object, which is resolved once $firebaseAuth
  * is initialized (i.e. it returns login, logout, or error)
  */
-.service('waitForAuth', function($rootScope, $q, $timeout) {
-    var def = $q.defer(), subs = [];
-    subs.push($rootScope.$on('angularFireAuth:login', fn));
-    subs.push($rootScope.$on('angularFireAuth:logout', fn));
-    subs.push($rootScope.$on('angularFireAuth:error', fn));
-    function fn() {
-       for(var i=0; i < subs.length; i++) { subs[i](); }
-       $timeout(function() {
-           // force $scope.$apply to be re-run after login resolves
-           def.resolve();
-       });
-    }
-    return def.promise;
-})
+   .service('waitForAuth', function($rootScope, $q, $timeout) {
+      var def = $q.defer(), subs = [];
+      subs.push($rootScope.$on('$firebaseAuth:login', fn));
+      subs.push($rootScope.$on('$firebaseAuth:logout', fn));
+      subs.push($rootScope.$on('$firebaseAuth:error', fn));
+      function fn() {
+         for(var i=0; i < subs.length; i++) { subs[i](); }
+         $timeout(function() {
+            // force $scope.$apply to be re-run after login resolves
+            def.resolve();
+         });
+      }
+      return def.promise;
+   })
 
 /**
  * A directive that hides the element from view until waitForAuth resolves
  */
-.directive('ngCloakAuth', function(waitForAuth) {
-   return {
-       restrict: 'A',
-       compile: function(el) {
-           console.log('waiting');
-           el.addClass('hide');
-           waitForAuth.then(function() {
+   .directive('ngCloakAuth', function(waitForAuth) {
+      return {
+         restrict: 'A',
+         compile: function(el) {
+            el.addClass('hide');
+            waitForAuth.then(function() {
                el.removeClass('hide');
-           })
-       }
-   }
-})
+            })
+         }
+      }
+   })
 
 /**
  * A directive that shows elements only when the given authentication state is in effect
  */
-.directive('ngShowAuth', function($rootScope) {
-    var loginState;
-    return {
-        restrict: 'A',
-        compile: function(el, attr) {
+   .directive('ngShowAuth', function($rootScope) {
+      var loginState;
+      return {
+         restrict: 'A',
+         compile: function(el, attr) {
             var expState = attr.ngShowAuth;
             function fn(newState) {
-                loginState = newState;
-                el.toggleClass('hide', loginState !== expState );
+               loginState = newState;
+               el.toggleClass('hide', loginState !== expState );
             }
             fn(null);
-            $rootScope.$on("angularFireAuth:login",  function() { fn('login') });
-            $rootScope.$on("angularFireAuth:logout", function() { fn('logout') });
-            $rootScope.$on("angularFireAuth:error",  function() { fn('error') });
-        }
-    }
-});
-
+            $rootScope.$on("$firebaseAuth:login",  function() { fn('login') });
+            $rootScope.$on("$firebaseAuth:logout", function() { fn('logout') });
+            $rootScope.$on("$firebaseAuth:error",  function() { fn('error') });
+         }
+      }
+   });
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -1,16 +1,57 @@
-app.directive('ngCloakAuth', function($rootScope) {
-    var notLoggedInYet = true;
+angular.module('waitForAuth', [])
+
+/**
+ * A service that returns a promise object, which is resolved once angularFireAuth
+ * is initialized (i.e. it returns login, logout, or error)
+ */
+.service('waitForAuth', function($rootScope, $q, $timeout) {
+    var def = $q.defer(), subs = [];
+    subs.push($rootScope.$on('angularFireAuth:login', fn));
+    subs.push($rootScope.$on('angularFireAuth:logout', fn));
+    subs.push($rootScope.$on('angularFireAuth:error', fn));
+    function fn() {
+       for(var i=0; i < subs.length; i++) { subs[i](); }
+       $timeout(function() {
+           // force $scope.$apply to be re-run after login resolves
+           def.resolve();
+       });
+    }
+    return def.promise;
+})
+
+/**
+ * A directive that hides the element from view until waitForAuth resolves
+ */
+.directive('ngCloakAuth', function(waitForAuth) {
+   return {
+       restrict: 'A',
+       compile: function(el) {
+           console.log('waiting');
+           el.addClass('hide');
+           waitForAuth.then(function() {
+               el.removeClass('hide');
+           })
+       }
+   }
+})
+
+/**
+ * A directive that shows elements only when the given authentication state is in effect
+ */
+.directive('ngShowAuth', function($rootScope) {
+    var loginState;
     return {
         restrict: 'A',
-        compile: function(el) {
-            el.toggleClass('hide', notLoggedInYet);
-            function fn() {
-                notLoggedInYet = false;
-                el.removeClass('hide'); 
+        compile: function(el, attr) {
+            var expState = attr.ngShowAuth;
+            function fn(newState) {
+                loginState = newState;
+                el.toggleClass('hide', loginState !== expState );
             }
-            $rootScope.$on("angularFireAuth:login", fn);
-            $rootScope.$on("angularFireAuth:logout", fn);
-            $rootScope.$on("angularFireAuth:error", fn);
+            fn(null);
+            $rootScope.$on("angularFireAuth:login",  function() { fn('login') });
+            $rootScope.$on("angularFireAuth:logout", function() { fn('logout') });
+            $rootScope.$on("angularFireAuth:error",  function() { fn('error') });
         }
     }
 });

diff --git a/ngShowAuth.js b/ngShowAuth.js
@@ -1,17 +0,0 @@
-app.directive('ngShowAuth', function($rootScope) {
-    var loginState;
-    return {
-        restrict: 'A',
-        compile: function(el, attr) {
-            var expState = attr.ngShowAuth;
-            function fn(newState) {
-                loginState = newState;
-                el.toggleClass('hide', loginState !== expState );
-            }
-            fn(null);
-            $rootScope.$on("angularFireAuth:login",  function() { fn('login') });
-            $rootScope.$on("angularFireAuth:logout", function() { fn('logout') });
-            $rootScope.$on("angularFireAuth:error",  function() { fn('error') });
-        }
-    }
-});

diff --git a/usage.examples.html b/usage.examples.html
@@ -2,6 +2,19 @@
   .hide { display: none; }
 </style>
 
+<script>
+  // include the waitForAuth module as a dependency
+  angular.module('myApp', ['waitForAuth'])
+
+  // you can use waitForAuth directly from your scripts
+  .controller('myController', function(waitForAuth) {
+     waitForAuth.then(function() {
+         /* do something after auth completes */
+     })
+  })
+</script>
+
+<!-- and you can use the directives in your views -->
 <div ng-cloak-auth>Authentication has resolved.</div>
 
 <div ng-show-auth="login">{{user.id}} is logged in</div>

diff --git a/ngShowAuth.js b/ngShowAuth.js
@@ -9,9 +9,9 @@ app.directive('ngShowAuth', function($rootScope) {
                 el.toggleClass('hide', loginState !== expState );
             }
             fn(null);
-            $rootScope.$on("angularFireAuth:login", function() { fn('login') });
+            $rootScope.$on("angularFireAuth:login",  function() { fn('login') });
             $rootScope.$on("angularFireAuth:logout", function() { fn('logout') });
-            $rootScope.$on("angularFireAuth:error", function() { fn('error') });
+            $rootScope.$on("angularFireAuth:error",  function() { fn('error') });
         }
     }
 });
diff --git a/ngShowAuth.js b/ngShowAuth.js
@@ -1,15 +1,17 @@
 app.directive('ngShowAuth', function($rootScope) {
+    var loginState;
     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);
-       }
+            var expState = attr.ngShowAuth;
+            function fn(newState) {
+                loginState = newState;
+                el.toggleClass('hide', loginState !== expState );
+            }
+            fn(null);
+            $rootScope.$on("angularFireAuth:login", function() { fn('login') });
+            $rootScope.$on("angularFireAuth:logout", function() { fn('logout') });
+            $rootScope.$on("angularFireAuth:error", function() { fn('error') });
+        }
     }
-});
+});
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -1,12 +1,17 @@
 app.directive('ngCloakAuth', function($rootScope) {
-       return {
-           restrict: 'A',
-           compile: function(el) {
-               el.toggleClass('hide', !$rootScope.user);
-               function fn() { el.removeClass('hide'); }
-               $rootScope.$on("angularFireAuth:login", fn);
-               $rootScope.$on("angularFireAuth:logout", fn);
-               $rootScope.$on("angularFireAuth:error", fn);
-           }
+    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);
         }
-    });
+    }
+});
+
diff --git a/ngShowAuth.js b/ngShowAuth.js
@@ -1,15 +1,15 @@
 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);
-           }
-        }
-    });
+    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);
+       }
+    }
+});
diff --git a/usage.examples.html b/usage.examples.html
@@ -1,3 +1,7 @@
+<style>
+  .hide { display: none; }
+</style>
+
 <div ng-cloak-auth>Authentication has resolved.</div>
 
 <div ng-show-auth="login">{{user.id}} is logged in</div>

diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -2,7 +2,7 @@ app.directive('ngCloakAuth', function($rootScope) {
        return {
            restrict: 'A',
            compile: function(el) {
-               el.addClass('hide');
+               el.toggleClass('hide', !$rootScope.user);
                function fn() { el.removeClass('hide'); }
                $rootScope.$on("angularFireAuth:login", fn);
                $rootScope.$on("angularFireAuth:logout", fn);

diff --git a/ngShowAuth.js b/ngShowAuth.js
@@ -2,12 +2,14 @@ app.directive('ngShowAuth', function($rootScope) {
        return {
            restrict: 'A',
            compile: function(el, attr) {
-               el.addClass('hide');
+               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", attr === 'login'? show : hide);
-               $rootScope.$on("angularFireAuth:logout", attr === 'logout'? show : hide);
-               $rootScope.$on("angularFireAuth:error", attr === 'error'? show : 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);
            }
         }
     });
diff --git a/ngCloakAuth.usage.html → usage.examples.html b/ngCloakAuth.usage.html → usage.examples.html
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -2,9 +2,8 @@ app.directive('ngCloakAuth', function($rootScope) {
        return {
            restrict: 'A',
            compile: function(el) {
-               console.log('hiding'); //debug
                el.addClass('hide');
-               function fn() { console.log('unhiding'); el.removeClass('hide'); }
+               function fn() { el.removeClass('hide'); }
                $rootScope.$on("angularFireAuth:login", fn);
                $rootScope.$on("angularFireAuth:logout", fn);
                $rootScope.$on("angularFireAuth:error", fn);

diff --git a/ngCloakAuth.usage.html b/ngCloakAuth.usage.html
@@ -1,3 +1,7 @@
-<div ng-cloak-auth ng-show="user">Authenticated</div>
+<div ng-cloak-auth>Authentication has resolved.</div>
 
-<div ng-cloak-auth ng-show="!user">Not authenticated</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>
diff --git a/ngShowAuth.js b/ngShowAuth.js
@@ -0,0 +1,13 @@
+app.directive('ngShowAuth', function($rootScope) {
+       return {
+           restrict: 'A',
+           compile: function(el, attr) {
+               el.addClass('hide');
+               function show() { el.removeClass('hide'); }
+               function hide() { el.addClass('hide'); }
+               $rootScope.$on("angularFireAuth:login", attr === 'login'? show : hide);
+               $rootScope.$on("angularFireAuth:logout", attr === 'logout'? show : hide);
+               $rootScope.$on("angularFireAuth:error", attr === 'error'? show : hide);
+           }
+        }
+    });
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -1,4 +1,3 @@
-
 app.directive('ngCloakAuth', function($rootScope) {
        return {
            restrict: 'A',

diff --git a/ngCloakAuth.usegae.html → ngCloakAuth.usage.html b/ngCloakAuth.usegae.html → ngCloakAuth.usage.html
@@ -1,4 +1,3 @@
-
 <div ng-cloak-auth ng-show="user">Authenticated</div>
 
 <div ng-cloak-auth ng-show="!user">Not authenticated</div>
diff --git a/ngCloakAuth.js b/ngCloakAuth.js
@@ -0,0 +1,14 @@
+
+app.directive('ngCloakAuth', function($rootScope) {
+       return {
+           restrict: 'A',
+           compile: function(el) {
+               console.log('hiding'); //debug
+               el.addClass('hide');
+               function fn() { console.log('unhiding'); el.removeClass('hide'); }
+               $rootScope.$on("angularFireAuth:login", fn);
+               $rootScope.$on("angularFireAuth:logout", fn);
+               $rootScope.$on("angularFireAuth:error", fn);
+           }
+        }
+    });
diff --git a/ngCloakAuth.usegae.html b/ngCloakAuth.usegae.html
@@ -0,0 +1,4 @@
+
+<div ng-cloak-auth ng-show="user">Authenticated</div>
+
+<div ng-cloak-auth ng-show="!user">Not authenticated</div>
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@

		<div ng-cloak-auth ng-show="user">Authenticated</div>

		<div ng-cloak-auth ng-show="!user">Not authenticated</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		<div ng-cloak-auth ng-show="user">Authenticated</div>

		<div ng-cloak-auth ng-show="!user">Not authenticated</div>