How To Set Up Rails Devise Authentication With Angular

Web development is changing in a lightning speed. Rails-only apps are often not good enough for many solutions and front-end frameworks are gaining huge popularity these days. It's only a matter of time before you will be presented with a task to integrate Rails backend with javascript framework trending this week. This time I will help you with Angular!

I assume you have:

• An angular app placed in another 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 the most of the stuff you need to do on the backend side. Of course there may be some more things to configure, like setting protect_from_forgery :null_session for XHR requests. It depends on the architecture you will 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, then all you have to do is to 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 backend

• How to setup angular app to handle authentication with backend server using tokens

Thanks for reading and happy coding!