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.

Setup

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.

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

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.

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.