How to Set up Rails Devise Authentication with Angular

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:

• Devise_token_auth gem - Rails side authentication,

• Ng-token-auth library - Angular side authentication,

• Rack-cors gem - Cross-Origin Resource Sharing.

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]

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!