Clone this wiki locally
CHANGES This page has been updated for the
Legacy instructions are gone - clone this wiki repo and checkout the
ember-auth allows customizing for implementation-specific behavior by using
different adapters and extending from different modules. We will use
requestadapter - use
jQuery.ajax()to send server requests
responseadapter - responses will be formatted in json
strategyadapter - use token authentication
sessionadapter - persistent storage (if any) in cookies
emberDatamodule - integration for
ember-dataas persistence library
We have already installed these as gems. Include them into our assets.
# ... #= require ember-auth #= require ember-auth-request-jquery #= require ember-auth-response-json #= require ember-auth-strategy-token #= require ember-auth-session-cookie #= require ember-auth-module-ember-data # ...
Extend our app's
auth object from
EmberAuthRailsDemo.Auth = Em.Auth.extend request: 'jquery' response: 'json' strategy: 'token' session: 'cookie' modules: ['emberData']
Include it into the sprockets stack:
#= require ./auth #= require ./store #= require_tree ./models #= require_tree ./controllers #= require_tree ./views #= require_tree ./helpers #= require_tree ./templates #= require_tree ./routes #= require ./router #= require_self
Remember our server's token authentication API? It exposes two end points:
We also expect to pass the
auth_token in as a key-value pair in the query
params / post data. This is the default, but we'll declare it explicitly
We will pass this to
EmberAuthRailsDemo.Auth = Em.Auth.extend # ... signInEndPoint: '/api/sign_in' signOutEndPoint: '/api/sign_out' tokenKey: 'auth_token' tokenIdKey: 'user_id' tokenLocation: 'param'
We will make an ever-present widget for our auth UI. In a production app you can have it at the end of your navbar, probably with links to the "account" page, etc. It is also the simplest to make.
Start with a
template, for the auth widge area.
If you have worked with devise views,
you will be familiar with branching with the condition
if current_user # signed in else # signed out end
ember-auth equivalent is
We plan to display an
auth/sign-out template if the user is already
signed in, and
auth/sign-in if not.
if auth.signedIn render 'auth/sign-out' else render 'auth/sign-in'
auth/sign-in template will be paired with its controller, which will
password properties, and will implement a
action to handle the actual sign in.
EmberAuthRailsDemo.AuthSignInController = Em.Controller.extend email: null password: null actions: signIn: -> @auth.signIn data: email: @get 'email' password: @get 'password'
On to the
template first, so that we have a full picture. It is a simple
form, with input fields binding to the controller's
properties. We will use the default
input helper for simplicity.
form submit='signIn' label Email =input type='text' value=email label Password =input type='password' value=password button Sign In
ember stuff. We have utilized the
auth.signIn() helper in
the submit action. It accepts an object of params under the
to be passed to the sign in API end point. In our case, our server expects
password, so we pass them in.
ember-auth will then send a
POST request to our specified API end point,
auth.userId (among others) when it has
successfully retrieved the authentication token.
auth/user template is similar - and simpler. We just need to implement
signOut action, which calls the
EmberAuthRailsDemo.AuthSignOutController = Em.Controller.extend actions: signOut: -> @auth.signOut()
form submit='signOut' button Sign out
auth.signOut() helper also accepts an object of params,
again under the
data key, to be passed to the sign out API end point.
However, since we have already signed in, the authentication token would
also be passed in this API call. So, in our case, we don't need to do
The helper will set
auth.userId (among others) to
null when it receives a successful response.
Insert the UI
We want our widget to be ever-present in our app, so let's add it to our
render 'auth' outlet
Fire up the server.
$ foreman start
You should see the new sign in form (because you have not signed in yet).
Feel free to try signing in and out, with our seed
You can also open your console, inspect the async requests, and see what
ember-auth is doing behind the scenes.
Continue to Model UI.