Skip to content

Instantly share code, notes, and snippets.

@steven-ferguson
Created July 12, 2016 23:59
Show Gist options
  • Save steven-ferguson/8eddf63123fa74066e9d92f7e829d8e9 to your computer and use it in GitHub Desktop.
Save steven-ferguson/8eddf63123fa74066e9d92f7e829d8e9 to your computer and use it in GitHub Desktop.
Emberfire + FirebaseUI Authentication
/* 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);
},
});
<!-- 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" />
{{firebase-ui-auth signInSuccess=(action 'signInSuccess')}}
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'));
},
}
});
@alteredorange
Copy link

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 :/

@rogeliorv
Copy link

Really helpful Steve.

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

@Ghostavio
Copy link

Ghostavio commented May 10, 2017

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

@trokelado
Copy link

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.

@BladeF
Copy link

BladeF commented Jul 12, 2020

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.

@steven-ferguson
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment