Integrating a Rails API backend with an Angular frontend using token authentication
In this blog post, I’ll share some code that demonstrates integration between a Rails API backend and an Angular frontend with token based authentication via: ng-token-auth and devise_token_auth.
Part 1: the Rails backend
Add Ruby gems, edit file: Gemfile
Execute bundle install to install the gems.
Setup devise_token_auth by executing:
For this tutorial I decided to use basic email authentication (not omniauth), so I edited the file: app/models/user.rb
Executed rake db:migrate to update the database.
Add rack cors config to file: config/application.rb. Please note: this is wide open and should be locked down in a production environment.
Add a simple model and scaffold a controller:
Add the nested API routes, edit: config/routes.rb
At this point, the link_to and redirect_to paths in the controller and views may need to updated. See: git grep -i -E "(redirect|link)_to"
Update the jbuilder views to include all model attributes:
Update the controller, edit file: app/controllers/api/posts_controller.rb. I removed the format.html in each respond_to block, and updated the permitted/required params list.
Update application controller, file: app/controllers/application_controller.rb, and revise the CSRF token settings.
At this point, you should be able to start rails and cURL the request to create a Post.
Now that the unauth API is working, I added user authentication. Edit file: app/controllers/api/posts_controller.rb
Part 2: the Angular frontend
For the Angular frontend, I chose to use a Yeoman generator and Gulp. I tried out numerous generators (generator-angular, generator-hottowel, Grunt versions, etc), and decided to use generator-gulp-angular because it consistently works for me out of the box.
Install the global NPM packages, and create the new project.
The first thing I modified was the gulp server file, to proxy all “/api” requests to the rails backend. edit file: gulp/server.js, revised the following line:
At this point if you execute gulp serve, the angular frontend will launch on port 3000. You should see the default boilerplate code (‘Allo, ‘Allo!). To ensure the backend proxy code is working, browse to “http://localhost:3000/api/posts”, and it should be routed directly to rails.
Install 2 more bower packages for token auth and rails resources:
Include the new modules, edit file: src/app/index.module.js
To override the default ng-token-auth authProvider configuration, edit file: src/app/index.config.js
Edit the routes file, src/app/index.route.js. I added the Post factory, and the new route for posts:
Add the new posts controller, new file: src/app/posts/posts.controller.js
Update the navbar component and link to the new posts route, edit file: src/app/components/navbar/navbar.html
Create the template file for posts, new file: src/app/posts/posts.html
The frontend posts page should now resemble:
Create a new user via the rials console, rails c:
Now you can sign into the frontend, and request posts: