How to setup an Angular 2+ frontend with User Register/Login capabilities using Ruby on Rails backend and Devise Token Auth gem Intro TD;DR: We’ll create a simple Rails & Angular (2+) web application that allows a user to create an account, login with it and view his profile using and token authentication. Devise Final result Prerequisites This tutorial assumes you’re comfortable with (RoR), more precisely with the version 5 and Rails API Mode, and somewhat familiar with . This is not exactly a “Getting Started with Rails and Angular” kind of tutorial for absolute beginners, but I’ll go into as much details as I can. Ruby on Rails Angular 2+ I’ll also assume you have and installed on your system, if not, there are great tutorials online if you Google around. NodeJS 6.9+, NPM Postgres Frontend and backend will be running on separate servers, communicating with each other via a REST API. Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section, there’s no need for violence :) Angular features we’ll use Components Services Dependency injection Forms and form validations Component inputs Component outputs View Children Router and Router Guards Part 1: Backend Rough plan Bootstrap and configure a RoR app in API mode Link to Postgres database Install, configure devise-token-auth gem Create and Configure our Devise User model Seed the DB with a default test user Create, Migrate and Seed our database Run the server and test the API If you don’t want/need to go through this process, you can just download the final code from this repo: https://github.com/avatsaev/rails-devise-token-seed and jump straight to Part 2: Bootstrapping and configuring the frontend . Let’s get started. Setup First let’s bootstrap a new Rails project in API mode and Postgres database (DB) config: $ rails new rails_devise_token_auth --api --database=postgresql This will create a barebones Rails 5 app in API mode (without views and without the asset pipeline, JSON will be the default response format) Next, we’ll add a few useful gems to our Gemfile: gem 'devise_token_auth'
gem 'omniauth'
gem 'rack-cors', :require => 'rack/cors' leverages and will allow us to do user management via a REST API, omniauth is a devise_token_auth dependency. Devise Token Auth Devise We need rack-cors, which allows us to do cross domain AJAX requests (because we are running in API mode, so the backend will most certainly run on a separate server and domain when in production). Install the gems: $ bundle install Let’s configure cors, edit the file (create if doesn’t exist), replace its contents with the following: ./config/initializers/cors.rb Rails.application.config.middleware.use Rack::Cors do

  allow do

    origins '*'

    resource '*',

    :headers => :any,

    :expose  => ['access-token', 'expiry', 'token-type', 'uid', 'client'],

    :methods => [:get, :post, :options, :delete, :put]

  end

end For this tutorial we’ll allow all domains to contact our server, expose some custom headers retuned by Devise Token Auth, and allow the most commonly used http request methods, although we won’t need all of them. Database configuration Assuming you already have a Postgres server installed and running on your system, because Postgres is already initialised with a public postgres user and database, and initial Rails DB config uses postgres as default user and localhost as default host, but , don’t forget to edit the file: we do not have to change anything, if your Postgres server has a custom password protected user ./config/database.yml default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: rails_devise_token_seed_development
  username: YOUR_CUSTOM_USERNAME
  password: YOUR_PASSWORD

test:
  <<: *default
  database: rails_devise_token_seed_test
  username: YOUR_CUSTOM_USERNAME
  password: YOUR_PASSWORD Initialise Devise User Model If you read the you’ll see how to initialise our user model: DeviseTokenAuth README $ rails generate devise_token_auth:install User auth will be our model name, and will be the endpoint of our user management rest api (ex: / /sign_in, / /sign_out) User auth auth auth Generated output of this command should look something like this: create  config/initializers/devise_token_auth.rb

create  db/migrate/20170131161242_devise_token_auth_create_users.rb

create  app/models/user.rb

insert  app/controllers/application_controller.rb

gsub  config/routes.rb The most interesting files for us are highlighted in bold. The first one is a database migration file that will initialise the table for us with all required fields. users We also have model initialised, as well as the endpoint mounted in User auth routes.rb Configure User Model For this tutorial, we’ll disable account email validation by opening the User model ( ) file and removing module from the devise configuration, so the User model should look something like this: ./app/models/user.rb confirmable class User < ActiveRecord::Base


  devise :database_authenticatable, 
         :registerable,
         :recoverable, 
         :rememberable, 
         :trackable,  
         :validatable, 
         :omniauthable

  include DeviseTokenAuth::Concerns::User

end Create a default User seed We’ll initialise the table with a default user that will allow us to test our API as we go. In add the following line: users ./db/seeds.rb User.create(email: 'user@example.com', nickname: 'UOne', name: 'User One', password: "monkey67") Our login will be with password user@example.com monkey67 Create, Migrate and Seed the DB $ rails db:create && rails db:migrate && rails db:seed This one liner will create the test and dev databases, migrate the table, and create our default user in it: users Test the API Now we can finally start our backend server and test the API, start the Rails server by issuing the following command: $ rails s And we’ll try to login with our default user credentials, to test REST APIs I use the (which is a great tool btw, you if you work with REST APIs, I can’t recommend it enough) but you can use whatever tool you like or just curl in your terminal. Paw App for macOS By reading the we can see that we need to make a request to endpoint with and parameters in order to login and get our auth token, so we’ll do just that: Devise Token Auth documentation POST /auth/sign_in email password Response body Response headers It’s alive! (Paw Print of the request and response: ) https://paw.pt/b4LiggBt The server will return the user data in response body, and the auth token in response headers (acess-token key) Alternatively you can use this curl command to test it in the terminal: curl -v -X "POST" "http://localhost:3000/auth/sign_in" \
     -H "Content-Type: application/json; charset=utf-8" \
     -d $'{
  "email": "user@example.com",
  "password": "monkey67"
}' So now that our backend have the minimal functionality, let’s attack the frontend. Click here for the Part 2: Setting up Angular frontend

Fetch

Angular 2+ and Ruby on Rails user authentication

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Angular 2+ and Ruby on Rails user authentication Part 2

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Angular 2+ and Ruby on Rails user authentication Part 2

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps