start to finish Devise with GitHub OmniAuth authentication — Ruby on Rails
By: Sascha Kala
Tags: Github, Authentication, Ruby on Rails, Rails, Web Development

Let’s get started (from the very beginning):

Create your new rails app (and it’s corresponding Git repo).

in your terminal: rails new very-cool-app

2. Add the Devise gem to your Gemfile

# Gemfile gem 'devise'

3. Run bundle update (if the Devise gem is already installed on your computer — if not run bundle install) to make sure the Devise gem is actually installed and to update your gemfile.lock

in terminal: bundle update

4. Install Devise in your application.

in terminal: rails g devise:install

You’ll notice that this command generated two Devise files for you within your app/config folder. It also did a lot of things that you can’t actually see in the background of your app, which is why it’s a great idea to install Devise as the first thing you do when creating a new application (cause otherwise layering all of this on top of everything else can break it).

Additionally you’ll notice that Devise printed out 4 instructions in your terminal for you to follow. These are necessary steps in order for Devise to work properly: 1) define a default URL; 2) define a root_url; 3) set flash messages in your application layout; and 4) set up Devise views. I’ll be covering 2, 3, and 4 because number 1 is only relevant if you have a mail server installed on your computer (and this didn’t pertain to my project).

Note: it was at this point in my project, after running rails g devise:install , that I created one of my other models (and the corresponding controller, table, resource routes, and an index view page) for the sake of being able to create a root_url to satisfy Devise’s needs. Devise automatically redirects the user to the root_url that you set once the user has successfully logged in. If you’re setting up Devise as the first thing you do in your new app, take some time now to set up one of your other models so that you can continue with step 5 below.

5. Define a root route (number 2 from above), remembering that it’s good practice to keep your routes in top-down order from most to least specific.

# config/routes.rb root to: "model-name#index"

6. Add flash messages to your application layout (number 3 from above). The simplest way to do this is to use the code that Devise provided for you after running rails g devise and copy/paste it into the body of your application layout above <%=yield%> to make sure the errors render at the top of your page once it’s loaded.

#app/views/layouts/application.html.erb <body>

<p class="notice"><%= notice %></p>

<p class="alert"><%= alert %></p> <%=yield%> </body>

7. Generate the Devise User model.

in terminal: rails g devise user

This command creates a series of files, including your User model and migration, as well as adding routes (if you take a peek at your routes.rb file you’ll notice that the Devise user routes show up as devise_for :users) . (This command also creates a hidden controller and view files — but we’ll talk more about the views and how to overwrite the controller in a bit!)

8. Check out the migration file Devise created for you. You’ll notice that there’s a whole page of possible attributes, many of which appear commented out. Feel free to uncomment any user attributes you might want in your app — but make sure to leave Recoverable and Rememberable turned on or your app will break ;)

9. Time to: rails db:migrate

10. It might sound inconceivable given that it feels like you haven’t actually built anything, but your sign up will now work. Yep! Go ahead and check it out by starting your server and heading to localhost:3000/users/sign_up (in the event that you haven’t, make sure that you set up your root route before testing this).

If you’re curious to see what other routes Devise created for you, check localhost:3000/rails/info/routes for the full list.

11. Now let’s generate those Devise views (number 4 from Devise’s todo list above).

in terminal: rails g devise:views

What’s actually happening when you run this command is that you’re generating the views that already exist in the background of your application (the ones that made it possible for your sign up page to work already!), so that they can be edited and changed. You’ll notice that you now have an app/views/devise folder.

12. This one’s a little sugar & spice: but let’s build out a helper nav using the helper methods included with Devise as well as the generic routes it created for us.

Start by creating a partial _nav.erb file in the app/views/layouts folder. Then add the following code:

<ul> <% if user_signed_in? %>

<li><%= link_to ‘Edit your account’, edit_user_registration_path %></li>

<li><%= link_to ‘Sign out’, destroy_user_session_path, method: :delete %></li>

<% else %>

<li><%= link_to ‘Sign in’, new_user_session_path %></li>

<li><%= link_to ‘Sign up’, new_user_registration_path %></li>

<%end %> </ul>

user_signed_in? is one of the helper methods Devise ships with: it’s a boolean that returns true or false depending on whether a user is logged in. The URL helpers used here come directly from the ones Devise created for you (see them all at localhost:3000/rails/info/routes).

Don’t forget to render your partial by adding it to the body of your application layout: