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
