# Project DoList: User Authentication
This article will describe how to setup user authentication (sign up, sign in, forgot password) using Devise ([https://github.com/heartcombo/devise](https://github.com/heartcombo/devise)).
## Install Devise
To begin, perform the following steps:
1. Add `gem "devise"` to the `Gemfile`
2. Run `bundle install`
3. Run `bin/rails generate devise:install` to generate a config file
To enable emails to be sent from Devise (ex. password reset) perform the following steps:
1. In `config/environments/development.rb` add
```ruby
config.action_mailer.default_url_options = { host: 'http://localhost', port: 3000 }
```
2. In `config/application.rb` uncomment line 10: `require "action_mailer/railtie"`
## Create the User Model
Let's now create a `User` DB model that will store information about authenticated users.
Run the following commands:
1. `rails generate devise User`
2. `bin/rails db:migrate`
Note that running those commands adds the following line in `config/routes.rb`: `devise_for :users`. Adding that line creates all of the routes necessary for user authentication.
To view all defined routes visit `http://localhost:3000/rails/info/routes`. The page looks like this:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721008849032/b44c8410-00b8-4992-9a39-44bd91fa0db5.png align="center")
## Style the Authentication Views
Be sure to restart your local server before moving forward.
Let's add "Sign Up" and "Sign In" buttons to the homepage. Replace `app/views/pages/home.html.erb` with:
```erb
```
The homepage will now look like this:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720999352706/caf7758f-af1a-46ed-810c-a5dedf777e00.png align="center")
You'll notice that if you visit either of those links you will see unstyled forms on each page. So that we can customize each of those pages let's run a command that will copy the templates from the Devise library into our app.
Run the following command: `bin/rails generate devise:views`. You'll now see a new directory: `app/views/devise`. This directory contains all the views for each authentication component (sign up, sign in, forgot password, etc).
Replace the following files with styled markup:
File: `app/views/devise/registrations/new.html.erb`
```erb
<% if !flash.empty? %>
<%= render 'layouts/flash_messages' %>
<% end %>
<%= render "devise/shared/error_messages", resource: resource %>
Create a new account
Or
<%= link_to 'login to your account', new_user_session_path, class: 'font-medium text-indigo-600 hover:text-indigo-500' %>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
```
Here is what the sign up page looks like now:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720999254892/70b0a31b-cb0b-42a6-ae3e-a554f0fc2456.png align="center")
Lastly lets add styling to the flash messages that appear when a validation has failed or an error has occurred. First, add the following file: `app/layouts/_flash_messages.html.erb` and add the contents:
```erb
<% if flash[:alert].present? %>
<%= flash[:alert] %>
<% end %>
<% if flash[:notice].present? %>
<%= flash[:notice] %>
<% end %>
```
Next replace the file `app/views/devise/shared/_error_messages.html.erb` with:
```erb
<% if resource.errors.any? %>
<% resource.errors.full_messages.each do |message| %>
<%= message %>
<% end %>
<% end %>
```
Now error messages look like this:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720999668350/011cd5a8-7fd9-42c5-864e-35b3868a418d.png align="center")
## Create an Authenticated Area
Next lets create a "Dashboard" section that only authenticated users can see. If an unauthenticated user attempts to view the dashboard they will be redirected to the login page.
First let's create a base controller that all other "user" controllers will inherit from. Create the file `app/controllers/users/application_controller.rb` with the following contents:
```ruby
class Users::ApplicationController < ApplicationController
layout 'users'
before_action :authenticate_user!
end
```
Note that `layout 'users`' instructs Rails to use the file `app/views/layouts/users.html.erb` as the base template for the controller views.
Also note that `before_action :authenticate_user!` ensures that the user is authenticated before serving any of the pages. If the user is not authenticated they will be redirected to the login page.
Let's create the layout file that will be used for all the user pages: `app/views/layouts/users.html.erb` with the following content:
```erb
DoList: A free and open source alternative to Todoist
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application" %>
<%= yield %>
```
Let's make a quick change to allow "Sign Out" links to work with a `GET` request instead of the default `DELETE` request. In the file `config/initializers/devise.rb` uncomment line 269: `config.sign_out_via = :get`. Be sure to restart your local server.
Next let's create a placeholder dashboard page that will act as the authenticated area. Run the following generator command:
`bin/rails g controller user/dashboard index`
This creates two files:
* `app/controllers/users/dashboard_controller.rb`
* `app/views/users/dashboard/index.html.erb`
In `app/controllers/users/dashboard_controller.rb` be sure to change line 1 so that the file contents are:
```ruby
class Users::DashboardController < Users::ApplicationController
def index
end
end
```
We must inherit from `Users::ApplicationController` since that is the class that defines the layout and the authentication check.
Finally we must define where the user should be redirected to on sign in and sign out. Replace the contents of the file `app/controllers/application_controller.rb` with:
```ruby
class ApplicationController < ActionController::Base
private
def after_sign_in_path_for(resource)
users_dashboard_index_path
end
def after_sign_out_path_for(resource)
new_user_session_path
end
end
```
That's it! Trying logging in and out and view the bare-bones dashboard page. It looks like this:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721008285863/ed5034ce-d431-432d-aa57-919496d8eb95.png align="center")
## Summary
In this article we accomplished the following tasks:
* Installed and configured the Devise gem
* Styled the authentication screens using Tailwind
* Created a protected dashboard page that only authenticated users can access
Next up we'll get to the fun bits that are the core of the business requirements (adding and completing tasks) and we'll start using Hotwire and Turbo to make a slick UI.