If you have not yet gone through Part 1, I recommend you do. You can check out the code up to this point with the following:

I have created Ember applications using a variety of shortcuts (Yeoman, ember-rails) but have found that Ember Tools is by far the best option available. It allows me to skip the Asset Pipeline completely and work directly in my public folder.

To get started, install Ember Tools using npm.

Once this is installed, you will be able to use the console command ember. Try it out:

Excellent. Now create our Ember app in our public directory with the following command:

With that simple command we now have a nearly functional Ember application. Let’s move the generated index.html file into the public folder and modify it a tiny bit.

Note that the only thing that changed in this file is the path to the application.js file. Go ahead and start up your Rails application and visit http://localhost:3000.

You shouldn’t see anything come up and will likely see an error in the server logs. This is because the page is trying to load application.js when it does not exist. To create the file, run (in another terminal tab within the same root directory):

This created three files: templates.js, index.js and application.js. The two former are used temporarily to create the latter. Now refresh your browser and you should see the starter app:

Running ember build can get very tedious, so let’s create a script which will monitor the file structure and run the command when needed. You will need to have fsmonitor installed if you don’t already:

Create the file bin/ember_build:

Now in a separate tab, make the file executable and run it:

Now whenever we change our Ember app, the code will re-compile.

Ember Tools comes with generators, which I LOVE! Let’s create some files using the generators and fill out our layout page.

Start by creating the route, handlebars template and object controller for users/new. This will be where we register.

Now create the route, handlebars template and object controller for sessions/new. This will be where we login.

Finally, create a page which is TOP SECRET and will require authentication to access. Let’s use an array controller so we can list the users.

Update the application handlebars template to show links to the different pages.

Before these links will work we need to add the routes to the config/routes.js file:

Refresh the browser and you should see something like this:

Add some style with twitter bootstrap by adding the CSS link in your index.html page:

Refresh. You can click on the links as well and you should see the correct pages load.

At the moment, Ember Tools does not provide the latest version of Ember Data, so we will need to add this manually. Save the following file to the path public/javascripts/vendor:

Now update a your main application config file to make sure we are using the latest:

On the blog post found at * http://log.simplabs.com/post/53016599611/authentication-in-ember-js , Marco Otte-Witte (@simplabs) created a simple AuthManager which stores and handles authentication. It is very elegant and once I found this post, I got very excited. I made some minor tweaks to the code, but it is still largely intact.

Create a file in your public/javascripts/config folder called auth_manager.js:

For this to work, we will need to add include jquery.cookies into our app. Download https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js into the folder public/javascripts/vendor and update the app.js file:

Now create the application router and add the AuthManager to the App in the init function. The reason it goes here is because it’s the first thing that gets run after all the code has been loaded.

Let’s create the parts of our app which will allow a user to register. We want to start off by creating a user model which uses Ember Data:

While we’re here, let’s also create the model for api_key:

For us to use Ember Data, we need to enable it. By default with Ember Tools, the localstorage adapter is enabled by default. Let’s remove that and set the adapter to the REST adapter. Open up config/store.js and make the following changes:

Open up our route for new users and set the model to be a new User record:

Modify the users/new controller with the following:

Now let’s update the handlebars template to show the registration form:

Register

Refresh your browser and fill out the registration form and hit submit. You should be logged in and redirected to the index page.

In your JavaScript console, you can view the currently logged in user with the following:

We’re doing great. We now have created an account. However, the UI hasn’t changed. We want to be told that we are logged in and be given the option to log out.

Let’s create an application controller with some computed properties which we will use in the template:

Now modify the application handlebars template to show the menu based on whether the user is authenticated or not:

Now when we reload the browser it will show our email address when we are logged in with a link to log out. Try it out.

We have an action set up in our application template to log out, but we don’t have an event to handle it yet. Let’s put this in the application route.

Refresh your browser and click ‘Logout’. Works? YAY!!!

Let’s start by updating our the session/new route to assign an Ember Object as the controller’s model:

Now update the sessions/new controller to perform the login:

Finally, update the handlebars template to show the login form:

Login

Refresh your browser and log in. On success, you should be redirected to the index page and the nav bar should indicate you are logged in.