2

I'm trying to authenticate with Firebase's email/password provider, but keep getting the following error:

Uncaught TypeError: Cannot read property 'open' of undefined

Here's what my app looks like:

app/torii-adapters/applications.js

import Ember from 'ember';
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';

export default ToriiFirebaseAdapter.extend({
     firebase: Ember.inject.service()
});

app/adapters/application.js

import Ember from 'ember';
import FirebaseAdapter from 'emberfire/adapters/firebase';

const { inject } = Ember;

export default FirebaseAdapter.extend({
  firebase: inject.service()
});

app/templates/components/login-cmp.hbs 

 ...   
                  <form class="col s12">
                      <div class="row">
                        <div class="input-field col s12">
                          {{input
                            id="userEmail"
                            type="email"
                            value=email
                            class="validate"
                          }}
                          <label for="email">Email</label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                          {{input
                            id="userPassword"
                            type="password"
                            value=password
                            class="validate"
                          }}
                          <label for="password">Password</label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col s12 m4">
                          <button class="btn waves-effect waves-light btn-large mt-20 mb-10" type="submit" {{action 'signIn' email password}}>Sign in
                            <i class="material-icons right">send</i>
                          </button>
                        </div>                    
                      </div>
                    </form>

app/components/login-cmp.js

signIn: function(email, password) {
      this.get('session').open('firebase', { provider: 'password', email: email, password: password}).then(function(data) {
        console.log(data.currentUser);
      });
    },

Using the same config/environment.js setup shown on https://github.com/firebase/emberfire with my firebase projects domains and key. Also have 

torii: {
      sessionServiceName: 'session'
    },

I also have the email/password provider Enabled on my firebase account.

Not sure where the disconnect is. Any help is much appreciated. Thanks!
* Ember-CLI v2.11 * Emberfire v2.0.6 * Torii v0.8.1 * Node v6.9.5

John
  • 95
  • 3
  • 12

2 Answers2

3

The signIn action button does not tell your ember app what provider you are using, only the login credentials were provided, it should look like:

{{action 'signIn' "password" email password}}

and finally your signIn action code should look like:

signIn() {
  let controller = this;
  this.get('session').open('firebase', { provider: 'password', email: this.get('email') || '', password: this.get('password') || ''}).then(function(data) {
    console.log(data.currentUser);
  });
},
Falke
  • 356
  • 2
  • 4
  • Unfortunately, this did not fix the issue. Still getting the same console error. – John Mar 08 '17 at 18:35
  • Yes, this shouldn't fix the issue. A component is isolated from the context in which it is called. It has no notion of what template it is being rendered, so one should use closure action to pass actions into your components. May i see where you are calling the login-cmp? – Falke Mar 09 '17 at 09:28
  • 1
    The component is being called on my application.hbs (it's a modal btw). I think you are right with using a closure action because I did have to do this with another cmp I'm using. Currently I'm only calling the cmp like this, {{login-cmp}}. Also, is there an easy way to test if Torii exists? I'm thinking it may have something to do with that as well. – John Mar 09 '17 at 16:51
  • How would I pass in multiple closure actions? (signUp, signOut, googleLogin etc..) – John Mar 09 '17 at 16:57
  • Thanks @Falke. I got it working by using a closure action. My cmp.js looks like this: `signIn: function(email, password) { this.attrs.login(email,password); },` and where I'm calling the cmp looks like this: `{{login-cmp login=(route-action 'signIn')}}` – John Mar 09 '17 at 21:11
0

For anyone else getting this error, at this time Ember version 2.13.1 has an error with Emberfire and torii: internal "torii" instance is undefined as the mechanism for getting owner or factory has been slightly changed in Ember 2.13, so "open" can not be called. So far the latest working version is 2.12.0.

More info: https://github.com/firebase/emberfire/issues/503

user2716877
  • 63
  • 5