Uncaught TypeError: Cannot read property 'login' of undefined

Question

I'm trying to set up OAuth with Firebase and Ember. For some reason it's returning the error

Uncaught TypeError: Cannot read property 'login' of undefined

App.LoginController = Ember.ObjectController.extend({
    actions: {  
      login: function() {
        var controller = this;
debugger;
        controller.get("session").login().then(function(user) {
          // Persist your users details.
        }, function() {
          // User rejected authentication request
        });
        }
    },
});

I was thinking maybe the user is undefined, but I've defined it in a model:

App.User = DS.Model.extend({
    username: DS.attr('string'),
});

Then I thought maybe it's the "session" that's undefined--I used the debugger to look up & it says it's an unknown mixin.

var session = Ember.Object.extend({  
        ref: new Firebase("https://glowing-fire.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")
});




App.Session = Ember.Object.extend({
    initialize: function(container, app) {
        app.register("session:main", session);
        app.inject("controller", "session", "session:main");
        app.inject("route", "session", "session:main");
    }
});

I'd really appreciate your help!

Answer 1

The issue might be that you are trying to access an injected property, but the code that does the injection is never called. The recommended way to inject properties is described on this page.

More specifically the samples below (from the Ember.js website) should help

Using an application initializer:

App = Ember.Application.extend();

App.Logger = Ember.Object.extend({
  log: function(m) {
    console.log(m);
  }
});

App.IndexRoute = Ember.Route.extend({
  activate: function(){
    // The logger property is injected into all routes
    this.logger.log('Entered the index route!');
  }
});

Ember.Application.initializer({
  name: 'logger',

  initialize: function(container, application) {
    application.register('logger:main', App.Logger);
    application.inject('route', 'logger', 'logger:main');
  }
});

App.create();

or directly on the application:

App = Ember.Application.create();

App.register('logger:main', {
  log: function(m) {
    console.log(m);
  }
}, { instantiate: false });

App.inject('route', 'logger', 'logger:main');