Firebase 3 Authentication with Emberfire and Torii

829 views Asked by At

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

2

There are 2 answers

5
Falke On BEST ANSWER

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);
  });
}, 
0
user2716877 On

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