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'));
    },
  }
});

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