Ember.js authentication action not working

Question

This is my first time using ember.js. I'm trying to use a controller to execute an action when a user is successfully signed in (authenticated). However, my current method of saving the user's state or even changing a property 'this.set('userSignedIn', state);' is not working. I'm not exactly sure why, I'm guessing it has to do with the scope of my 'state' variable or perhaps the 'this' object is not being passed to 'ref.authWithOAuthPopup()'. I'm hoping someone can point in the right direction.

var ref = new Firebase("https://<app>.firebaseio.com");
var state = false;
MyApp.ApplicationController = Ember.Controller.extend({
userSignedIn: false,
actions: {



    signin: function() {
        ref.authWithOAuthPopup("facebook", function(error, authData) {
          if (error) {
            console.log("Login Failed!", error);

          } else {
            console.log("Authenticated successfully with payload:", authData);
            state = true;

          }
        });
    this.set('userSignedIn', state);    
    console.log(state);
    }, // End of signin



}
});

Answer 1

You set userSignedIn before Firebase.authWithOAuthPopup(provider, onComplete, [options]) onComplete callback is fired. Instead, try this:

signin: function() {
  controllerContext = this;
        ref.authWithOAuthPopup("facebook", function(error, authData) {
          if (error) {
            console.log("Login Failed!", error);

          } else {
            console.log("Authenticated successfully with payload:", authData);      
            state = true;
            controllerContext.set('userSignedIn', state);
            console.log(state);
          }
        });


    }, // End of signin