Ember.SimpleAuth

anchorIf you're facing challenges with Ember.js and need a helping hand, reach out!

Contact us!

Instead of providing a heavyweight out-of-the-box solution with predefined routes, controllers etc., Ember.SimpleAuth defines lightweight mixins that the application code implements. It also does not dictate anything with respect to application structure, routing etc. However, setting up Ember.SimpleAuth is very straight forward and it can be completely customized. The requirements on the server interface are minimal (see the README for more information on the server side).

anchorUsing Ember.SimpleAuth

Using Ember.SimpleAuth in an application only requires a few simple steps. First, it must be enabled which is best done in a custom initializer:


Ember.Application.initializer({
  name: 'authentication',
  initialize: function (container, application) {
    Ember.SimpleAuth.setup(application);
  },
});

The second step is to setup the routes for logging in and out:


App.Router.map(function () {
  this.route('login');
  this.route('logout');
});

Then, the generated controller and route must implement the mixins provided by Ember.SimpleAuth:


App.LoginController = Ember.Controller.extend(
  Ember.SimpleAuth.LoginControllerMixin,
);
App.LogoutRoute = Ember.Route.extend(Ember.SimpleAuth.LogoutRouteMixin);

Of course the application also needs a template that renders the login form:


<form {{action login on="submit"}}>
  <label for="identification">Login</label>
  {{view
    Ember.TextField
    id="identification"
    valueBinding="identification"
    placeholder="Enter Login"
  }}
  <label for="password">Password</label>
  {{view
    Ember.TextField
    id="password"
    type="password"
    valueBinding="password"
    placeholder="Enter Password"
  }}
  <button type="submit">Login</button>
</form>

At this point, everything that’s necessary for users to log in and out is set up. Also, every AJAX request (unless it’s a cross domain request) that the application makes will send the authentication token that is obtained when the user logs in. To actually protect routes so that they are only accessible for authenticated users, simply implement the respective Ember.SimpleAuth mixin in the route classes:


App.ProtectedRoute = Ember.Route.extend(
  Ember.SimpleAuth.AuthenticatedRouteMixin,
);

anchorMore

There is more documentation as well as examples in the repository on github. Also the code base is quite small so I suggest to read through it to better understand what’s going on internally.

Patches, bug reports etc. are highly appreciated of course - get started by forking the project on github!

anchorIf you're facing challenges with Ember.js and need a helping hand, reach out!

Contact us!

Stay up to date on Ember

Subscribe to our newsletter and stay up to date about the latest events, workshops, and other news around Ember.

Grow your business with us

Our experts are ready to guide you through your next big move. Let us know how we can help.
Get in touch