Login with Google app setup

Many of our clients find setting up 'Login with Google' for their apps confusing and challenging due to the steep learning curve. This document aims to provide a clear, step-by-step guide for your app Google setup to ensure correct integrating with Objects Grid. Same setup will work for other API providers that follow the OIDC and OAuth2 standards.

In summary you will learn how to register and setup your App with Google, ddd 'Login with Google' button to your app, and how to gain access to ObjectsGrid APIs.

Create a GCP account.

If you don't have an Google Cloud Platform (GCP) account, go to and register.

Create a GCP Project

While you get a default project when you register with GCP the first time, it is advisable to create a project specifically for your app.

Register your app with Google

Go to Google Auth Platform , Click on Get Started button.

Enter your app name, your users support email and click Next. This is the email you users report issues to you.

Choose External and click Next:

Enter your email address and click Next: This is the email Google will use to contact you if needed.

Check the I Agree to the... and click Continue.

Click on Create:

If successful, you will get this message:

Enter your branding info next and click Save:

In the Audience do nothing yet. Once you successfully tested it, you will come here to Publish your app.

In the Clients menu, click on Create client

Next set your client details and click Create. In the Authorized javascript Origins, enter your app domain name. For the Authorized redirect URIs, enter the page you will have the 'Login with Google' button has to use this domain name. Most of the time is your home page, or the page where the user must login or register.

Upon successful client creation, you will get the Client ID and Client Secret. You only need the client id for the next steps, copy it and save it aside for now

Do not make any changes to the Data Access menu page.

If you did not make any changes to the Data Access menu page, your Verification Center will show 'Verification not required'

If you need to request additional data about your users, you can add that later, after making sure the basic installation is working.

To present your users with 'Login with Google' button, you need to add some code to your web app.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ObjectsGrid Test Application</title>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
        function idTokenHandlerGCP(credentialObj) {
            console.log(credentialObj);
            document.getElementById("idtoken").innerHTML = credentialObj.credential;
        }
    </script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <h3>ObjectsGrid Test Application</h3>

    <div id="g_id_onload"
         data-client_id="your client id you received from google when you created the client above"
         data-context="signin"
         data-ux_mode="popup"
         data-callback="idTokenHandlerGCP"
         data-auto_prompt="false">
    </div>

    <div class="g_id_signin"
         data-type="standard"
         data-shape="rectangular"
         data-theme="outline"
         data-text="signin_with"
         data-size="medium"
         data-logo_alignment="left">
    </div>

    <div>
        <p>Your Google OIDC ID Token:</p>
        <textarea id="idtoken" rows="12" style="color:blue; font-size: small; resize:vertical; width:90%; max-width:90%"></textarea>
    </div>

<p>v1.0.0</p>
</body>
</html>

These 2 sections are from Google SDK:

And this is how you retrieve the ID Token:

The ID Token is actually the credentialObj.credential in the depiction below.

Gaining access to Objects Grid APIs

You will see that all APIs expect you to provide the access token in an Authorization header type Bearer when you compose the request. For details please check the respective GraphQL or REST API doc.

To summarize and provide a visual representation, here is a simplified sequence diagram: