EmberFire facebook authentication: nothing happens with authwithOAuthPopup

Question

I've been following this tutorial to set up Facebook authentication on my Ember CLI + EmberFire + Firebase app.

However, nothing happens when I click the log in button. And it doesn't even give me an error message.

I'm using application.hbs template for my log in button:

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

Then I've created application.js in my controller folder to put the login action there:

import Ember from 'ember';
import Firebase from '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 I have login object in initializer/emberfire.js:

import Ember from '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 could be wrong?

Answer 1

Your usage of this is invalid because the context changed when you used Promise(). Change your login function to this:

login: function() {
    var _this = this; // cache for 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, you could use the ES6 arrow function syntax (=>) so your usage of this will remain valid like 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 about arrow functions here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions