How to Set up Rails Devise Authentication with Angular

Marek Łukaszek

May 17, 2016 • 5 min read

Web development is changing at a lightning speed. Rails-only apps are not good enough for many solutions and the frontend frameworks are gaining huge popularity these days.

It's only a matter of time before you're presented with a task to integrate the Rails backend with the javascript framework as it's been trending this week. This time, I will help you with Angular!

I assume you have:

  • angular app placed in a different repo/directory than your backend API,

  • no devise gem in your Gemfile yet (devise_token_auth have it as a dependency),

  • Rails app created using rails new generator.

What You Will Use:

Pros:

  • easy to use,

  • not a custom solution - it’s always the same,

  • allows OmniAuth authentication.

Cons:

  • some edge cases can be harder to handle because of the library choice.

Step 1

Add the following gems to your Gemfile on the backend side:

gem 'devise_token_auth'
gem 'rack-cors'

And run bundle install.

Step 2

Setup User model using:

$ rails g devise_token_auth:install User api/auth

This will create:

  1. A basic user model with a corresponding migration (you should check both the migration and the model to remove/rename stuff you don't need).

  2. Routes for authentication controllers where the angular library will make its calls.

Step 3

Setup CORS in config/application.rb:

[code]

IMPORTANT: Those are the settings for dev environment!
For production and staging environments, you should change them to be more restricting (point origins to the frontend address and limit the resource access).

This is most of the stuff you need to do on the backend side. Of course, there may be some more things to configure, e.g. setting protect_from_forgery :null_session for XHR requests. It depends on the architecture you'll implement - most likely, it should be for API::BaseController.

Step 4

On the angular side (if you don't have a frontend app yet, using generator-gulp-angular is not a bad choice), you need to install ng-token-auth. This tutorial expects you to use Bower, and if you do, all you have to do is run:

$ bower install --save ng-token-auth

This will install the library and save it as a dependency in bower.json file inside your project.

Step 5

Now, angular needs to know to use ng-token-auth in your application, so you have to add it as a dependency for the angular module.

Example code:

[code]

Step 6

Next, you need to configure ng-token-auth by calling .config() on the module. There are many options you can adjust there, so I highly advise you to check out the documentation. Here's an example of a simple configuration where you only change API url to where the angular app will make its calls:

[code]

apiUrl points to your localhost rails server. Normally, this variable should be put inside a config file, but - for the sake of simplicity - in this tutorial, we will just leave it like that.

Step 7

Since you configured your library to make requests to the proper URL, you can finally use it in the app. All available methods can be found in ng-token-auth documentation.

Summary

During this tutorial you have learned:

  • how to setup rails for authentication using devise_token_auth gem,

  • how to setup CORS for requests to the backend,

  • how to setup angular app to handle authentication with a backend server using tokens.

Thanks for reading and happy coding!

Related topics

More posts by this author

Marek Łukaszek

Codestories Newsletter