# Connecting Google Login

To let shoppers sign up with a Google account, you first register your service with Google and receive two values. They are the client ID and the client secret.

This page covers the order in which you receive those two values. Putting the values you received into WEEGLOO is covered in [Putting the values you received into WEEGLOO](#back-to-weegloo).

## The address to copy first {#redirect-uri}

When a shopper finishes logging in at Google, Google sends the result back to a set address. You have to register this address with Google, so copy it first. You paste it in step 3.

Pick your *Space* below and you get the address with the identifier filled in.

```weegloo-redirect-uri
{
  "template": "https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/{provider}",
  "provider": "google"
}
```

:::note
If you would rather fill it in yourself, put the identifier of your *Space* in the `{spaceId}` slot. Open that *Space* in the content studio and look at the browser address bar. The value that comes after `/spaces/` is the identifier.

This address is not your site's address. It is where WEEGLOO receives the login result. So it is settled now even if you have not built your site yet. If you turned on **Google** in the content studio, the same address appears in **Step 1**, so you can copy it from there.
:::

## Getting the two values from Google {#get-credentials}

Sign in to the Google Cloud Console (<https://console.cloud.google.com>) with your Google account, then work through the four steps below in order. What you do here costs nothing.

::::step{title="Creating a project"}
1. Open the new project screen (<https://console.cloud.google.com/projectcreate>).
2. In **Project name**, enter a name you will recognize later (for example, `Cozy Closet`).
3. Click **Create**.

   ![The New Project screen. "Cozy Closet" is entered in the project name box and the Create button is below it](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-01-project-create.webp)

4. Check that the project name at the top of the console is the one you just created.

:::note
If you already have a project you have been using, you can use that project as it is instead of creating a new one.
:::
::::

::::step{title="Configuring the consent screen"}
When a shopper logs in with a Google account, a Google screen asking whether it is all right to log in to this service appears first. Here you decide what name appears on that screen and where inquiries are received. You do this only once for each project.

1. Open the **Branding** screen of **Google Auth Platform** (<https://console.cloud.google.com/auth/branding>).
2. Click **Get started**.

   ![The Branding screen of Google Auth Platform. The "Google Auth Platform not configured yet" notice and the Get started button are visible](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-02-not-configured.webp)

3. In **App name**, enter the name shoppers will see (for example, `Cozy Closet`).
4. In **User support email**, choose the address that will receive inquiries.
5. Click **Next**.

   ![Step 1 App Information of project configuration. The app name is "Cozy Closet" and the user support email is filled in](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-03-app-info.webp)

6. In **Audience**, choose **External**.
7. Click **Next**.

   ![Step 2 Audience of project configuration. External is selected between Internal and External](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-04-audience-type.webp)

8. In **Contact Information**, enter an email address.
9. In the **Finish** step, check the box agreeing to Google's user data policy.
10. Click **Create**.

:::note
**Internal** can be used only by accounts in the same organization. To let shoppers outside your organization log in, choose **External**. A login created as **External** starts in testing mode, so go on to [Registering the account you will log in with](#test-users).
:::
::::

::::step{title="Creating an OAuth client"}
The OAuth that appears on the screens is the name of the method that lets people log in with a Google account. The address in [The address to copy first](#redirect-uri) is registered on the client you create here.

1. In the left menu, click **Clients**.
2. Click **Create client**.

   ![The Clients screen. The OAuth 2.0 Client IDs list is empty and Create client is above it](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-05-clients.webp)

3. In **Application type**, choose **Web application**.

   ![The application type dropdown is open, showing six types including Web application](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-06-application-type.webp)

4. In **Name**, enter a name you will recognize this client by (for example, `Cozy Closet`).
5. Leave **Authorized JavaScript origins** empty.
6. Click **Add URI** under **Authorized redirect URIs**.
7. In the box that appears, paste the address you copied in [The address to copy first](#redirect-uri).
8. Click **Create**.

   ![The form with the address filled into Authorized redirect URIs. Authorized JavaScript origins is empty](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-07-redirect-uri.webp)

:::note
The list also holds types such as Android and iOS, but you choose **Web application** even when you are adding login to a mobile app. That is because the login result returns to WEEGLOO's web address, not to your app. **Name** is used to tell clients apart on the Google screens, and shoppers do not see it.
:::

:::note{variant="warning" title="The address you register may not take effect right away"}
Below the form is Google's notice reading "Note: It may take 5 minutes to a few hours for settings to take effect". Right after you register the address, it may not have taken effect yet and login can be blocked. In that case, leave it some time and try again.
:::
::::

::::step{title="Copying the client ID and the secret"}
When you click **Create**, the **OAuth client created** window appears. The two values written here are the values you will put into WEEGLOO.

1. Click the copy icon to the right of **Client ID** to copy the value.
2. Click the copy icon to the right of **Client secret** to copy the value.
3. Once you have saved both values somewhere, click **OK**.

   ![The OAuth client created window. The client ID, the client secret, and the warning that you cannot view them again are visible](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-08-credentials.webp)

:::note{variant="warning" title="Once you close the window you cannot view the secret again"}
This window carries a warning reading "You will no longer be able to view or download the client secret once you close this dialog". Copy both values before you close the window. If you want the values as a file, you can click **Download JSON**.
:::

Here is which box in the content studio each of the two values goes into.

| Google screen | Content studio |
|---|---|
| **Client ID** | **Client ID** |
| **Client secret** | **Client Secret** |

The client secret is a secret, exactly as the name says. Do not tell it to anyone, and do not write it down anywhere public.
::::

## Registering the account you will log in with {#test-users}

The login you just created starts with a publishing status of **Testing**. Google explains that while the publishing status is **Testing**, only test users can access the app. So to check whether login works, first register the account you will log in with under **Test users**.

1. In the left menu, click **Audience**.
2. Click **Add users** under **Test users**.
3. In the panel that opens on the right, enter the address of the Google account you will log in with.
4. Click **Save**.

![The test users area of the Audience screen with the add users panel opened on the right](/_img/en-US/getting-started/core-concepts/service-users/service-login/images/google-09-test-users.webp)

:::note
**Add users** is a phrase Google does not translate, so it appears in English in every language.

The allowed user cap prior to app verification is 100. This cap is counted over the entire lifetime of the app. You check how many are registered right now under **OAuth user cap** on the same screen.
:::

To open login to any shopper, click **Publish app** on the same screen. This button becomes clickable only after you finish the configuration on the **Branding** screen. Depending on your service, Google's verification process may also be required.

## Putting the values you received into WEEGLOO {#back-to-weegloo}

Now you have the two values in hand. From here the path splits depending on how you have been working so far.

If you were configuring this directly in the content studio, follow these steps.

1. Go back to turning on social login in [Service Member Login](/getting-started/core-concepts/service-users/service-login.md#turning-on-social-login).
2. Turn on **Google**.
3. Enter the client ID in the **Client ID** box in **Step 2**.
4. Enter the client secret in the **Client Secret** box.
5. Click **Save**.

If you handed the integration to an AI agent and were told to go and get the values, paste the two values you received into the chat as they are and carry on with what you were doing. The agent handles the rest of the configuration from there.

## What to do next {#what-to-do-next}

- [Service Member Login](/getting-started/core-concepts/service-users/service-login.md): put the values you received into the content studio and finish the rest of the member login configuration.
- [Member Roles and Permissions](/getting-started/core-concepts/service-users/service-user-role.md): create the *ServiceUserRole* that decides what a signed-up member can see and use.
- [Auth API](/api/reference/auth-api.md): covers technical specifications such as the request format you need when wiring login into your own site's code.