DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’»

DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Google Login Rails 7 tutorial
John Kevin Baluyot
John Kevin Baluyot

Posted on

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"
    
  2. 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.

  3. 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.

  4. 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
    
  5. 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 https://console.cloud.google.com. Then select a project but if not create one.

2022-06-26-16-34-console.cloud.google.com.png

I named my newly created project Login Demo.

2022-06-26-16-49-console.cloud.google.com (1).png

Go to APIs & Services > Oauth consent screen

2022-06-26-17-57-console.cloud.google.com.png

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

2022-06-26-18-01-console.cloud.google.com.png

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.

2022-06-26-18-07-console.cloud.google.com.png

Choose Web application as Application type.

2022-06-26-18-11-console.cloud.google.com.png

Check your routes and find the callback URL for google

Screenshot from 2022-06-26 18-31-08.png

Then add the callback URL to Authorized redirect URIs.

2022-06-26-18-37-console.cloud.google.com.png

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=''
    
  2. Configure your devise.rb

    # config/initializers/devise.rb
    
    config.omniauth :google_oauth2, ENV['GOOGLE_OAUTH_CLIENT_ID'], ENV['GOOGLE_OAUTH_CLIENT_SECRET']
    
  3. 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:

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. šŸ›