Blog: Out-of-the-box FastBoot support in Ember Simple Auth

Seamless Session Synchronization

Ember Simple Auth 1.2 seamlessly synchronizes the session state between the browser and FastBoot server. When a user logs in to an Ember.js application and refreshes the page or comes back to the app later - triggering a request that's handled by the FastBoot server - Ember Simple Auth will send the session state along with that request, pick it up in the app instance that's running in the FastBoot server and make sure the Ember route is being loaded and rendered in the correct session context. If the session turns out to be invalid for some reason, the server will invalidate it and the user will be redirected to the login page via a proper HTTP redirect.

Under the hood

Ember Simple Auth has always had the concept of session stores that persist the session state so that it survives page reloads (or users leaving the app and coming back later). One of these session stores turned out to be the perfect fit for the aforementioned session syncing mechanism – the cookie session store. Browsers will automatically send cookies for a particular origin along with any request to that origin. Also, servers can modify cookies sent by the browser and include updates in the response that the browser will automatically pick up - effectively enabling bidirectional state synchronization.

The main challenge with enabling the cookie session store to run both in the browser as well as in Node though was that the APIs for cookie handling are obviously totally different in both environments. In the browser there is document.cookie while in server apps running in Node, cookies are being read and written via the Cookie and Set-Cookie headers. That meant we had to come up with a way to read and write cookies via a common interface that we could rely on in the cookie session store and that abstracted these environment specific APIs under the hood (much like what ember-network does for the fetch API). Therefore we created ember-cookies which is a cookies abstraction that works in the browser as well as in Node and that's now being used internally by the cookie session store.

ember-cookies exposes a cookies service with read, write and clear methods:

// app/controllers/application.js
import Ember from 'ember';

const { inject: { service } } = Ember;

export default Ember.Controller.extend({
  cookies: service(),
  intl: service(),

  beforeModel() {
    let locale = this.get('cookies').read('locale');
    this.get('intl').set('locale', locale);
  }
});

Using Ember Simple Auth with FastBoot

As most of Ember Simple Auth's support for FastBoot is based on the cookie session store, enabling FastBoot support is as easy as defining the application session store as:

// app/session-stores/application.js
import Cookie from 'ember-simple-auth/session-stores/cookie';

export default Cookie.extend();

If you're interested in learning more about the underlying concepts check out the talk about Authentication and Session Management in FastBoot that I gave at EmberCamp in London in June.

Other Changes and Fixes

Out-of-the-box support for FastBoot is likely the most prominent addition in this release but there are quite some other changes as well, including:

• The default cookie names that the cookie session store uses are now compliant with RFC 2616, see #978
• Server responses are now validated in authenticators, preventing successful logins when required data is actually missing, see #957
• The OAuth 2.0 Password Grant authenticator can now send custom headers along with authentication requests, see #1018

In addition to these changes, fixed issues include:

• Routes like the login route can now be configured inline in routes using the respective mixins as opposed to config/environment.js, see #1041
• The cookie session store will now rewrite its cookies when any of its configurable properties (like cookie name) change, see #1056

A Community Effort

This certainly is one of the larger releases in Ember Simple Auth's history and a lot of people have helped to make it happen. We'd like to thank all of our (at the time of this writing) 141 contributors, with particular mention to Steven Wu, Kyle Mellander, Arjan Singh and Josemar Luedke for awesome contributions to the Fastboot effort and ember-cookies.

Try it!

As this is a beta release, there are probably some rough edges. We'd like everyone to try it, regardless of whether they're using Fastboot already or not and report bugs, outdated or bad documentation etc. on github.