User authentication is an essential security feature for web applications, especially those that handle sensitive user data or provide restricted access to certain functionality. By requiring users to authenticate themselves before accessing the application, developers can ensure that only authorised users can view or modify the data and functionality of the application. What is Devise? Devise is a Ruby Gem that provides user authentication and authorisation features for Rails applications. It reduces the process of adding signup, login, and logout functionality to your application without having to write everything from scratch. It has built-in features such as password reset and account confirmation. It supports various authentication strategies such as email and password, OAuth, OpenID, and more. Devise has detailed documentation that covers both basic and advanced features. In this tutorial, we'll build a simple rails app with Devise that allows users to create accounts, sign in and sign out from their accounts. We'll also cover how to add style to the app using Bootstrap. Prerequisites Before starting this tutorial, you should have a good understanding of Ruby and Rails basics. Additionally, you must have the following software installed on your computer: Ruby: If you haven't installed Ruby on your machine, you can download the latest version from the official . Ruby website Ruby on Rails: You should set up your local development environment by following guide. the Rails Node.js: Install to manage the asset pipeline and run JavaScript code. Node.js Yarn SQLite3 A text editor like Visual Studio Code A browser like Google Chrome We will also cover how to use Bootstrap in Rails 7 later in the tutorial. Step 1: Create a new Rails App To create a new rails app, open a terminal in your preferred directory and run the command: rails new authApp This will generate a new Rails application called in an directory. Open this directory in your preferred text editor. authApp authApp Navigate to the app directory by typing: cd authApp In your terminal, start your Rails server by running: rails server Open in your browser to access the Rails welcome page. http://127.0.0.1:3000/ Step 2: Create a landing page Generate a new controller that will handle the request to the root path using the command: $rails generate controller home index This creates a new controller named `Home` with an action `index`. Add the root path to the file in the ‘config’ folder by adding the following line: routes.rb root 'home#index' In the directory, you will find a new file called . This view will contain the HTML code for your landing page. app/views/home index.html.erb Restart the server and check the in your web browser to view your newly created landing page. local host Step 3: Install and configure Bootstrap In this section, we'll be using , which load JS. First, check if you have import maps installed by running . If you don't, run import maps cat config/importmap.rb rails importmap:install Next, add Bootstrap 5 JS to Rails via import maps: . This adds JS, bootstrap and popperjs to . $ bin/importmap pin bootstrap config/importmap.rb Import Bootstrap in using . app/javascript/application.js import 'bootstrap'; Add to your Gemfile and run . gem 'bootstrap', '~> 5.1.3' bundle install In , import Bootstrap using and rename the file to . app/assets/stylesheets/application.css @import "bootstrap"; application.scss Make sure your file contains: app/views/layouts/application.html.erb <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> Add styles as preferred in your file. app/views/home/index.html.rb Reload the server and see the changes. Step 4: Install and Configure Devise Navigate to the Gemfile and add the Devise gem using the command: gem 'devise', github: 'heartcombo/devise', branch: 'main' Run to install Devise. bundle install Run to set up Devise in your project. This generates several starter files for Devise and provides instructions in the terminal. rails g devise:install Uncomment the line in the file. This adds turbo_stream as a navigational format, which is required for Devise 4.9.2 to work with Rails 7. Failing to do this will result in an error. config.navigational_formats = ['*/*', :html, :turbo_stream] devise.rb undefined method user_url Open and add the following lines for notice and alert messages: app/layouts/applications.html.erb <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p> Step 5: Creating User Model with Devise To create a user model with Devise, run in the terminal. This will generate the necessary files and configuration needed for implementing user authentication. rails g devise user Create the user table by running the migration command: . rails db:migrate Restart the server to load the new Devise initializer file and set up everything for user authentication to work. Go to in your browser to access the sign-up form to create an account by entering an email and password. http://localhost:3000/users/sign_up Navigate to the file and add the following lines of code: index.html.erb <% if user_signed_in? %> <p>Welcome, <%= current_user.email %>!</p> <%= link_to "Sign out", destroy_user_session_path, method: :delete %> <% else %> <%= link_to "Sign in", new_user_session_path %> <% end %> These lines create sign-up, sign-in, and sign-out links for your application. is a helper method provided by Devise that returns true if the current user is signed in and false if otherwise. user_signed_in Refresh your page in the browser to review the changes. To review the changes, simply refresh the page in your browser. If you haven't already signed in, there will be a sign-in button visible on the screen. Click on it and complete the registration process. Once you have successfully signed up, you will be directed to the landing page where you can view the email address of the currently signed-in user, a welcome message, and a sign-out button. By following these steps, you have successfully integrated the Devise gem and set up user authentication for your application. Conclusion In this tutorial, we used Devise to add user authentication to our Rails app. We developed an application where users can create accounts, sign up and sign out. We also integrated Bootstrap to improve the project's appearance. To expand your knowledge of Devise and explore further helpers and methods, refer to the README file on the Devise GitHub repository.
