# Google Client ID Configuration

To enable the button's functionality in your store, you need first to **create Google client ID.**

Follow the following steps to create a Google client ID.

<mark style="color:blue;">**Step #1**</mark>

Go to [**Google Developers Console**](https://console.developers.google.com/apis).

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FA4kF5X6sWO2XwrhSoDCM%2Fimage.png?alt=media&#x26;token=e0ff0883-0204-4975-ba4a-eac55fd318f9" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step #2**</mark>

Select the dropdown option, at the left side of the search box, or you can just click on the **Create** button provided in our app on the main page of the app's backend.

Select the **New Project** button to **create** a new project.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FDZY9gHGkahUTuLFKNyIA%2Fimage.png?alt=media&#x26;token=3427c538-8a69-45aa-8208-c831cd4fe768" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step #3**</mark>

Navigate to the **OAuth consent screen** and, go to **User type,** and select **External**. Select the **Create** button.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FyaCIFSCYVUp0bzyjziXl%2Fimage.png?alt=media&#x26;token=714dfc92-7c65-4780-b26c-67796d6341e4" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step #4**</mark>

Enter the app name and your user support email address. Upload the app logo.

Enter the developer's contact information and authorized domain. After getting done with the configurations, click the **Save** button and continue.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F1nP48pzeHtkTDI8mVFDO%2Fimage.png?alt=media&#x26;token=41959cf6-bf4b-4d86-8fda-9da8d3d7f5d2" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step #5**</mark>

After completing all these steps falling under the **OAuth consent screen**, navigate to **Back to dashboard.**

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FvCMIIiQT2ziQlLHULJPO%2Fimage.png?alt=media&#x26;token=db72e1e9-b99d-4d6c-809c-ecab64b793e7" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step #6**</mark>

Follow these steps **Credentials** <mark style="color:blue;">➤</mark> **Create Credentials** <mark style="color:blue;">➤</mark> **OAuth client ID.**&#x20;

Choose **Web Application** from the dropdown list and enter the name of your OAuth 2.0 client.

Enter the URLs to the **Authorized JavaScript origins and Authorized redirect URLs** by clicking the **Add URL** button.

These URLs will redirect your users back after they have been authenticated with Google.

Copy the **Client ID** and proceed.

Once you are done with all these configurations, you have to enter the Google ID in the **Settings** field of the app's backend section.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FYh7n4dWyo5Uq20lh7ahX%2Fimage.png?alt=media&#x26;token=e2619663-fd06-48c4-8537-4d7dd61d09e2" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step #7**</mark>

After following all these steps, go to **Online Store** <mark style="color:blue;">➤</mark> **Preferences** <mark style="color:blue;">➤</mark> **Spam Protection** and **Disable** the by default selected options:

* Enable hCaptcha on contact and comment forms
* Enable hCaptcha on login, create account and password recovery pages

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FaAZCC4AMu2Dz2bO7fGyV%2Fimage.png?alt=media&#x26;token=db09dc72-ade7-43c6-8fc6-00a18afe1089" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
It is necessary to keep these two options **Disabled** as they cause errors sometimes, which may cause a bad user experience.
{% endhint %}

<mark style="color:blue;">**Step #8**</mark>

Ensure the **Customer Accounts Type** is set to **Legacy**. If not, update the configuration.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F1bxCN7FcWgs1hbIqxxrX%2Fimage.png?alt=media&#x26;token=de2e2e17-5177-4893-9f7a-54d9ef46f72e" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://magecomp.gitbook.io/shopify/apps/hook-social-login/configuration/google-client-id-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.