How to use routing with user authentication in Firebase using AngularFire?

Question

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

Chris · Accepted Answer · 2015-01-21 14:21:28Z

5

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

answered Jan 21, 2015 at 14:21

Chris

2433 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use routing with user authentication in Firebase using AngularFire?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related