Ember + Firebase

ember-firebase.markdown

Install and configure dotenv

ember install ember-cli-dotenv touch .env

Add .env to .gitignore

Install and configure firebase

ember install emberfire

  // config/environment.js
  let ENV = {
    firebase: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      databaseURL: process.env.FIREBASE_DATABASE_URL,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
    }
  }

// .env
FIREBASE_API_KEY=xxx
FIREBASE_AUTH_DOMAIN=xxx
FIREBASE_DATABASE_URL=xxx
FIREBASE_PROJECT_ID=xxx
FIREBASE_STORAGE_BUCKET=xxx
FIREBASE_MESSAGING_SENDER_ID=xxx

Setup auth

ember install torii

// config/environment.js
var ENV = {
  torii: {
    sessionServiceName: 'session'
  }
}

// app/torii-adapters/application.js
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
export default ToriiFirebaseAdapter.extend({
});

// app/routes/application.js
import Ember from "ember";

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

export default Route.extend({
  session: service(),

  beforeModel() {
    return this.get("session")
      .fetch()
      .catch(function() {});
  },

  actions: {
    login(provider) {
      this.get("session")
        .open("firebase", { provider })
        .then(data => {
          console.log(data.currentUser);
        });
    },
    logout() {
      this.get("session").close();
    }
  }
});

// app/templates/application.hbs

{{#if session.isAuthenticated}}
  Logged in as {{session.currentUser.displayName}}
  <button {{action "logout"}}>Logout</button>
  {{outlet}}
{{else}}
  <button {{action "login" "google"}}>Login with Google</button>
{{/if}}

{{outlet}}

Firebase security rules

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}