Angularfire Cannot Read Property Facebook - How Do I Keep Using AuthData Throughout App

I´m working on an android game using ionic framework and firebase. My plan is to let users login using facebook login with firebase, after this i want to save the game data to the

Solution 1:

The main issue is you're relying on the cachedUserProfile.gender property to exist. This isn't guaranteed to be there for every user. You'll need to find a fallback to avoid an error.

Let's simplify by injecting the user via the resolve() method in the router. Don't mind the structure of the code, it's from the Angular Styleguide (my preferred way of writing Angular apps).

angular.module("app", ["firebase"])
  .config(ApplicationConfig)
  .factory("Auth", Auth)
  .controller("HomeScreen", HomeController);

function Auth() {
  var FIREB = new Firebase("https://name.firebaseio.com");
  return $firebaseAuth(FIREB);
}

function ApplicationConfig($stateProvider) {
  $stateProvider
    .state("home", {
      controller: "HomeScreen",
      templateUrl: "views/home.html"
    })
    .state("profile", {
      controller: "ProfileScreen",
      templateUrl: "views/profile.html",
      resolve: {
        currentUser: function(Auth) {
          // This will inject the authenticated user into the controller
          return Auth.$waitForAuth(); 
        }
      }
    });
}

function HomeController($scope, Auth, $state) {

  $scope.googlelogin = function() {

    Auth.$authWithOAuthPopup("google").then(function(authData) {

      users.child($scope.authData.google.cachedUserProfile.id).set({
        Username: $scope.authData.google.cachedUserProfile.id,
        Gender: $scope.authData.google.cachedUserProfile.gender || ""
      });

      $state.go("app.next");

    });
  }

}

function ProfileController(currentUser) {
  console.log(currentUser.facebook); // injected from router
}

The benefit of this approach is that you don't have to check for authenticated users in the controller. If the user is injected, you know you have an authenticated user.

Check out the AngularFire docs for more information.