ember.js - EmberFire facebook authentication: nothing happens with authwithOAuthPopup -

i've been following tutorial set facebook authentication on ember cli + emberfire + firebase app.

however, nothing happens when click log in button. , doesn't give me error message.

i'm using application.hbs template log in button:

<p class="lead button">     <button {{action "login"}} class="btn btn-default">     {{fa-icon "facebook"}}       sign in facebook   </button> </p> 

then i've created application.js in controller folder put login action there:

import ember 'ember'; import firebase 'firebase';  var ref = new firebase("https://nutella.firebaseio.com");  export default ember.controller.extend({     actions: {         login: function() {                 var controller = this;                 controller.get("session").login().then(function(user) {                  }, function() {                  });         }     } }); 

then have login object in initializer/emberfire.js:

import ember 'ember';   var session = ember.object.extend({     ref : new firebase("https://nutella.firebaseio.com"),      addfirebasecallback: function() {         var session = this;          this.get("ref").onauth(function(authdata) {             if (authdata) {                 session.set("isauthenticated", true);             } else {                 session.set("isauthenticated", false);             }         });     }.on("init"),      login: function() {         return new promise(function(resolve, reject) {             this.get("ref").authwithoauthpopup("facebook", function(error, user) {                 if (user) {                     resolve(user);                 } else {                     reject(error);                 }             });         });     },      currentuser: function() {         return this.get("ref").getauth();     }.property("isauthenticated") });   export default {     name: "session",      initialize: function (container, app) {         app.register("session:main", session);         app.inject("controller", "session", "session:main");         app.inject("route", "session", "session:main");     } }; 

what wrong?

your usage of this invalid because context changed when used promise(). change login function this:

login: function() {     var _this = this; // cache usage in promise     return new promise(function(resolve, reject) {         _this.get("ref").authwithoauthpopup("facebook", function(error, user) {             if (user) {                 resolve(user);             } else {                 reject(error);             }         });     }); }, 

alternatively, use es6 arrow function syntax (=>) usage of this remain valid so:

login: function() {     return new promise((resolve, reject) => {         this.get("ref").authwithoauthpopup("facebook", function(error, user) {             if (user) {                 resolve(user);             } else {                 reject(error);             }         });     }); }, 

you can learn more arrow functions here: https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions/arrow_functions