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

Not quite sure what I'm doing wrong. I have firebase set up correctly, but when I add these pages I get "An action named 'signInSuccess' was not found in (generated application controller)."

I've tried firebase-ui-auth.js as a controller as well as a component, not sure what I'm missing :/

Really helpful Steve.

Will update to use from a route instead of the controller, but it works as a charm.

Pretty cool, I've been testing it out with https://github.com/rmmmp/emberfire-utils#firebaseui, it also works pretty well.

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.