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

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.