I am trying to create a user login page using AngularJS and firebase authentication (Email and password).
I looked up a couple of tutorials online and wrote the codes, but it does not seem to work.
Below are my codes.
1) page.html
<ion-view id="page646">
<ion-content padding="true" class="has-header">
<form>
<label class="item item-input">
<span class="input-label">EMAIL</span>
<input type="email" placeholder="" ng-model="user.email">
</label>
<label class="item item-input">
<span class="input-label">PASSWORD</span>
<input type="text" placeholder="" ng-model="user.pass">
</label>
<div style="margin-right:-20px;">
<button style="left:-10px;" class="button button-positive button-full"ng-click="signIn()">SIGN IN</button>
</div>
</form>
</ion-content>
</ion-view>
2) index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js">
</script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js">
</script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js">
</script>
<!-- AngularFire -->
<script
src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js">
</script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="lib/ngCordova/"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
3) controller.js
.controller('pASSWORDGMCtrl', ['$scope', '$stateParams', 'aaaService',
function ($scope, $stateParams, aaaService) {
$scope.user = {
email:"",
pass:"",
}
$scope.signIn = function(){
aaaService.login($scope.user.email, $scope.user.pass);
}
aaaService.status();
$scope.signOut = function(){
aaaService.signout();
}
}])
4) Firebase-aaa.js
angular.module('firebaseAaa', ['firebase'])
.factory('aaaService', ['$firebaseArray','$firebaseAuth',
function($firebaseArray, $firebaseAuth){
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
if(!firebase.apps.length){
firebase.initializeApp(config);
}
var ref;
var adminArray;
return{
status: function(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
// if(loggingIn){
alert("Login success.");
ref = firebase.database().ref().child("Admin/" + user.uid);
adminArray = $firebaseArray(ref);
}
// loggingIn=false;
else {
// No user is signed in.
}
});
},
login: function(email, pass) {
firebase.auth().signInWithEmailAndPassword('[email protected]', 'aaa').catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error signing in user: ", errorCode + " " + errorMessage);
});
},
signout: function() {
firebase.auth().signOut().then(function() {
// Sign-out successful.
alert("You are now signed out.");
// loggingIn= false;
}).catch(function(error) {
// An error happened.
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error signout: ", errorCode + " " + errorMessage);
});
},
}
}])
When I was trying out the codes, I got 'not logged in'. I was watching at the firebase auth tutorial, there was a part where he did not enable the email and password auth. While he was trying the codes, he got an error in the console stating that the firebase email and password auth have yet been enabled. I tried disabling mine, hoping to see the same error, but it did not turn out that way. It only says 'not logged in'. I could not find the problem to it. My question is how do i get a successful even for signInWithEmailAndPassword.
