More info here: http://thephuse.com/development/email-password-auth-with-angularfire/
A Pen by Flip Stewart on CodePen.
More info here: http://thephuse.com/development/email-password-auth-with-angularfire/
A Pen by Flip Stewart on CodePen.
<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> |
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 = {}; | |
} | |
]); |
#auth { | |
border: none; | |
} | |
@media screen and (max-width: 740px) { | |
#auth button { | |
width: 100%; | |
} | |
} |