Menu
I'm currently trying to use routing, so that a user is redirected to a certain page if they are not authenticated, and redirects to another page if they are authenticated.
Below is the HTML
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<div ng-show="user">
<p>Hello, {{ user.facebook.displayName }}</p>
<button ng-click="auth.$unauth()">Logout</button>
</div>
<div ng-hide="user">
<p>Welcome, please log in.</p>
<button ng-click="auth.$authWithOAuthPopup('facebook')">Login</button>
</div>
</body>
</html>
Below is the application
var app = angular.module("sampleApp", ["firebase"]);
//Generates the $firebaseAuth instance
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
var ref = new Firebase("https://crowdfluttr.firebaseio.com/");
return $firebaseAuth(ref);
}]);
//auth is now used in controller
app.controller("SampleCtrl", ["$scope", "Auth", function($scope, Auth) {
$scope.auth = Auth;
$scope.user = $scope.auth.$getAuth();
}])
//redirects to homepage if $requireAuth rejects
app.run(["$rootScope", "$location", function($rootScope, $location) {
$rootScope.$on("$routeChangeError", function(event, next, previous, error) {
if (error === "AUTH_REQUIRED") {
$location.path("/home");
}
});
}]);
//use routeProvider to only load HomeCtrl if $waitroAuth Resolves and returns promise
app.config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/home", {
controller: "HomeCtrl",
templateUrl: "views/home.html",
resolve: {
"currentAuth": ["Auth", function(Auth) {
return Auth.$waitForAuth();
}]
}
}).when("/account", {
//controller only loaded if $requireAuth resolves
controller: "AccountCtrl",
templateUrl: "views/account.html",
resolve: {
"currentAuth": ["Auth", function(Auth) {
return Auth.$requireAuth();
}]
}
});
}]);
//returns the authenticated user from currentAuth or null if not logged in
app.controller("HomeCtrl", ["currentAuth", function(currentAuth) {
}]);
app.controller("AccountCtrl", ["currentAuth", function(currentAuth) {
}]);
Something in my app above doesn't make sense, so to redirect a user to a different page once they are authenticated or redirect to another page if they are not authenticated.
See here for my codepen: http://codepen.io/chriscruz/pen/ogWyLJ
Also, here's a page for reference where I'm trying to implement from: https://www.firebase.com/docs/web/libraries/angular/guide.html#section-routes
424
To be able to let authenticated users access the database, we will need to use Firebase's Admin SDK. This framework will give us access to an API to verify authenticated users and pass requests to our database. We will be saving users' data using Firebase's Realtime Database.
If a user isn't signed in, CurrentUser returns null. Note: CurrentUser might also return null because the auth object has not finished initializing.
Your solution is quite simple, include ngRoute Library thus:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script>
in your html head.
Then also include ngRoute as a dependency in you app, thus:
var app = angular.module("sampleApp", ["firebase", "ngRoute"]);
View on solution on codepen: http://codepen.io/christiannwamba/pen/jEmegY too
Goodluck and Regards
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
