How to Use Devise Authentication With Emberjs

Jul 20, 2016 • 7 min read

Here's a guide to setup Devise with your Ember app. Devise is Ruby community-wide default for authentication.

Ember-simple-auth is Ember community-wide default for authentication. These two work well together - use them and don't reinvent the wheel.

Backend Setup

What you should use:

devise gem as an authentication base
simple_token_authentication as a token handler - token authentication support has been removed from Devise; for security reasons you should use the gem
rack-cors to support Cross-Origin Resource Sharing

Step 1: Setup Your Models

Setup them as in README of simple_token authentiaction. Remember to run migration that adds an authentication token to Users' table.

[code]

Step 2: Setup Your Base Controller

Make sure that you scope your controllers under /api namespace and directory. Create some base controller class that will acts_as_a token_authentication_handler_for the User. Remove protect_from_forgery with: :exception - it won't work with Ember as forms are not rendered by Rails.

[code]

Step 3: Setup Your Session Controller

Your session controller should inherit from Devise::SessionController and override create action. In this action, you return data that will be handled on the frontend as session data. You should put at least authentication params (email/token). There, you can add anything that is necessary - like user id, role, full name or profile id.

[code]

Step 4: Setup Your Routes

Use devise_for in your routes to specify the session controller: devise_for :users, controllers: { sessions: 'api/sessions' }

[code]

Step 5: Disable Session Store as Cookie

The Rails application should not issue session cookies. Instead, authentication should be done exclusively via the authentication token. The easiest way to disable sessions in Rails is to add an initialiser config/initialisers/session_store.rb and disable the session store in this file.

[code]

Step 6: Add CORS Middleware

Add CORS middleware to your config/application.rb.

[code]

Frontend Setup

What you should use:

ember-simple-auth for base authentication and devise integration
ApplicationRouteMixin from ember-simple-auth that will handle authentication actions
AuthenticatedRouteMixin from ember-simple-auth that will redirect the user if she/he is not authenticated
UnauthenticatedRouteMixin from ember-simple-auth that will redirect the user if she/he is authenticated
DataAdapterMixin from ember-simple-auth that will authorise EmberData requests

Step 1: Setup Application Route

Extend in base application route ApplicationRouteMixin from ember-simple-auth.

In app/pods/application/route.js

[code]

Step 2: Create Login Route

Create login route that extends UnauthenticatedRouteMixin from ember-simple-auth.

app/pods/login/controller.js

[code]

app/pods/login/route.js

[code]

app/pods/login/template.hbs

[code]

app/router.js

[code]

Step 3: Create Signed-in Route

This route should be above all routes that must be restricted for authenticated users. It may have the path set to empty string if necessary. It should extend AuthenticatedRouteMixin from ember-simple-auth.

app/pods/signed-in/route.js

[code]

app/pods/signed-in/template.hbs

[code]

app/router.js

[code]

Step 4: Create Devise Authenticator

Create file named devise.js in app/authenticators.

[code]

Step 5: Create Devise Authoriser

Create file named devise.js in app/authorizers.

[code]

Step 6: Setup Application Adapter to Authorise Ember Data

Create application.js adapter in app/adapters/.

[code]

Step 7: Setup Your Session Service

Create session.js file in app/services that will inherit from ember-simple-auth session service. You can put here some computed properties or currentUser method.

Step 8: Setup Your Environment

Update your connect-src key in contentSecurityPolicy. Add route names for routeAfterAuthentication and routeIfAlreadyAuthenticated keys in ember-simple-auth config object.

[code]