How to set up google authentication

How to set up google authentication


Introduction

Google authentication is configured by navigating to Website Settings → Authentication → Google Login, and filling in the two fields: Client ID and Client Secret.

In the following section, we’ll guide you through the process of obtaining these two values.

The steps below are based on and expanded from Google’s official tutorial: "Integrating Google Sign-In into your web app", specifically the "Create authorization credentials" section.

Google’s setup tutorial assumes you’ve already: Created a project and Set up branding for your app. If you haven’t completed these steps yet, follow the instructions below from Step 1 "Create a Project".


1. Prerequisites on Aphyo

Before getting started, make sure you meet the following requirements:


2. Prerequisites on Google

2.1. Google Cloud Project

To obtain your Client ID and Client Secret, you first need to create a project in the Google Cloud Console.
Click “Create New Project” to begin.
If you already have a project you will see the name of the project instead of "Create New Project".
Notes
We recommend creating a new project in either case. 

Finish the process by naming your project and click on "Create". 


2.2. Google Cloud Project Branding

After creating the project, you need to configure branding.
(Google requires this step as part of the setup process.)
Click “Create Branding” to proceed.

2.2.1. Get Started.

Click the “Get Started” button.


2.2.2. Project Configuration 

Under App Information, fill in the following fields:
  1. Name – Enter a name for your application.
  2. Email – Enter a valid email address.
Click “Next” to continue.


2.2.3. Audience

Select the “External” option.
Click “Next” to proceed.


2.2.4. Contact Information

In the Email address field, use the same email you entered in Step 2.
Click “Next”.


2.2.5. Finish

Check the box to accept the Google API Services: User Data Policy.
Click “Continue”, then “Create”.



3. Create Auth Client

We’ll now walk you through the process of obtaining your Client ID and Client Secret.
We are now at the beginning of Google’s tutorial section titled "Create authorization credentials".
At this point, you may also consult Google’s official documentation for additional context and guidance.

3.1. Create Client

Click “Create client”.


3.2. Create OAuth Client ID

Under Application Type, select Web application.
In the Name field, enter a name for your client.


3.3. Add Authorized URIs

Click “Add URI”, then:
  1. For Authorized JavaScript origins, add your website’s domain.
  2. For Authorized redirect URIs, add your domain followed by /.auth/login/google/callback.
Click “Create” to continue.


3.4. OAuth Client Created

Your Client ID and Client Secret have been generated.
Click “OK” to finish.


3.5. Additional Information

To view your Client ID and Client Secret again, click on the project name.


4. Setup Google Login

4.1. Navigate to Google Login Setup Card

Go to Website Settings.



Click on Authentication.


Select Google Login.


4.2. Submit the Required Information

Enter your Google Client ID and Google Client Secret in the corresponding input fields.
Click “Save Settings” to apply the changes.



Next steps

  1. show or hide the authentication element
  2. edit authentication element texts
  3. edit authentication element styles

    • Related Articles

    • How to edit authentication element styles

      In this tutorial, you’ll learn how to customize the styles of the authentication element. Note regarding state: This element can have multiple states, which are controlled from the bottom section of the corresponding editor. The states refer to: ...

    • How to edit authentication element texts

      In this tutorial, you’ll learn how to edit the texts of the authentication element. Note regarding state: This element can have multiple states, which are controlled from the bottom section of the corresponding editor. The states refer to: whether ...

    • How to show or hide the authentication element

      In this tutorial, you'll learn how to manage the visibility of the authentication element. Step 1 - Open Website Settings Click on the "Website Settings" button. Step 2 - Open Authentication Settings In the Website Settings menu, select ...

    • How to change the background of an existing section

      As a website builder designed for beginners, Aphyo offers intuitive tools that make it easy to personalize various elements of your site, including the background of existing sections. Whether you want to enhance the visual appeal, align with your ...

    • How to change brand colors

      This tutorial will guide you on how to change brand colors. Step 1 - Open Website Styles Click on the "Website Styles" button. Step 2 - Open Colors In the "Website Look & Feel" menu, select "Colors". Step 3 - Open Color Editor Click on the main color ...