Basic authentication for a Rails app
In this article we will go through the creation of an email authentication system with the Devise gem.
We assume that you have already created a basic rails app and that you now want to add an account feature to enable your customers to sign up / log in to your application / website.
Basic set up and sign up feature
- Open your gemfile and add :
gem 'devise'
2. In your Terminal, to install the gem we just added, type :
bundle
3. We now need to generate a Devise object for our application. In the Terminal, type :
rails g devise:install
4. The next step consists in creating a “User” Model for Devise. To do so, type in your Terminal :
rails g devise User
Note : we named our model “User”, but you can choose the name that you want to fit your business’ needs (e.g. customer, client, user).
5. To write those changes in your database, type in your Terminal :
rake db:migrate
6. To generate all the views that we need to implement our account feature, enter in your Terminal :
rails g devise:views
7. In your project’s folder, open the development.rb file that you will find in the config > environments folder. At the end of this file, type :
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }8. In app/views/layouts/application.html.erb, type in the body tag:
<body>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
</body>
9. If your now run your application, you should be able to create an account ! In your Terminal, type :
rails s
Open your web browser, and type :
localhost:3000
Try to create an account, then drag and drop in sqlitebrowser your development.sqlite3 file that you can find in the db folder of your app. In sqlitebrowser, under “Browse data” go to the user table. You should see the recently created account!
Adding login and logout features
You might want to customize your nav bar to reflect different options if the user is logged in or not. Here’s a code snippet showing some of Devise’s builtin views :
- new_user_session_path which renders the log in view
- new_user_registration_path which renders the sign up view
- edit_user_registration_path which renders the edit view
- destroy_user_session_path which renders the log out view
<div id=”navbar” class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav navbar-right”>
<% if (!user_signed_in?) %>
<li><%= link_to “Log in”, new_user_session_path %></li>
<li><%= link_to “Sign up”, new_user_registration_path %>
</li>
<% else %>
<li><%= link_to "Edit profile", edit_user_registration_path
%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Account settings"> Account settings</a></li>
<li><%= link_to "Log out", destroy_user_session_path,
method: :delete %></li>
<% end %>
</ul>
</div>
Adding additional fields to a signup form
In our basic set up explanation, we set up the authentication system with devise’s basic fields for the sign up (i.e. email, password). If we want to add additional fields to our sign up features such as first name, last name, company, etc., we need to follow these steps :
- If we want to add first name and last name to our sign up process, we need to add new properties to our User model (add columns to our User database). In the Terminal, type :
rails g migration AddDetailsToUser firstname:string lastname:string
rake db:migrate
2. You now have to implement the validation in your User model. The validation will check that the first name and last name are well entered in the sign up process. Go to app/models/user.rb and type :
validates :firstname, presence: true, length: {maximum: 30}
validates :lastname, presence: true, length: {maximum: 30}3. For security reasons, we now have to allow these new parameters in the controllers. Go to app/controllers/application_controler.rb and type :
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) << :firstname, :lastname
devise_parameter_sanitizer.for(:account_update) << :firstname,
:lastname
end
4. Let’s now modify the views to add the first and last name fields in the signup and modify account views. Open the app/views/devise/registrations/new.html.erb & app/views/devise/registrations/edit.html.erb files and in the form_for tag, add:
<div class="form-group">
<%= f.text_filed :firstname, class=> 'form-control', :placeholder =>
'Fist name', autofocus: true %>
</div>
<div class="form-group">
<%= f.text_filed :lastname, class=> 'form-control', :placeholder =>
'Last name', autofocus: true %>
</div>
Want to learn more ?
Go to this article to learn how to set up a confirmation email in the signup process.