Ember CLI With FireBase Simple Login

Firebase Simple Login is a library that allows authentication using client-side code. It supports authentication via email and password or through a number of third-party providers such as Facebook, Twitter, GitHub, and Google.

Firebase also provides robust security. Combined with simple login you can protect your data.

Since Ember CLI is a work in progress their isn't a lot of tutorials out there with simple login yet. Here is one way I was able to get it working.

Setup

You can check out my previous tutorial on how to setup Firebase.

If you like you can clone the repo from here and follow along. We'll assume that you already created the application using Ember CLI. First we need to add the firebase-simple-login javascript file to the project.

//app/index.html
...
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
...

Update

As mentioned in the comments instead of adding the script to index.html you can add the login using bower instead like this.

bower install --save-dev firebase-simple-login

Afterwards you'll need to add the script to the Brocfile.js

app.import('vendor/firebase-simple-login/firebase-simple-login.js');

Just as we did in the last tutorial we'll need to add emberfire and the bower Firebase files.

npm install --save emberfire
bower install --save emberfire
//UPDATE 9/13/2014
//As of now the emberfire npm has not been 
//updated for ember-cli > 0.41. After
//installing emberfire move the emberfire
//firebase and firebase-simple-login
//directories from
//bower_components to vendor like this
//cd bower_components
//mv firebase/ firebase/ 
//firebase-simple-login/ ../vendor/
//this will fix any issues with files not 
//found

Then we need to create the adapter for Firebase.

ember generate adapter application

We'll then load the Firebase adapter

//app/adapters/application.js
import DS from 'ember-data';

export default DS.FirebaseAdapter.extend({
  firebase: new window.Firebase('https://<your firebase>.firebaseio.com')
});

For us to be able to use this new script we'll need to create an initilizer and a few other files.

ember generate initializer auth
ember generate route index

At this point it's a good idea to go into your Firebase dashboard and click on the Simple Login tab. From there you'll need to setup the login Authentication Providers section.

For this tutorial I chose Twitter. I created a new Twitter application and generated keys using the api. Firebase has a good guide on how to do this. I then put those keys in the Twitter Authentication Provider section in the Firebase Simple Login tab. Without this step your app will never correctly authenticate with Firebase.

This is where it gets a little tricky. First we'll need to edit the newly generated auth.js file and create a variable to our firebase data.

//app/initializer/auth.js
import Ember from 'ember';

var Ref = new window.Firebase("https://<your firebase>.firebaseio.com/");

In the same file we are going to create an Ember object that will communicate to Firebase Simple Login service.

//app/initializer/auth.js
...
var auth = Ember.Object.extend({
  authed: false,
  init: function() {
    this.authClient = new window.FirebaseSimpleLogin(Ref, function(error, twitterUser) {
      if (error) {
        alert('Authentication failed: ' + error);
      } else if (twitterUser) {
        this.set('authed', true);
      } else {
        this.set('authed', false);
      }
    }.bind(this));
  },

  login: function() {
    this.authClient.login('twitter');
  },

  logout: function() {
    this.authClient.logout();
  }
});

This object will be used for authentication. The variable auth will be used later.

To use this object globally we'll need to inject it into all our controllers and routes.

//app/initializer/auth.js
...
export default {
  name: 'Auth',

  initialize: function( container, app ) {
        app.register('auth:main', auth, {singleton: true});
        app.inject('controller', 'auth', 'auth:main');
        app.inject('route', 'auth', 'auth:main');

  }
};

'app.register' registers the Ember auth object. We'll register it as a singleton. 'app.inject' is used to inject it into the routes and controllers.

For the last part we'll need to setup a simple login and logout button and a route.

//app/routes/index.js
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    login: function() {
        this.get('auth').login();
    },

    logout: function() {
      this.get('auth').logout();
    }
  }
});

These actions will login and logout with Firebase. Logging out invalidates the Firebase token. Note that logging out will not logout the authentication provider, only the Firebase simple login token.

Next we'll create the index template with the login and logout buttons.

<form>

{{#if auth.authed}}
<h4> Congratulations! You are logged in!</h4>
<h4> Would you like to logout?</h4>
<button {{ action 'logout' this }}>Logout</button>
{{else}}
<h4> Please login</h4>
<button {{ action 'login' this }}>Login</button>
{{/if}}
</form>

That's basically the application. After loading ember server you should see an option to login. After pressing the login a popup window for Twitter should appear asking for credentials. If the user is already logged in Twitter will ask for permission.

This is a good start, however we really need to secure the application. To do that we need to edit the Firebase security. I'll discuss this in my next post.

Good luck! You can find the Github repo here.