All Case Studies Design Development Interviews Our Way Project Management

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:

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 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 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!

Follow Netguru
Join our Newsletter

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