> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.elyna.mx/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/mercanaut/KDmyt8Ckkczlb7xf/resources/white-label-google-login-page.png?fit=max&auto=format&n=KDmyt8Ckkczlb7xf&q=85&s=56e6f820de28a32201f8d98058e6cc76" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-create-project.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=5dfb4d14827dfcd6959435490b5191f9" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-project-name.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=0fe8a4b5cba11f8ce6361f01df22036a" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-credentials.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=2035b688cc8aa99624e39f1145630038" alt="Google Credentials" width="1144" height="564" data-path="resources/google-credentials.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/mercanaut/i15PlQKKRq0SUdaM/resources/google-credentials2.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=47c3941110e14cf40e697d411b418dee" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-create-button.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=d9d36350a34b2d2945fbadf0c826b495" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-edit-registration.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=0d010edd732ab2a03fddb89c3e323463" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-add-remove-scopes.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=3b3b04c69cca0c6900fda95bb3f492f3" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-required-api-scopes.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=0499943c8b5742234285c81bfefa2bf4" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-sensitive-scopes-section.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=dd05fcb49423199424655eec47b8ee3d" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-test-users.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=be9009cd06643bedb6ecfa9040482cb9" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-summary.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=d6a5d9c3ff197d59a1c04e11072f64f8" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-create-credentials.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=403ca935a7aff20db83bd29a8a64fb78" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-create-oauth-client.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=e06b3c65ad0ed9846e1582c6e4e6f5c5" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-oauth-client-created.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=62cad89b50d10de2d43f02a58f042d33" 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/mercanaut/KDmyt8Ckkczlb7xf/resources/white-label-google-configuration.png?fit=max&auto=format&n=KDmyt8Ckkczlb7xf&q=85&s=5a198bbcbc084a8636d7856076e36d1f" 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/mercanaut/i15PlQKKRq0SUdaM/resources/google-test.png?fit=max&auto=format&n=i15PlQKKRq0SUdaM&q=85&s=3f8ad1fee67ae3ed89787de8d4306cb2" 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.
