Google Omniauth - Agent Agenda

As I created my Rails App - Agent Agenda, I ran into a few issues with omniauth. I searched the internet hoping to find recent documentation/blogs on the topic to help me get to the bottom of it. Unfortunately, it did not work out as I had hoped. After researching my issues and still being stuck, I reached out to my cohort lead for help. My cohort lead gave me 2 crucial bits of information that I had not seen/read about, and I finally got omniauth to work!

Continue reading to see my guide for setting up Google Omniauth (Login With Google Feature) in 8 steps.

STEP 1 -

Create an app in the Google Developers Console. Select ‘Credentials’, then select ‘Create Credentials’. Select ‘Create OAuth Client ID’, then select ‘Web Application’.

This should present you the Client ID and the Client Secret. Both of these will be required soon!

STEP 2 -

Add the ‘Authorized JavaScript Origins’ and ‘Authorized Redirect URIs’. Authorized JavaScript Origins should be — http://localhost:3000 (the link in your browser when visiting your web app), and Authorized Redirect URIs is — http://localhost:3000/auth/google_oauth2/callback.

STEP 3 -

Add the necessary gems to your Gemfile. You’ll need to add four gems — gem 'omniauth', gem 'dotenv-rails', gem 'omniauth-rails_csrf_protection', and gem 'omniauth-google-oauth2'. Run bundle installin the terminal.

STEP 4 -

Create a file .env in the root directory of your app. Add the following code to the file.

GOOGLE_CLIENT_ID=Your client id
GOOGLE_CLIENT_SECRET=Your client secret

*Remember to add this code to the bottom of your gitignore file.*

.env

STEP 5 -

Add the file omniauth.rb to /config/initializers with the following code:

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

STEP 6 -

Add the following callback route to config/routes.rb :

get '/auth/:provider/callback' => 'sessions#omniauth'

STEP 7 -

Add methods to sessions controller. You’ll need two methods in the sessions controller. One to create (or login) a user with Google, and one to create a private method which requests the auth hash.

def google
   @user = User.find_or_create_by(email: auth["info"]["email"]) do |user|
   user.username = auth["info"]["first_name"]
   user.password = SecureRandom.hex(10)
   end
   @user.save
   session[:user_id] = @user.id
   redirect_to user_path(@user)
end
private
def auth
   request.env['omniauth.auth']
end

STEP 8 -

Add login/signup button/link. You’ll need to add this button/link anywhere you want a user to be able to log in or sign up. It can be styled as a button_to or link_to, and does not need to be inside a form. If you want to use it as a button_to, you would enter the following code: <%= button_to "Log In With Google", '/auth/google_oauth2' %>. If you want to use it as a link_to, you would enter the following code: <%= link_to "Log In With Google", '/auth/google_oauth2', method: :post %>.

If you followed the instructions correctly, everything should be working. The full repository for Agent Agenda can be viewed here if you would like to compare code for omniauth.