A Pen by Flip Stewart.

Email-&-Password-Auth-with-AngularFire.markdown

Email & Password Auth with AngularFire

More info here: http://thephuse.com/development/email-password-auth-with-angularfire/

A Pen by Flip Stewart on CodePen.

License.

index.html

<main ng-app="app" ng-cloak>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#auth">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">AngularFire Auth</a>
      </div>
      <form id="auth" class="navbar-form navbar-right collapse navbar-collapse" ng-controller="AuthCtrl">
        <fieldset ng-hide="auth.user">
          <div class="form-group">
            <input type="email" class="form-control" placeholder="email" ng-model="email" />
          </div>
          <div class="form-group">
            <input type="password" class="form-control" placeholder="password" ng-model="password" />
          </div>
          <button type="submit" class="btn btn-default" ng-click="signIn()">Sign In / Sign Up</button>
        </fieldset>
        <span ng-show="auth.user">
          {{auth.user.name}}
          <button type="submit" class="btn btn-default" ng-click="auth.$logout()">Sign Out</button>
        </span>
      </form>
      <p id="signed_in_as" class="navbar-text navbar-right" ng-show="auth.user">Signed in as {{auth.user.email}}</p>
    </div>
  </nav>

  <div class="container" ng-controller="AlertCtrl">
    <div class="alert alert-{{alert.class}}" ng-model="alert.message" ng-show="alert.message">
      {{alert.message}}
    </div>
  </div>
</main>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
<script src='https://cdn.firebase.com/v0/firebase-simple-login.js'></script>

script.js

app = angular.module('app', ['firebase']);

app.controller('AuthCtrl', [
  '$scope', '$rootScope', '$firebaseAuth', function($scope, $rootScope, $firebaseAuth) {
    var ref = new Firebase('https://angularfireauth.firebaseio.com/');
    $rootScope.auth = $firebaseAuth(ref);
    
    $scope.signIn = function () {
      $rootScope.auth.$login('password', {
        email: $scope.email,
        password: $scope.password
      }).then(function(user) {
        $rootScope.alert.message = '';
      }, function(error) {
        if (error = 'INVALID_EMAIL') {
          console.log('email invalid or not signed up — trying to sign you up!');
          $scope.signUp();
        } else if (error = 'INVALID_PASSWORD') {
          console.log('wrong password!');
        } else {
          console.log(error);
        }
      });
    }

    $scope.signUp = function() {
      $rootScope.auth.$createUser($scope.email, $scope.password, function(error, user) {
        if (!error) {
          $rootScope.alert.message = '';
        } else {
          $rootScope.alert.class = 'danger';
          $rootScope.alert.message = 'The username and password combination you entered is invalid.';
        }
      });
    }
  }
]);

app.controller('AlertCtrl', [
  '$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.alert = {};
  }
]);

style.css

#auth {
  border: none;
}

@media screen and (max-width: 740px) { 
  #auth button {
    width: 100%;
  }
}