How to authenticate user in rails using devise (#part1)

What Will I Learn?

• You will learn how to create an app in Rails using MySql
• You will learn how to add gems to your rails project
• You will learn how to setup Devise in your rails project
• You will learn how to customise devise gem in rails

Requirements

• OS: Ubuntu/Mac OS
• A text editor like sublime
• Basic understanding about Ruby on Rails

Difficulty

• Intermediate

Tutorial Content

Today in this tutorial we will learn how to create a app in rails. And then how to authenticate users using Devise and some customisation according to the requirements. So let's start creating this beautiful app.

• First of all lets create our new rails app

rails new 'app_name' -d mysql

Hope you have already selected the compatible version ruby and rails

We are using mysql database here thats why we use the command mysql in while creating new app

• Next is to go your project path in the terminal and use the following command

bundle

• Next is to open the project in the editor
• Now go to gem file and add the following add the following gem into that

gem 'devise'

or if you want to add specific version then use

gem 'devise', '4.4.3'

• Next is to install the gem into your app by the following command

bundle

Then create db and migrate it. To do this write both command one by one in your terminal

rake db:create
rake db:migrate

• Once you install it then start your server

rails s

Next is go to your browser then enter the url localhost:3000
You will redirect to the rails root page
You can overwrite the default rail toot path by going to routes.rb file then write the following code

 root :to => ‘controller name#method name’

When you will hit the localhost:3000 the custom root will open rather then rails root path
Next is to generate devise controller

rails generate devise:controllers users

Note :- User is here our model name so theats why users used here**

Next is to generate devise user views

rails g devise:views User

Since we are using users in devise so we have to scope within devise in routes.rb

scope module: :users do
        devise_for :users
      end

Next is to customise the devise sign up form. we are going to add first name, last name and mobile number of user, for that we need to add some fields to users table. For that run the following commands in your terminal at project path.

rails g migration add_fields_to_users

Then add columns at file which is at db > migrate > migrate name in your project directory

class AddFieldsToUser < ActiveRecord::Migration
  def change
    add_column :users, :first_name, :string
    add_column :users, :last_name, :string
    add_column :users, :mobile_number, :integer
  end
end

Then run the migrate

rake db:migrate

Now you can check the fields are added or not in the database users table. For that use the following commands in the terminal:

mysql -u root -p
show databases;
use database_name;
show tables;
select * from users;

It will show the user table with all its data and fields
I will also upload tutorial about mysql for more information in my upcoming tutorials

Next is to overwrite the form for that. Go to views > users > registrations > new.html.erb in your project

<style type="text/css">
  .field {
    padding: 10px;
  }
</style>

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

 

    <div class="field">
    <%= f.label :first_name %><br />
    <%= f.text_field :first_name, autofocus: true %>
  </div>

    <div class="field">
    <%= f.label :last_name %><br />
    <%= f.text_field :last_name, autofocus: true %>
  </div>
 <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>
    <div class="field">
    <%= f.label :mobile_number %><br />
    <%= f.number_field :mobile_number, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

So we perform all the steps, the last one is to permit the params. Go to controllers > registration_controller.rb and the following method

def configure_sign_up_params
      devise_parameter_sanitizer.permit(:sign_up, keys:  [:first_name, :last_name, :mobile_number])
  end

And also add before action at the top of the controller under registration controller

  before_action :configure_sign_up_params, only: [:create]

Now our app is ready to add the user first and last name and mobile number for the user, go to your browser and fill the details and click on submit to complete signup. In next tutorial we will learn how to add more customisations to Devise.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---