Google Login Rails 7 tutorial

In this tutorial, I'll implement google login in rails 7 using omniauth in devise gem.

Take note, in this tutorial I'll be using login-demo as code base which is tackled in this tutorial. It's best to look at it before proceeding on this one.

I'll be assuming you implemented devise login in your rails app.

1. Add these gems.

gem "omniauth-google-oauth2"

gem "omniauth-rails_csrf_protection"

1. Add this to your devise model(mine is User).

  # models/user.rb
  :omniauthable, omniauth_providers: [:google_oauth2]

This would add the omniauth function of devise to the rails app.

1. Add fields to devise table.

 class AddFieldsToUser < ActiveRecord::Migration[7.0]
     def change
       change_table :users, bulk: true do |t|
        t.string  :provider
        t.string :uid
       end
     end
 end

Run rails db:migrate to add these fields to theusers table.

I'll be saving the uid and provider (which the value for this would be google_oauth2). Though it might change depending on the provider you're using.

1. Create omniauth_callbacks_controller.rb.

# app/controllers/users/omniauth_callbacks_controller.rb
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
   def google_oauth2
     user = User.from_google(from_google_params)

     if user.present?
       sign_out_all_scopes
       flash[:notice] = t 'devise.omniauth_callbacks.success', kind: 'Google'
       sign_in_and_redirect user, event: :authentication
     else
       flash[:alert] = t 'devise.omniauth_callbacks.failure', kind: 'Google', reason: "#{auth.info.email} is not authorized."
       redirect_to new_user_session_path
     end
    end

    def from_google_params
      @from_google_params ||= {
        uid: auth.uid,
        email: auth.info.email
      }
    end

    def auth
      @auth ||= request.env['omniauth.auth']
    end
end

1. Add this to your route.

# config/routes.rb
Rails.application.routes.draw do
    devise_for :user,
      controllers: {
         omniauth_callbacks: 'users/omniauth_callbacks'
      }

    # ------
    # Other routes
    # ------
end

Google Oauth

In this part, things get a bit complicated.

In this, we would get the google client id, client secret and configure the google console to enable OAuth which would allow the rails app to log in using google.

Go to console.cloud.google.com. Then select a project but if not create one.

I named my newly created project Login Demo.

Go to APIs & Services > Oauth consent screen

Choose user type External. Next is to fill up the necessary input value on the form.

Click Save and Continue at the bottom of the form.

Next is go to APIs & Services > Credentials. At the top click CREATE CREDENTIALS and choose OAuth client ID.

Choose Web application as Application type.

Check your routes and find the callback URL for google

Then add the callback URL to Authorized redirect URIs.

Then click Create. After creation, there should be a popup showing your client id and client secret. Save it for later use.

Now that you have your client id and client secret we're gonna start configuring google login in the rails app.

Implement Google Login

1. Add client id and client secret to your .env

# .env
GOOGLE_OAUTH_CLIENT_ID=''
GOOGLE_OAUTH_CLIENT_SECRET=''

1. Configure your devise.rb

# config/initializers/devise.rb

  config.omniauth :google_oauth2, ENV['GOOGLE_OAUTH_CLIENT_ID'], ENV['GOOGLE_OAUTH_CLIENT_SECRET']

1. Now just add the google log in button

// app/views/shared/_user_details.html.erb
<%= button_to  'Login with Google', user_google_oauth2_omniauth_authorize_path, method: :post, :data => {turbo: "false"} %>

We have to create our custom link because the generated link for logging in with google may not work properly in rails 7.

Congratulations! 🎉 Now you have implemented google login to your rails 7 app.

You could check the repository here: github.com/jkevinbaluyot/login-demo/tree/om..

References:

• reddit.com/r/rails/comments/twjznq/help_wit..

• dev.to/rbazinet/hotwire-fix-for-cors-error-..

• medium.com/@adamlangsner/google-oauth-rails..

EDIT: 06/25/2023

• I forgot to include this:

  # app/models/user.rb
  def self.from_google(email:, uid: )
    find_or_create_by!(email: email, uid: uid, provider: 'google_oauth2')
  end