Rails 6 Omniauth Google SignIn

For my Rails project Excursions One of the Requirements was to use Omniauth. I decided from early on I wanted google since I felt it was the most useful. I looked and searched for anything to walk me through and while I did find something nothing was step by step. They tended to put a bunch of steps together into one general instruction. Also the google view changed from the time the other articles wrote it and there was nothing for Rails 6 specifically. I had issues with the code logic as well once I added it into my project but I was able to get guidance! So here is going to be a detailed step by step process to get your Google Sign in working. Hope this helps!

Step 1 : Go to your rails project GEMFILE and add the following 3 gems, and then run “bundle install” in your terminal

gem 'omniauth', gem 'dotenv-rails' and gem 'omniauth-google-oauth2'

Step 2 : Create a .env file in the root directory of your app.

(if you create the file and it doesn’t land in the root no worries just click and drag it to the root)

Step 3: Add the .env in your .gitignore file. VERY IMPORTANT! You don’t want this file to go to your GitHub since it will store the google key and secret.

Step 4: Go to google and search for Google developers console. It will be the first choice. OR Go to https://console.developers.google.com and login with your google account. If this is the first time you are using this developers console, once you click on it, the first thing that will pop up is below. Go ahead and fill it out and click on the agree and continue(if you want to).

Step 5: Click on Create Project on the right — — — — — — — — — ↓

Step 6: Fill out the Project Name field and click CREATE.

Step 7: Now once it gives you the confirmation message that it was created go ahead and click on CREDENTIALS in the left menu.

Then click CREATE CREDENTIALS and drop down to OAUTH CLIENT ID.

Step 8: Click on CONFIGURE CONSENT SCREEN

Step 9: Check-mark External and click on CREATE

Step 10: You will then be given a form to fill out. Go ahead and fill out the NAME and EMAIL portions that are required. click on SAVE AND CONTINUE until you get to the summary which you will then click BACK TO DASHBOARD button at the bottom.

Step 11: Click on CREDENTIALS drop down to OAUTH CLIENT ID again and now it will give you a different prompt. Drop down on the Application Type and click on Web Application.

Fill out the NAME*

Under Authorized JAVASCRIPT Origins in the URI box put in

http://localhost:3000

Under Authorized REDIRECT URIs put in

http://localhost:3000/auth/google_oauth2/callback

Now click Create!

Now you have your CLIENT ID AND CLIENT SECRET! :)

Step: 12 COPY and PASTE these two pieces of information in your .env file. It should look something like this.

Step 13: Now we will go ahead and begin coding it into your project for your users to click on :) So first let’s add a link_to for the Google Log In. Add this to your views where you want the user to have access to it.

<%= link_to "Log In With Google", '/auth/google_oauth2'%>

Step 14: Add a new file in your Initializers directory under config directory called “omniauth.rb”. In here paste this code…

Rails.application.config.middleware.use OmniAuth::Builder do
    provider :google_oauth2, ENV['GOOGLE_CLIENT_KEY'], ENV['GOOGLE_CLIENT_SECRET']
end

Step 15: Add google route to the routes.rb file.

get '/auth/:google_oauth2/callback' => 'sessions#google'

Step 16: Add #google action and a private auth method in your sessions controller.

def google
    @user = User.find_or_create_by(email: auth["info"]["email"]) do |user|
      user.name= auth["info"]["first_name"]
      user.password= SecureRandom.hex(8)
    end
    if @user && @user.id
      session[:user_id] = @user.id
      redirect_to custom_path
    else
      redirect_to another_path
    end
  end  
private  
  def auth
    request.env['omniauth.auth']
  end

Step 17: Rails s and TRY IT! Everything should be good to go! :)

(((Extra information to keep in mind. My users table has name-email-password columns so thats why the above code worked for my project. Please adjust to fit your code if needed.)))