I'm currently trying to use routing, so that the user is redirected to a specific 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 app
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 application above does not make sense, so redirect the user to another page as soon as they are authenticated or redirected to another page if they are not authenticated.
See here for my code: http://codepen.io/chriscruz/pen/ogWyLJ
Also, here is the page for the link where I am trying to implement: https://www.firebase.com/docs/web/libraries/angular/guide.html#section-routes