Authentication with is a common practice in modern applications. In this blog post, we will discuss how to integrate Google Identity Services into any of your front-end applications that use as the server. Google Identity Services provides with Google Sign-In Ruby on Rails Customized Sign In/Sign Up Button One Tap Sign In Let's dive in!! Step 1: Create an application in the Google Developer Console. In order to use Google Sign In or One Tap, we need a to add in our as well . client_id client server To create an application, head to the Google Developer Console Select . Before doing this you need to configure your . Create Credentials > OAuth Client ID consent screen When creating the client_id, make sure to include & the port on which your client is running in the Authorized Javascript Origin for development & your production URL. localhost Once done, you will have your of the form client_id 1234567890-abcdefg.apps.googleusercontent.com For more details on setting up the application, you can read . here Step 2: Setting up the Library in Client In order to load the client library, add in your if you are using or if using <script src="https://accounts.google.com/gsi/client" async defer></script> index.html React.js _app.jsx Next.js. Step 3: Displaying the customized Sign In Button useEffect(() => {
    /* global google */
    google.accounts.id.initialize({
      client_id:
        "YOUR_GOOGLE_CLIENT_ID",
      callback: signInCallback,
      cancel_on_tap_outside: false,
    });

    google.accounts.id.renderButton(document.getElementById("signInDiv"), {
      theme: "outline",
      size: "large",
    });
  }, []); is added to show that google has been defined globally in our global google index.html the method creates a Sign In With Google client instance based on given fields. is a required field that we get from creating the google application, is the JavaScript function ( here ) that handles the ID token returned from the One Tap prompt or the pop-up window. google.accounts.id.initialize client_id callback signInCallback By default, if a user clicks anywhere on the screen, an exponential cool-down is applied on the One Tap prompt. In case you want the prompt to be always visible, set this value to . You can take a look at more configurations false here. method renders a Sign In With Google button. You can play around with the configurations google.accounts.id.renderButton here. is the HTML element. By adding the below code to your web page HTML, document.getElementById("signInDiv") return (
    <div className="App">
      <div id="signInDiv" />
    </div>
); you will be able to see a customized button like this Step 4: Displaying the One Tap Prompt In order to show the prompt, add this in the useEffect google.accounts.id.prompt(); Step 5: Defining the callback function As mentioned in , signInCallback, is our callback function which can be defined as Step 3 const signInCallback = (result) => {
  if (result.credential) {
    const params = { token: result.credential };
    axios
      .post("http://localhost:3000/user/google", params)
      .then((res) => {
        const { authToken, ...userInfo } = res.data.data;
        // set token in local storage/cookies based on your authentication method
        // redirect to the authenticated page
       })
       .catch((err) => console.log(err));
   }
}; where, is a server URL that we will create in the next step localhost:3000/user/google The is a response from Google once we click on the Sign In or One Tap button. result The comprises two fields result : This field is the ID token as a base64-encoded JSON Web Token (JWT) string credential : showing how the credential is selected. More about it . select_by here We take the credential from the result & pass it as a param to our server. Step 6: Adding the controller & route to Server We will create a route in the server to handle the request from the client. Before we do that, we need to create a controller that will accept the JWT from the client. Create a file, , add a method . app/controllers/users/user_controller.rb google add the route , in . users/user#google_oauth config/routes.rb Once, the route receives the JWT, the first & most crucial step is to verify if the JWT is validated. For this purpose, we can use the gem , which is the official gem from Google to verify the ID tokens issued. google_auth This can be done easily using Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" where is the JWT received from the client & is a google application client id. access_token aud If the token is valid, it will return a hash like this or throw an exception {
  "iss": "https://accounts.google.com",
  "nbf": 12345678,
  "aud": "YOUR_GOOGLE_CLIENT_ID,
  "sub": "1112223333444",
  "email": "your-email@gmail.com",
  "email_verified": true,
  "azp": "YOUR_GOOGLE_CLIENT_ID",
  "name": "First Last",
  "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw",
  "given_name": "First",
  "family_name": "Last",
  "iat": 1653797115,
  "exp": 1653805725,
  "jti": "8ffa19190gngd46745ff558821f953802"
} If the token is valid, you can check in your database whether the user exists or not and accordingly create a user. Once that is done, you can sign the user in or redirect them based on your authentication method. # users/user_controller.rb
def google
  begin
    data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID"
    // find the user in the data
    // if the user does not exist, create a user using data
    // sign the user (based on your authentication method)
  rescue StandardError => e
  end
end # config/routes.rb

scope :user do
  post 'google' => 'users#user_controller.rb'
end : Make sure to have installed on your server and add this PS rack-cors application.rb config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource(
          '*',
          headers: :any,
          expose: ['Authorization'],
          methods: %i[get patch put delete post options show]
        )
      end
    end to avoid facing errors like this : If your application uses the Google Sign-In JavaScript Platform Library for the web, make sure to migrate it to Google Identity Service since the former is going to be deprecated. PPS Link I hope this article helps you integrate One Tap Login into your projects. For more detailed information you can check out the official . docs Also Published here

Google

2022 - HackerNoon Contributor of the Year - Learning

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Learning

SDE II @ HackerRank

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Implement One Tap Google Sign-In With Ruby on Rails

Too Long; Didn't Read

Company Mentioned

Shloka Shah

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

How to Implement One Tap Google Sign-In With Ruby on Rails

Too Long; Didn't Read

Company Mentioned

Shloka Shah

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES