> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visiovoice.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Google App Setup

> This document provides instructions on setting up a Google application so users can login/register via Google on your site.

## Enabling API & App Registration

To allow users to log in to your site with their Google account, you need to create a Google Cloud project and configure the OAuth. Follow steps below to create a configure your Google Cloud project.

## 1. Sing in to continue to Google Cloud Platform

Go to [https://console.cloud.google.com/](https://console.cloud.google.com/) and sing in to enter the Google Cloud console.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/8NGDpydQBcp7APgm/resources/white-label-google-login-page.png?fit=max&auto=format&n=8NGDpydQBcp7APgm&q=85&s=579f26c387a2ab1cc9d97770343fd45e" alt="Google Cloud Console Login" width="550" height="581" data-path="resources/white-label-google-login-page.png" />
</Frame>

## 2. Create a project

Click the project button in the top menu and you'll see the **Select a project** pop-up. Click the **NEW PROJECT** button create a project.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-create-project.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=27feea00d2f7d8aae09e01841c25335b" alt="Google Create Project" width="938" height="934" data-path="resources/google-create-project.png" />
</Frame>

Enter the **Project name** and click the **CREATE** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-project-name.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=57fccfbef28b42d19135fdada2ca7518" alt="Google Project Name" width="937" height="563" data-path="resources/google-project-name.png" />
</Frame>

## 3. Start to configure the OAuth consent screen

Once a project is created, go to **APIs & Services**. Select **Credentials** from the left-side menu then click the **CONFIGURE CONSENT SCREEN** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-credentials.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=a69beee42af6d2a7b204a476a7f7e04d" alt="Google Credentials" width="1144" height="564" data-path="resources/google-credentials.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-credentials2.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=b6bfb5df7afc7b2c7abe192a60a6ad9b" alt="Google Credentials" width="1144" height="490" data-path="resources/google-credentials2.png" />
</Frame>

Choose the External in the User Type options, then click the CREATE button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-create-button.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=cc54b87b6ef8a4eada94751d71a9208e" alt="Google Create Button" width="1144" height="638" data-path="resources/google-create-button.png" />
</Frame>

## 4. Edit app registration

### 4.1 OAuth consent screen

Enter the **App name**, **User support email**, upload **App logo**.

Enter the **Application home page**, **Application privacy policy link**, **Application terms and service link**.

Enter your website **domain**.

Enter your contact **Email addresses**.

Continue to the next step by clicking the **SAVE AND CONTINUE** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-edit-registration.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=451c6dc5277f2cf0168fb12c296fe5d7" alt="Google Edit Registration" width="937" height="2122" data-path="resources/google-edit-registration.png" />
</Frame>

### 4.2. Scopes

You'll be on the step **Scopes**. Click the **ADD OR REMOVE SCOPES** button to select the scopes.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-add-remove-scopes.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=49d9b7aa7faa57ef94fc5cf5b9718043" alt="Google Scopes" width="937" height="477" data-path="resources/google-add-remove-scopes.png" />
</Frame>

Select three required API Scopes:

* **.../auth/userinfo.email**
* **.../auth/userinfo.profile**
* **openid**

Once selected click on the **UPDATE** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-required-api-scopes.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=7211ed32b80aad5d61a88ed2e37baa1f" alt="Google Required API Scopes" width="1212" height="1102" data-path="resources/google-required-api-scopes.png" />
</Frame>

The selected scopes will now appear on the **Your non-sensitive scopes** section.

Continue to the next step by clicking on the **SAVE AND CONTINUE** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-sensitive-scopes-section.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=b4966da8a595326a71539c3cd18e31e0" alt="Google Sensitive Scopes" width="937" height="1461" data-path="resources/google-sensitive-scopes-section.png" />
</Frame>

### 4.3 Test users

You'll be on the step **Test users**. On this step you can add Test users to test the social login, or just continue to the next step by clicking the **SAVE AND CONTINUE** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/z7oEwFduSuMk4S_k/resources/google-test-users.png?fit=max&auto=format&n=z7oEwFduSuMk4S_k&q=85&s=c7e5a847803d85a9aeb675144611e9bd" alt="Google Test Users" width="937" height="736" data-path="resources/google-test-users.png" />
</Frame>

### 4.4 Summary

You'll be on the step **Summary** that shows you the outline of your app registration. Click the **BACK TO DASHBOARD** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-summary.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=2785824661e8c6b374d31cb3cb2e25f4" alt="Google Summary" width="939" height="2017" data-path="resources/google-summary.png" />
</Frame>

## 5. Create credentials

Select **Credentials** from the left-side menu. Click the **CREATE CREDENTIALS** button and select the **OAuth client ID** item.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-create-credentials.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=7d575ac82646ecde2033d321f7539f34" alt="Google Create Credentials" width="1211" height="498" data-path="resources/google-create-credentials.png" />
</Frame>

Once clicked, it'll take you to the **Create OAuth client ID** page.

Select the **Web application** option in the **Application type**. Enter a name of your OAuth 2.0 client in the Name field.

Enter allowed redirect URLs in the **Authorized redirect URIs** section.

See example:

* **[https://sss.com/login/google/callback](https://sss.com/login/google/callback)**

<Note>By default, URLs have the "/" symbol at the end of the path. Remove "/" before "?" if your site uses URLs without "/" at the end of the path.</Note>

Click the **CREATE** button.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-create-oauth-client.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=a1db2caac14655df76489ad31f8895d3" alt="Google Create OAuth Client" width="937" height="1370" data-path="resources/google-create-oauth-client.png" />
</Frame>

## 6. Enter your keys

Once you click the button, the **OAuth client created** pop-up will appear and you'll see your application keys.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/9rd0p8z5cmgWORWx/resources/google-oauth-client-created.png?fit=max&auto=format&n=9rd0p8z5cmgWORWx&q=85&s=8ff9f23f95425e20bbffa7d51058a64e" alt="Google OAuth Client Created" width="916" height="843" data-path="resources/google-oauth-client-created.png" />
</Frame>

Copy your **Client ID** and **Client Secret** keys and paste them to the **Client ID** and **Client secret** fields under the **Google Login Configuration** on the white-label > Settings > Social Logins.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/8NGDpydQBcp7APgm/resources/white-label-google-configuration.png?fit=max&auto=format&n=8NGDpydQBcp7APgm&q=85&s=fb6407e467caf3e77d3a978ed403df13" alt="White Label Google Configuration" width="1526" height="546" data-path="resources/white-label-google-configuration.png" />
</Frame>

## Test

Test the Social Login feature at the Login and Registration pages. If you're encountering issues, please contact our support team for assistance with any step of the setup process.

<Frame>
  <img src="https://mintcdn.com/greenowltechnologies/z7oEwFduSuMk4S_k/resources/google-test.png?fit=max&auto=format&n=z7oEwFduSuMk4S_k&q=85&s=8617b2a817fff07ff89814d5210c14db" alt="Google login test" width="594" height="653" data-path="resources/google-test.png" />
</Frame>

***

**Need help?** Contact our support team for assistance with any step of the setup process.
