Skip to content

Instantly share code, notes, and snippets.

@DinisCruz-Dev

DinisCruz-Dev/1a. simple Angular with route - Firebase_Login.html

Last active May 17, 2020 22:47
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save DinisCruz-Dev/9220806 to your computer and use it in GitHub Desktop.
Save DinisCruz-Dev/9220806 to your computer and use it in GitHub Desktop.
Download ZIP
Creating an AngularJS page with Firebase login
Raw
1a. simple Angular with route - Firebase_Login.html
<!doctype html>
<html ng-app="project">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" >
<script src="app.js"></script>
</head>
<body>
<div class="container">
<h2>Firebase with Login</h2>
<ol class="breadcrumb">
<li><a href="#" >Chat view </a></li>
<li><a href="#/login">Login view</a></li>
</ol>
<div class="well">
<div ng-view></div>
</div>
</div>
</body>
</html>
Raw
1b. simple Angular with route - app.js
angular.module ('project' , ['ngRoute'])
.config(function($routeProvider)
{
$routeProvider.when ('/', { templateUrl :'chat.html' })
.when ('/login', { templateUrl :'login.html' })
.otherwise( { redirectTo :'/' });
});
Raw
2. adding Firebase Login support - app.js
angular.module ('project' , ['ngRoute' , 'firebase'])
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/')
.factory('fbRef' , function($firebase, fbURL)
{
return new Firebase(fbURL);
})
.config(function($routeProvider)
{
$routeProvider.when ('/chat', { templateUrl :'chat.html' })
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'})
.otherwise( { redirectTo :'/login' });
})
.controller('LoginCtrl', function($scope, fbRef)
{
auth = new FirebaseSimpleLogin(fbRef, function(error, user)
{
if (error) // an error occurred while attempting login
{
$scope.LoginStatus = "Firebase Error: " + error;
$scope.$apply();
return;
}
else if (user) // user is authenticated with Firebase
{
$scope.LoginStatus = 'User ID: ' + user.id + ', Provider: ' + user.provider;
$scope.$apply();
return;
}
$scope.LoginStatus = "User not logged in";
$scope.$apply();
});
});
Raw
2. adding Firebase Login support - Firebase_Login.html
<!doctype html>
<html ng-app="project">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js" type='text/javascript'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js" type='text/javascript'></script>
<script src="https://cdn.firebase.com/v0/firebase.js" type='text/javascript'></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js" type='text/javascript'></script>
<script src='https://cdn.firebase.com/js/simple-login/1.2.5/firebase-simple-login.js' type='text/javascript'></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel ="stylesheet" >
<script src="app.js"></script>
</head>
<body>
<div class="container">
<h2>Firebase with Login</h2>
<ol class="breadcrumb">
<li><a href="#/chat" >Chat view </a></li>
<li><a href="#/login">Login view</a></li>
</ol>
<div class="well">
<div ng-view></div>
</div>
</div>
</body>
</html>
Raw
3. Firebase Login working - app.js
angular.module ('project' , ['ngRoute' , 'firebase'])
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/')
.factory('fbRef' , function($firebase, fbURL)
{
return new Firebase(fbURL);
})
.config(function($routeProvider)
{
$routeProvider.when ('/chat', { templateUrl :'chat.html' })
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'})
.otherwise( { redirectTo :'/login' });
})
.controller('LoginCtrl', function($scope, fbRef)
{
var auth = new FirebaseSimpleLogin(fbRef, function(error, user)
{
if (error) // an error occurred while attempting login
{
$scope.LoginStatus = "Firebase Error: " + error;
$scope.$apply();
return;
}
else if (user) // user is authenticated with Firebase
{
$scope.LoginStatus = 'User ID: ' + user.id + ', Provider: ' + user.provider;
$scope.$apply();
return;
}
$scope.LoginStatus = "User not logged in";
$scope.$apply();
});
//auth.logout();
$scope.loginUser = function()
{
auth.login("password", {
email : $scope.email,
password : $scope.password,
rememberMe: false
});
};
});
/*
.controller('ChatCtrl', function($scope, Projects)
{
$scope.projects = Projects;
})
;*/
Raw
3. Firebase Login working - login.html
<h4>
Login view
</h4>
<p>
Login Status: {{LoginStatus}}
</p>
<form class="form center-block">
<div class="form-group">
<input class="form-control input-lg" type="text" ng-model="email" placeholder="Email" >
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" ng-model="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" ng-click="loginUser()" >
Login
</button>
</div>
</form>
Raw
4. better version of login - app.js
angular.module ('project' , ['ngRoute' , 'firebase'])
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/')
.factory('fbRef' , function($firebase, fbURL)
{
return new Firebase(fbURL);
})
.config(function($routeProvider)
{
$routeProvider.when ('/chat', { templateUrl :'chat.html' })
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'})
.otherwise( { redirectTo :'/chat' });
})
.controller('LoginCtrl', function($scope, $location , fbRef)
{
var auth = new FirebaseSimpleLogin(fbRef, function(error, user)
{
if (error) // an error occurred while attempting login
{
$scope.LoginStatus = error.toString();
$scope.$apply();
return;
}
else if (user) // user is authenticated with Firebase
{
$scope.LoginStatus = 'User ID: ' + user.id + ', Provider: ' + user.provider;
$location.path("/");
$scope.$apply();
return;
}
$scope.LoginStatus = "User not logged in";
$location.path("/login");
$scope.$apply();
});
auth.logout();
$scope.loginUser = function()
{
$scope.LoginStatus = "Logging in...";
auth.login("password", {
email : $scope.email,
password : $scope.password,
rememberMe: false
});
};
});
Raw
4. better version of login - login.html
<h4>
Login view
</h4>
<form class="form center-block">
<div class="form-group">
<input class="form-control input-lg" type="text" ng-model="email" placeholder="Email" >
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" ng-model="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" ng-click="loginUser()" >
Login
</button>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
{{LoginStatus}}
</div>
</div>
</form>
Raw
5 final (fully working) version - app.js
angular.module ('project' , ['ngRoute' , 'firebase'])
.value ('fbURL' , 'https://tm-admin-test.firebaseio.com/')
.factory('fbRef' , function($firebase, fbURL)
{
return new Firebase(fbURL);
})
.factory('fbData' , function($firebase, fbURL)
{
return $firebase(new Firebase(fbURL));
})
.config(function($routeProvider)
{
$routeProvider.when ('/chat', { templateUrl :'chat.html' , controller: 'ChatCtrl' })
.when ('/login', { templateUrl :'login.html' , controller: 'LoginCtrl'})
.otherwise( { redirectTo :'/chat' });
})
.controller('LoginCtrl', function($scope, $location , fbRef)
{
auth = new FirebaseSimpleLogin(fbRef, function(error, user)
{
if (error) // an error occurred while attempting login
{
$scope.LoginStatus = error.toString();
$scope.$apply();
return;
}
else if (user) // user is authenticated with Firebase
{
$scope.LoginStatus = 'Current User: Id = ' + user.id +
' , Email= ' + user.email +
' , Provider = ' + user.provider;
//$location.path("/");
$scope.$apply();
return;
}
$scope.LoginStatus = "User not logged in";
//$location.path("/login");
$scope.$apply();
});
$scope.loginUser = function()
{
$scope.LoginStatus = "Logging in...";
auth.login("password", {
email : $scope.email,
password : $scope.password,
rememberMe: true
});
};
$scope.logout = function()
{
auth.logout();
};
$scope.email = "dinis.cruz@owasp.org"; //
$scope.password = "pwd12345";
})
.controller('ChatCtrl', function($scope, fbData)
{
$scope.messages = fbData;
console.log("with fbData");
$scope.send = function()
{
fbData.$add({user: $scope.user, message: $scope.message});
};
});
Raw
5 final (fully working) version - chat.html
<h4>Chat view</h4>
<h5>Submit new message:</h5>
<div class="well">
<form class="form-inline">
<input type="text" class="input-sm" placeholder="user" ng-model = "user">
<input type="text" class="input-sm" placeholder="message" ng-model = "message">
<button type="button" class="btn btn-success btn-sm" ng-click = "send()">Send</button>
</form>
</div>
<h5>Current messages:</h5>
<table class="table table-striped">
<thead>
<tr>
<th>user</th>
<th>message</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in messages" >
<td>{{item.user}}</td>
<td>{{item.message}}</td>
</tr>
</tbody>
</table>
<hr/>
Raw
5 final (fully working) version - Firebase_Login.html
<!doctype html>
<html ng-app="project">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js" type='text/javascript'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js" type='text/javascript'></script>
<script src="https://cdn.firebase.com/v0/firebase.js" type='text/javascript'></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js" type='text/javascript'></script>
<script src='https://cdn.firebase.com/js/simple-login/1.2.5/firebase-simple-login.js' type='text/javascript'></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel ="stylesheet" >
<script src="app.js"></script>
</head>
<body>
<div class="container">
<h2>Firebase with Login</h2>
<ol class="breadcrumb">
<li><a href="#/chat" >Chat view </a></li>
<li><a href="#/login">Login view</a></li>
</ol>
<div class="well_">
<div ng-view></div>
</div>
</div>
</body>
</html>
Raw
5 final (fully working) version - login.html
<h4>
Login view
</h4>
<form class="form center-block">
<div class="form-group">
<input class="form-control input-lg" type="text" ng-model="email" placeholder="Email" >
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" ng-model="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" ng-click="loginUser()" >
Login
</button>
<button class="btn btn-warning" ng-click="logout()">logout</button>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
{{LoginStatus}}
</div>
</div>
</form>
@EhteshamMehmood
Copy link

AngularJS 4 login example firebase you can create an AngularJS page with Firebase login through this code mentioned in the link.

@aaayushsingh
Copy link

aaayushsingh commented Mar 2, 2018 •
edited

This is deprecated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment