Firebase 3.0 Complete Authentication module compromises of Login & Signup.
By : Moeid Saleem Khan ( Team Leader - ADS© / ADS Academy ) @moeidsaleem
- AngularJS 1.5
- Firebase 3.0
- Materialize CSS
##Setup
- Setup AngularJS.
- Setup Firebase App.
Once app has been created follow the steps.
- Go to Authentication and click 2nd tab "Sign In methods"
- Enable Email/Password.
##Setting up Form
- Create a simple form with two input i.e. email and password as ng-model.
- on ng-submit set "signIn()" method.
- Create a submit button with type submit
- Create another button and apply ng-click to "signUp()" method.
###home.html
<div class="container">
<form ng-submit="signIn()">
<h2>Login to Admin panel</h2> <h5 style="color:{{resultColor}}" ng-bind="result"></h5>
<div class="input-field col s6">
<input id="icon_prefix" type="text" class="validate" ng-model="email">
<label for="icon_prefix">Email</label>
</div>
<div class="input-field col s6">
<input id="icon_prefix" type="text" class="validate" ng-model="pass">
<label for="icon_prefix">Password</label>
</div>
<button type="submit" class="btn waves-effect waves-light"><i class="material-icons right">send</i>Login</button>
<button type="button" class="btn btn-warning red" ng-click="signUp()"> Sign up</button>
</form>
</div>
|| For now what it will do is that on signIn() will intake email and password. ||
##Firebase Authentication - Controller logics.
$scope.auth = $firebaseAuth();
//setting up $firebaseAuth() service.
###SignIn()
$scope.signIn = function(){
$scope.auth.$signInWithEmailAndPassword($scope.email, $scope.pass).then(function(firebaseUser){
// my logic after signing up
$scope.result = "login Succesful!: UID = "+firebaseUser.uid;
$scope.resultColor = 'green';
//more logic...
}).catch(function(error){
console.log("authentication Error",error);
$scope.result = "authentication Error"+ error + "/n creating a new user..";
$scope.resultColor = 'red';
//more error handling
});
}
###signUp()
$scope.signUp = function(){
$scope.auth.$createUserWithEmailAndPassword($scope.email, $scope.pass).then(
function(firebaseUser){
// logic after sign up
$scope.result = "user signed up with following email" + firebaseUser.email;
$scope.resultColor = 'green';
}).catch(function(error){
// error handling
$scope.result = "email already exist";
$scope.resultColor = 'red';
});
}
#ending