User Sign-In with the Devise Gem

Topics covered in this Ruby on Rails tutorial:

Installing the Devise gem, Alerts, User logins

Exercise Overview

This is the final piece of setup for the That Nutty Guy site. In the last exercise of the Rails 1 class, we learned how to configure the Devise gem, which we use for user authentication in Rails. We’re going to need that in several places on this site.

1. If you completed the previous exercises, you can skip the following sidebar. We recommend you finish the previous exercises (B1–B2) before starting this one. If you haven’t finished them, do the following sidebar.

   If You Did Not Do the Previous Exercises (B1-B2)

   1. Close any files you may have open.
   2. Open the Finder and navigate to Class Files > yourname-Rails Class
   3. Open Terminal.
   4. Type cd and a single space (do NOT press Return yet).
   5. Drag the yourname-Rails Class folder from the Finder to the Terminal window and press ENTER.
   6. Run rm -rf nutty to delete your copy of the nutty site.
   7. Run git clone https://bitbucket.org/noble-desktop/nutty.git to copy the That Nutty Guy git repository.
   8. Type cd nutty to enter the new directory.
   9. Type git checkout B2 to bring the site up to the end of the previous exercise.
   10. Run bundle to install any necessary gems.
   11. Run yarn install --check-files to install JavaScript dependencies.

Adding the Devise Gem

First, we need to get the Devise gem installed, configured, and ready to use.

1. For this exercise, we’ll continue working with the nutty folder located in Desktop > Class Files > yourname-Rails Class > nutty

   If you haven’t already done so, we suggest opening the nutty folder in your code editor if it allows you to (like Sublime Text does).

2. In your code editor, open nutty > Gemfile

3. Add the following code at the bottom of the file as shown in bold:

   # Use bcrypt
   # gem 'bcrypt', group: [:development, :test]
   
   # Use Devise gem for user authentication
   gem 'devise'
   

   NOTE: We always like to add a comment to explain the purpose of the gem so that anybody who looks at it later will know what it’s for.

4. Save the file, then close it.

5. We need to run the bundler, so in Terminal, type:

   bundle
   

   NOTE: Don’t forget to hit Return after every command in Terminal unless we specifically say not to. We won’t keep reminding you.

6. Whenever we install a new gem, we need to stop and restart our Rails server. Type:

   pgrep ruby
   

7. Terminal will return a number for the process id we need to kill. Type kill followed by a space and then the number.

   kill #####
   

8. Restart the Rails server by typing:

   rails s -d
   

9. In case you can’t remember all the steps for adding the Devise gem, there’s a handy guide you can refer to: github.com/plataformatec/devise (scroll down to Getting started).

10. Next we need to run the generator. In Terminal, type:

    rails generate devise:install
    

    The next thing we need to do is configure our Devise model. Usually the model would be called user but as you’ll see when we start building the admin interface for the site, we’re actually going to have two different authenticatible user models. One will be called admin user which will be able to administer our site. And just to keep them separate and to make our code work better, we’ll call our customer-facing user model customer.

11. Type:

    rails g devise Customer
    

12. Apply the migration by typing:

    rails db:migrate
    

13. We need to restart the server one more time. Type:

    pgrep ruby
    

14. Terminal will return a number for the process id we need to kill. Type kill followed by a space and then the number.

    kill #####
    

15. Restart the Rails server by typing:

    rails s -d
    

Creating the Sign In Page

1. Launch a browser and navigate to: localhost:3000

2. Notice the Sign In link at the top right of the page. Let’s create a Sign In page.

3. In your code editor, navigate to:
   nutty > app > views > layouts > application.html.erb

   If the user is signed out, we want to show a Sign In link. If the user is signed in, we want to show a Sign Out link.

4. Add the following bold code around the Sign In link (around line 36):

   <% if customer_signed_in? %>
      <a href="cart.html">Sign In</a>
   <% end %>
   

   NOTE: In the first line, customer would be whatever your model name is. For example, if your model name is user, you would type user_signed_in?

5. Save the file.

6. Let’s figure out what route to link to. In Terminal, there’s an easy way of seeing a list of all the routes associated with our application. Type:

   rails routes
   

7. The appropriate route for us right now is new_customer_session which will allow the customer to sign in. Return to application.html.erb in your code editor.

8. Around line 37, highlight this line of code:

   <a href="cart.html">Sign In</a>
   

9. Replace it as shown in bold to allow the customer to sign in:

   <% if customer_signed_in? %>
   <% else %>
      <%= link_to 'Sign In', new_customer_session_path %>
   <% end %>
   

10. On the other hand, if the customer needs to sign out, we’ll use destroy_customer_session (which is listed in Terminal’s list of routes). Type:

    <% if customer_signed_in? %>
       <%= link_to 'Sign Out', destroy_customer_session_path, method: :delete %>
    <% else %>
       <%= link_to 'Sign In', new_customer_session_path %>
    <% end %>
    

11. Save the file.

12. Go back to Terminal.

13. The HTTP Verb is very important. You can see it in the list of routes in Terminal under the Verb column. Take note of the following two verbs:

    • The verb for new_customer_session is GET which is the default, so we didn’t need to specify that in the code we just typed.
    • The verb for destroy_customer_session is DELETE, so that’s why we added method: :delete in the code we just typed.

Flash Alerts & User Logins

One more thing we need to do: we need to display the Flash, an important parameter in Rails that’s used to convey messages between one page and another. For example, it might say, “You entered the wrong user name” or “You’ve been logged in successfully!” In order for these messages to be displayed to site users, we need to add the Flash somewhere in our design.

1. To simplify things, we included a file you can copy from. In your code editor, open: Desktop > Class Files > yourname-Rails Level 2 Class > snippets > flash.rb

2. Select all (Cmd–A) the code and copy (Cmd–C) it, then close it.

3. Go back to application.html.erb and paste it (Cmd–V) right above the main content around line 61:

   <div class="container">
      <div id="main" role="main">
   
         <% if flash[:alert] %>
            <div id="flash" class="alert"><%= flash[:alert] %></div>
         <% elsif flash[:notice] %>
            <div id="flash" class="notice"><%= flash[:notice] %></div>
         <% end %>
   
         <%= yield %>
   
      </div>
   </div>
   

4. Save the file. Now we’re ready to test the login!

5. Go to your browser and reload localhost:3000

6. Click the Sign In link at the top right of the page.

7. Cool, we’ve got a sign in page! Since we’re new, we need to create a new account. Below the red Sign In button, click the Sign up link.

8. Enter your email and create a password.

9. Click the Sign Up button.

   That should take you to the main page where there is a green alert banner telling you that you’ve signed up.

10. In the top right corner, there’s a Sign Out link. Click it.

    That should sign you out and alert you accordingly.

11. Click the Sign In link at the top right of the page.

12. Enter your email and password and sign in. Yay, it works!

    Hopefully you found this to be a helpful guide as to where the foundational elements of this site came from. If you did these bonus exercises first, you are now ready to continue on with Exercise 8A: Getting Started with Active Admin.