# 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>