Emberfire + FirebaseUI Authentication

firebase-ui-auth.js

/* globals firebaseui */
import Ember from 'ember';
import firebase from 'firebase';

const { computed, inject: { service } } = Ember;

export default Ember.Component.extend({
  firebaseApp: service(),

  didInsertElement() {
    this._super(...arguments);
    this._initializeAuthUI();
  },

  signInSuccess() {},

  uiConfig: computed('signInSuccess', function () {
    return {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ],
      callbacks: {
        signInSuccess: this.get('signInSuccess'),
      },
    };
  }),

  elementId: 'firebaseui-auth-container',

  _initializeAuthUI() {
    const auth = this.get('firebaseApp').auth();
    const ui = new firebaseui.auth.AuthUI(auth);
    ui.start('#firebaseui-auth-container', this.get('uiConfig'));
    this.set('ui', ui);
  },
});

index.html

<!-- Add these to the bottom of your head tag -->
<script src="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.css" />

login.hbs

{{firebase-ui-auth signInSuccess=(action 'signInSuccess')}}

login.js

import Ember from 'ember';

const { inject:  { service } } = Ember;

export default Ember.Controller.extend({
  session: service(),

  actions: {
    signInSuccess() {
      this.get('session').fetch().then(() => this.replaceRoute('index'));
    },
  }
});

Really helpful Steve. I´m a newbe using your auth code but the line 6 session: service(), in login.js controller gets me Attempting to inject an unknown injection: 'service:session' Error. when comment this line the auth Works fine cause can see my firebase data so I´m authenticated the problem is cannot fetch the session cause result undefined on line 10. Any help will be appreciated.

This gist appears to be using older versions of the Ember API, and there have been some major changes in the intervening years in the API and the separation of concerns between the various parts. Any suggestions on how to use this with Ember 3.19? I've been toying around with it and will update if I reach a solution.

Unfortunately I have not used Ember in 3 years, so I am not familiar with any api changes that have occurred since then.