All Case Studies Design Development Interviews Our Way Project Management

How To Use Devise Authentication With Emberjs

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 authentication base
  • simple_token_authentication as token handler - token authentication support has been removed from Devise for security reasons you should use the gem for this
  • 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 authentication token to Users table.

[code]

[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_token_authentication_handler_for 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 frontend as session data. You should put here at least authentication params (email/token) and 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 session controller: devise_for :users, controllers: { sessions: 'api/sessions' }

[code]

Step 5: Disable session store as cookie

The Rails application should also not issue session cookies but authentication should be done exclusively via the authentication token. The easiest way to disable sessions in Rails is to add an initializer config/initializers/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 authenticate actions
  • AuthenticatedRouteMixin from ember-simple-auth that will redirect user if she/he is not authenticated
  • UnauthenticatedRouteMixin from ember-simple-auth that will redirect user if she/he is authenticated
  • DataAdapterMixin from ember-simple-auth that will authorize 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 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 authorizer

Create file named devise.js in app/authorizers.

[code]

 

Step 6: Setup application adapter to authorize 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]

Summary

Setting up Devise with Emberjs is not a 5 minute task, but it's actually not that hard. If you have any problems, feel free to comment below.

Follow Netguru
Join our Newsletter

READ ALSO FROM Emberjs
Read also
Need a successful project?
Estimate project or contact us