Using Ember Simple Auth with ember-cli

#anchorSetting up the basic project

First of all you need to install PhantomJS, bower and of course ember-cli (Ember Simple Auth requires at least Ember CLI 0.0.44):

npm install -g phantomjs
npm install -g bower
npm install -g ember-cli

Then use ember-cli to create the new project:

ember new my-auth-app

At this point the basic project is set up and ready to run:

cd my-auth-app
ember server

#anchorInstalling Ember Simple Auth

Installing Ember Simple Auth in an ember-cli project is really easy now. All you have to do is install the ember-cli addon from npm:

npm install --save-dev ember-cli-simple-auth
ember generate ember-cli-simple-auth

This will install Ember Simple Auth’s AMD distribution into the project, register the initializer so Ember Simple Auth automatically sets itself up and add itself as a dependency to the project’s package.json.

You can add a login route and login/logout links to verify it all actually works:

// app/router.js
…
Router.map(function() {
  this.route('login');
});
…

 // app/templates/application.hbs …
{{#if session.isAuthenticated}}
  <a {{action "invalidateSession"}}>Logout</a>
{{else}}
  {{#link-to "login"}}Login{{/link-to}}
{{/if}}
… 

Also implement the ApplicationRouteMixin in the project’s application route:

// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(ApplicationRouteMixin);

#anchorSetting up authentication

To actually give the user the option to login, we need to add an authentication package for Ember Simple Auth. Let’s assume you have an OAuth 2.0 compatible server running at http://localhost:3000. To use that, install the OAuth 2.0 extension library which again is as easy as installing the package from npm:

npm install --save-dev ember-cli-simple-auth-oauth2
ember generate ember-cli-simple-auth-oauth2

Like the ember-cli-simple-auth package this will setup itself so that nothing else has to be done in order to use the OAuth 2.0 functionality.

The OAuth 2.0 authentication mechanism needs a login form, so let’s create that:

 // app/templates/login.hbs
<form {{action "authenticate" on="submit"}}>
  <label for="identification">Login</label>
  {{input id="identification" placeholder="Enter Login" value=identification}}
  <label for="password">Password</label>
  {{input
    id="password"
    placeholder="Enter Password"
    type="password"
    value=password
  }}
  <button type="submit">Login</button>
</form>

Then implement the LoginControllerMixin in the login controller and make that use the OAuth 2.0 authenticator to perform the actual authentication:

// app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';

export default Ember.Controller.extend(LoginControllerMixin, {
  authenticator: 'simple-auth-authenticator:oauth2-password-grant',
});

As the OAuth 2.0 authenticator would by default use the same domain and port to send the authentication requests to that the Ember.js is loaded from you need to configure it to use http://localhost:3000 instead:

// config/environment.js
if (environment === 'development') {
  …
  ENV['simple-auth-oauth2'] = {
    serverTokenEndpoint: 'http://localhost:3000/token'
  }
  …

You also need to make sure that your server allows cross origin requests by enabling CORS (e.g. with rack-cors if you’re using a rack based server).

#anchorConclusion

This is how you set up an ember-cli project with Ember Simple Auth. For further documentation and examples see the github repository and the API docs for Ember Simple Auth and the OAuth 2.0 extension library.