[Rails] How to log in with a name by adding a devise name column

Introduction

I was addicted to it when I started using devise, so I will leave it in the article.

• This article assumes that devise has already been installed. Please refer to the previous article [Rails] devise installation method for the installation method.

【environment】

• macOS Catalina 10.15.7
• Vagrant 2.2.4 (CentOS 7.1)
• Ruby 2.5.7
• Rails 5.2.4.4
• devise 4.7.3

procedure

The overall flow is as follows.

** 1. Add name column 2. Change the settings of devise.rb 3. Edit the controller 4. Edit View **

1. Add a name column

Create a new migration file. To add the name column to the User model, execute the command as shown below.

Terminal

$ rails g migration add_name_to_users name:string

It is OK when the following screen is displayed.

Terminal

    invoke  active_record
    create    db/migrate/20201104152112_add_name_to_users.rb

When you check the migration file, it is described as follows.

db/migrate/YYYYMMDDHHMMSS_add_name_to_users.rb

class AddNameToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :name, :string
  end
end

Execute migration to reflect it in the DB.

Terminal

$ rails db:migrate

It is OK if the following is displayed.

Terminal

== 20201104152112 AddNameToUsers: migrating ==================================
-- add_column(:users, :name, :string)
   -> 0.0042s
== 20201104152112 AddNameToUsers: migrated (0.0043s) =========================

The name column is now added to the User model and reflected in the DB.

2. Change the settings of devise.rb

In order to log in with name instead of email, you need to change the settings in devise.rb. (I was addicted to it before because I hadn't made this change. Don't forget to do it!)

in app/config/initializers/devise.rb ** config.authentication_keys = [: email] ** Uncomment Change ** config.authentication_keys = [: name] **.

app/config/initializers/devise.rb

#Searching for the relevant part with ⌘F is quick.

  # ==> Configuration for any authentication mechanism
  # Configure which keys are used when authenticating a user. The default is
  # just :email. You can configure it to use [:username, :subdomain], so for
  # authenticating a user, both parameters are required. Remember that those
  # parameters are used only when authenticating and not when retrieving from
  # session. If you need permissions, you should implement that in a before filter.
  # You can also supply a hash where the value is a boolean determining whether
  # or not authentication should be aborted when the value is not present.

  # config.authentication_keys = [:email]Change this line as below
    config.authentication_keys = [:name]

You have now changed your settings to authenticate with name instead of email.

3. Edit the controller

Then edit application_controller.rb.

controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end

before_action :configure_permitted_parameters, if: :devise_controller? To briefly explain this, the first thing to do when using devise is to run the configure_permitted_parameters method. The method is defined below it.

devise_parameter_sanitizer.permit(:sign_up, keys: [:name]) This indicates that you are allowed to send the value of name when you sign up. Email and password values ​​are allowed by default.

In other words, it's okay if you think that the value of name is made available by the configure_permitted_parameters method when the devise process is executed.

(If you are wondering what protected is, you can be happy by searching for "rails strong parameters" etc.)

4. Edit View

You can create a devise-related view with the following command.

Terminal

$ rails g devise:views

Terminal

      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_error_messages.html.erb
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

The view creation is complete.

There are two tasks from here.

-** Edit the sign-up screen so that you can register your name. ** ** -** Edit the login screen so that you can log in with name. ** **

I will look at them in order.

First, the view on the sign-up screen will be new.html.erb in app/views/devise/registrations, so edit it.

:app/views/devise/registrations/new.html.erb

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <%#add to%>
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
  </div>
  <%#So far%>

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

#Omission

Start the server and go to/users/sign_up.

You now have a space to enter your name on the sign-up screen.

Next, the view of the login screen will be new.html.erb in app/views/users/sessions, so let's edit this so that you can log in with name.

:app/views/users/sessions/new.html.erb

<h2>Log in</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">

    <%#Delete%>
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
    <%#So far%>

    <%#add to%>
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
    <%#So far%>

  </div>

#Omission

Try accessing/users/sign_in.

You can now log in by name.

References

This article was written with reference to the following information.

User Login Guide Using devise Function & Login by Name Beginners customize devise so that they can register and log in with just name and password in devise! ~ Thorough and slow commentary ~ About editing before_action and strong parameters