Firebase 3.0 + Ember 2.0: The Torii adapter must implement `open` for a session to be opened

Question

I'm having an issue with facebook authentication with the torii adapter, the error being: 'The Torii adapter must implement open for a session to be opened'.

I've visited many tutorials, and tried all presented methods, but most of them are usually old ember code and none of them seem to actually work.

Current state: I am able to login, I get the facebook popup and I can authorize.

Using fiddler, I can also see the response from the API containing a JSON response with all credentials from the user I authenticated with. In the firebase console, I can see the authorized user, reset its password, deny access,...

All this leads me to believe that it's 'merely' a front-end issue where I can't seem to establish a proper 'session' to work with.

My end goal would be to pick up the relevant user data and transfer it to my firebase backend as a 'user' entry, allowing for quick registration for site visitors, but I'll be more than glad to have an active session so I can work out the rest on my own.

As a front-end rookie (I normally code C#), Ember may not have been the best choice to get the hang it, but I'm this far now, I'm not about to let it all slide and pick up a different framework.

My code:

config/environment.js

firebase: {
    apiKey: 'xxxxxxx',
    authDomain: 'myappname.firebaseapp.com',
    databaseURL: 'https://myappname.firebaseio.com',
    storageBucket: 'myappname.appspot.com',
    messagingSenderId: '1234567890'
  },

    torii: {
      sessionServiceName: 'session'
    }

torii-adapters/application.js (I've changed this so much, I can't even remember what the original code was, because none of what I change/add/delete here seems to do anything at all.)

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

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

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
    beforeModel: function() {
    return this.get('session').fetch().catch(function() {
    });
  },

  actions:{

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

    logout: function() {
      this.get('session').close().then(function() {
        this.transitionTo('application');
      }.bind(this));
    }
  }
});

application.hbs

<div class="container">
  {{partial 'navbar'}}
<a {{action "signIn" "facebook"}} class="btn">{{fa-icon "facebook"}}</a>
<a {{action "signIn" "twitter"}} class="btn">{{fa-icon "twitter"}}</a>
<a {{action "signIn" "github"}} class="btn">{{fa-icon "github"}}</a>
<a {{action "signIn" "google"}} class="btn">{{fa-icon "google"}}</a>
  {{outlet}}
</div>

EDIT 1

Above code is giving me alot more errors after restarting ember server. Is this the cause of my troubles ? All the changes that seemingly didn't change a thing, weren't registered until after a server restart ? If that's the case, I may have passed the correct solution about a hundred times already...

EDIT 2

Changed the code to reflect the actual issue. The previous code was screwed beyond measure, but I never realized it because it didn't pick up until after a server restart.

EDIT 3 Found and tried this, to no avail: https://stackoverflow.com/a/32079863/4309050

NullVoxPopuli NullVoxPopuli · Accepted Answer · 2020-06-21T15:29:04

This is Lorem Ipsum Dolor's answer, but updated for Ember 3.16+

// Inside routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute Route {
  @service session;
    
  async beforeModel() {
    try {
      return this.session.fetch();
    } catch {}
  }
}

Note that in Ember 3.16+, it is not recommended to add actions to your Route. Instead, you can add them to a Controller or Component context:

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class LoginLogout extends Component {
  @service session;
  @service router;

  @action
  async login(provider)  {
    let data = await this.session.open('firebase', { provider });

    console.log(data.currentUser);
  }

  @action
  async logout() {
    await this.session.close();

    this.router.transitionTo('application');
  }
}

Note the addition of the router service. The Router service is the way we interact with routing anywhere in our apps.

import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
    
export default class MyAdapter extends ToriiFirebaseAdapter {

}

Firebase 3.0 + Ember 2.0: The Torii adapter must implement `open` for a session to be opened

3 Answers