How to handle user information using firebase simple login for facebook

Question

I am building a webpage using AngularJS and Firebase. I want to use facebook login to connect information on the webpage with the user. Firebase has a version of simple login which I guess is supposed to simplify the login process. My problem is that I want to access information about the logged in user in a lot of places on my webpage but I can't find a good way to do it.

This is how I started out:

var userInfo = null;

var ref = new Firebase('https://<yourfirebase>.firebaseIO.com/');

var auth = new FirebaseSimpleLogin(ref, function(error, user) {
if(error)
    alert("You are not logged in");
else if(user)
{
    //store userinfo in variable
    userInfo = user;
}
else
    //user logged out
});

//do something with userInfo
alert(userInfo.name);

My first thought was to run this at the top of my page and then use the info about the user. The problem is that the code using userInfo (as in eg the alert) will always run before the userInfo variable has been filled and userInfo will return undefined/null.

I then proceeded to always create a new firebasesimplelogin object when i want to retrieve user data. Which of course isn't very good. Especially since every created FirebaseSimpleLogin object will be called again whenever another is called or a user logs out, for example.

So my question is, how do I use FirebaseSimpleLogin to handle and use my user information in the best way?

I would have liked some function to getUserInfo() or check isLoggedIn() for example. How do you do this properly?

Answer 1

You can take a look at this example for thinkster. It's based on using simple login with userid/password. http://www.thinkster.io/angularjs/4DYrJRxTyT/7-creating-your-own-user-data-using-firebase .

You can create a function like getLoggedinUser that runs in $rootScope that will allow you to find the user throughout the application.

UPDATE:

Around the middle of October 2014, firebase made some big changes. This method might still work, but it's better to take advantage of the newer version of firebase, specifically getauth and onauth. These methods will allow you to do the same thing without running on the rootScope. https://www.firebase.com/docs/web/guide/user-auth.html#section-login

Answer 2

Please make a constant to use it everywhere in your App like that

   .constant('facebookUrl', 'https://rjrestaurantapp.firebaseio.com');

Then in the controller inject this constant "facebookUrl & "$state" as shown below...

   .controller('loginCtrl', function($scope,facebookUrl,$state){

and then you only need to give name of the state where you want to redirect after facebook authentication..

 var ref = new Firebase(facebookUrl);
 $scope.fbLogin = function () {
 ref.authWithOAuthPopup("facebook", function(error, authData) {
    if (error) {
      console.log("Login Failed!", error);
    } else {
      console.log("Authenticated successfully with payload:", authData);
      $state.go('restaurant');
   }
 })
}})

You can see the information in authData object after successfull authentication using facebook ....

please read this doc carefully https://www.firebase.com/docs/web/guide/login/facebook.html

The above is the example of simple login using firebase and for retrieving data for each logged in user, you have to store user information at the time of signin as you know that firebase makes every child with a unique ID .. then you only need to use the offline features of firebase that will find which user is offline and according to that remove the node with the same ID which one is offline, you can find examples in the MANAGING PRESENCE section of the below link ..

https://www.firebase.com/docs/web/guide/offline-capabilities.html