firebase onAuth() throwing: TypeError cannot read property 'auth' of undefined

Question

I'm using Firebase as my main backend solution and have created a service for dealing with auth throughout the app (since I started to use simpleLogin and now I'm trying to use their built in login methods, I figured it might be better to just make all that scoped before accessing it from the rest of the application).

My firebase reference is working fine and so it is the auth methods.
But the listening methods onAuth() and offAuth() are throwing this error:

Uncaught TypeError: Cannot read property 'auth' of undefined - firebase-debug.js:9954

Is this a bug with firebase itself or does anyone see something I'm doing wrong? Tried to play around with angular versions and turning off other bower packages like angularfire and firebase-simple-login but have had no success so far.

My auth service code is as follows and I'm not doing anything beyond defining my url on a .constant service.

    angular.module('myApp')
    .factory('auth', function (firebaseAPIUrl) {

      var ref = new Firebase(firebaseAPIUrl),
          onAuth = ref.onAuth,
          offAuth = ref.offAuth;

      onAuth(function (authData) {
        console.log(authData);
      });

      function getCurrentUser() {
        return ref.getAuth();
      }

      ...

      return {
        onAuth: onAuth,
        offAuth: offAuth,
        getCurrentUser: getCurrentUser,
        ...
      }
    }

Rather than returning onAuth, offAuth, etc., what happens when you try returning onAuth.bind(ref), etc.? Also, which version of the Firebase web client is included in your application? — Rob DiMarco
@RobDiMarco I'm running on 1.1.2 since it's the first one to include login as a core part of firebase, right? But I didn't get your suggestion. The onAuth property I'm exposing would be defined as var onAuth = ref.onAuth.bind(ref); is that it? — Georges Boris
@RobDiMarco when I leave it like this onAuth = ref.onAuth.bind(ref), etc. it works perfectly. But I haven't found anything about this on the docs. Can you elaborate on this matter as a response so I can accept it? Thanks! — Georges Boris

Rob DiMarco Rob DiMarco · Accepted Answer · 2014-10-23T16:22:55

In JavaScript, when passing around a function for later invocation, it is important to be mindful of the scope with which that function will be invoked. When defining closures, for example, the closure will have its own scope and this may no longer point to our original object. Using fn.bind(...) addresses this issue.

This can get tricky, as the code you're working with might depend on a particular scope. The trick is to ensure that the scope hasn't changed as you're passing around the function as an argument, and this can be achieved by explicitly binding the method to the original object before passing it around.

Check out http://www.reactive.io/tips/2009/04/28/binding-scope-in-javascript/ and http://alistapart.com/article/getoutbindingsituations for deeper dives on this topic.

firebase onAuth() throwing: TypeError cannot read property 'auth' of undefined

1 Answers