# Google Sign-in configuration

Use this when you want to enable the **Google** button in an enrolment form.

Start with [Social sign-in](https://docs.thewalletcrew.io/enroll/enrolment-form/social-sign-in) to understand the user flow. Then come back here for the provider setup.

<div data-with-frame="true"><figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F1nQ1ql1vZDZQJyIkK43Y%2FGoogle-Social-Sign-In.png?alt=media&#x26;token=561f44b7-d562-4dcc-a50b-ea48dee78904" alt="Google-Social-Sign-In-Example" width="375"><figcaption><p>Connect with Google in an enrolment form example</p></figcaption></figure></div>

### Overview

#### What you’ll set up

* A **Google OAuth 2.0 Client ID**.
* **Authorized JavaScript origins** for your enrolment form domains.
* The Client ID stored in **The Wallet Crew** admin console.

#### Prerequisites

* Access to your brand’s **Google Cloud Console** project.
* Permission to create **OAuth 2.0 Client IDs**.
* The list of domains where your enrolment forms will run (prod + staging + dev + custom).

### Configure Sign in with Google

{% stepper %}
{% step %}

#### **Open Credentials**

Open the Google Cloud Console **Credentials** page:

<p align="center"><a href="https://console.developers.google.com/apis/credentials" class="button secondary" data-icon="chevrons-right">Google Credential page</a></p>
{% endstep %}

{% step %}

#### **Create a Web application OAuth client**

1. Click `Create credentials` → `OAuth client ID`.
2. Choose application type: `Web application`.
3. Set a name. Example: `neostore login`.
   {% endstep %}

{% step %}

#### **Configure origins**

Add **Authorized JavaScript origins** for every domain you will use.

* `https://app.neostore.cloud`
* `https://app-qa.neostore.cloud`
* `https://app-dev.neostore.cloud`
* Any **custom domain** you use for enrolment forms (add the exact origin).

Leave **Authorized redirect URIs** empty.

![Google OAuth client settings](https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fgit-blob-908f1c1497c3d9d6ce55eade39ad9d7b63f8dddb%2Fgoogle_sign_in_configuration_1.png?alt=media)

![Wallet Crew Google social login settings](https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fgit-blob-5ecbc129897e1ebedf0a8420f82d5dd9388a1496%2Fgoogle_sign_in_configuration_2.png?alt=media)
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Google Sign-In for web uses the **Client ID**. It’s safe to paste it in the admin console.

Do not share any Google **client secret**. You should not need one for this flow.
{% endhint %}

### Configure Google in The Wallet Crew

1. Open **Social logins → Google** in the admin console.

<p align="center"><a href="https://admin.thewalletcrew.io/tenant/~/settings/social/google" class="button secondary" data-icon="chevrons-right">Social logins -> Google</a></p>

<div data-with-frame="true"><figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FGNUqVDr8L8M9vGyRfAGQ%2Fimage.png?alt=media&#x26;token=07d2775c-450e-432c-87ac-3265dd2bc832" alt="The Wallet Crew - Google Social Sign In configuration" width="563"><figcaption><p>The Wallet Crew - Google Social Sign In configuration</p></figcaption></figure></div>

2. Paste the **Client ID** from Google.
3. Save.

### Enable Google on your enrolment form

Enable the provider in the enrolment form settings.

Go into `advanced configuration -> Layout`  Open the layout you want to activate social sign-in on and add these lines

```yaml
signinOptions:
  providers:
    - type: android
      displayProps:
        isMobile: true
        isAndroid: true
```

For more information see [Enrolment form](https://docs.thewalletcrew.io/enroll/enrolment-form).

### FAQ

<details>

<summary><strong>Do we need a Google client secret?</strong></summary>

No. This setup uses the **Google Client ID** only.

If you see a client secret in Google Cloud Console, don’t paste it anywhere in Wallet Crew.

</details>

<details>

<summary><strong>Should we configure “Authorized redirect URIs” in Google?</strong></summary>

No. Leave **Authorized redirect URIs** empty for this flow.

If you add redirect URIs, it usually doesn’t help. It can also confuse debugging later.

</details>

<details>

<summary><strong>What exactly must be added as an “Authorized JavaScript origin”?</strong></summary>

Add the **origin only**: `scheme://host` (and port if you use one).

Examples:

* ✅ `https://app.neostore.cloud`
* ✅ `https://brand.example.com`
* ❌ `https://app.neostore.cloud/molia/mobile` (paths are not allowed)

</details>

<details>

<summary><strong>We use a custom domain. What should we do?</strong></summary>

Add your custom domain as an **Authorized JavaScript origin** in Google Cloud Console.

Use the exact domain users see in the browser. Example: `https://wallet.brand.com`.

</details>

<details>

<summary><strong>Why do we list prod, QA, and dev origins?</strong></summary>

Google validates the origin at runtime.

If a user hits QA but only prod is configured, Google rejects the sign-in.

</details>

<details>

<summary><strong>Where do we enable the Google button in the user journey?</strong></summary>

Provider setup is not enough. You must also enable Google on the enrolment form.

See [Social sign-in](https://docs.thewalletcrew.io/enroll/enrolment-form/social-sign-in) and [Enrolment form](https://docs.thewalletcrew.io/enroll/enrolment-form).

</details>


---

# 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://docs.thewalletcrew.io/enroll/enrolment-form/social-sign-in/google-sign-in.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.
