---
title: "How to add Google login to a WordPress website?"
url: https://nexterwp.com/docs/add-google-login-to-wordpress/
date: 2023-03-04
modified: 2026-04-15
author: "Aditya Sharma"
description: "With WordPress powering a growing number of websites on the internet, it's no surprise that it is one of the most popular content management systems in use. To make it..."
image: https://nexterwp.com/wp-content/uploads/2024/05/add-google-login-to-wordpress-1024x519.jpg
word_count: 734
---

# How to add Google login to a WordPress website?

## Key Takeaways

- Nexter Blocks Login & Signup block adds a Google login option to a WordPress login or registration form.
- Google Client ID setup starts in the Google Developers Console, where the user creates a project, configures the OAuth consent screen, and publishes the app.
- OAuth client ID creation uses Application type Web application and requires Authorised JavaScript origins and Authorised redirect URLs with the website URL.
- Social Login in the Login tab enables the Google toggle, supports Google One Tap Popup, and offers Redirect URL plus button options like Standard, Icon, Theme, Shape, Button Text, Icon Shape, Size, and Alignment.

With WordPress powering a growing number of websites on the internet, it's no surprise that it is one of the most popular content management systems in use. To make it easier for users to access your website, offering a wide range of login methods is important. One of the most popular methods is to add a Google login option to your WordPress website. This allows users to log in using their existing Google account, reducing the need to create yet another username and password combination.

With the Login & Signup block from Nexter Blocks, you can easily add a Google login option to your login or registration form.

*To check the complete feature overview documentation of Nexter Blocks* Login & Signup block, [click here](/docs/login-signup-block-settings-overview/).

***Requirement  - This block is a part of Nexter Blocks***, make sure its installed & activated to enjoy all its powers.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-login-form/)

First, you have to generate your **Google Client ID**.

## Generate Google Client ID

1. For this, you have to login to your Google account and go to the [Google Developers Console](https://console.developers.google.com/).

2. If you don’t have any project created, then click on **CREATE PROJECT **link.

![google client id 1](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-1-1.png)

3. On the next screen, add your **Project name** and click the **CREATE** button.

![google client id 2](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-2.png)

4. Then click on the **OAuth consent screen** on the left sidebar.

![google client id 3](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-3.png)

5. On that page, select the User Type and click the **CREATE** button.

- Internal – Only available to users within your organisation.

- External – Available to any user with a Google Account.

![google client id 4](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-4.png)

6. On the next page, add your app information. **App name**, **User support email** and **Developer contact information** fields are mandatory rest are optional until you deploy your app.

Then click on the **SAVE AND CONTINUE** button. 

![google client id 5](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-5.png)

7. On the Scopes page, click the **SAVE AND CONTINUE** button.

![google client id 6](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-6.png)

8. Also, on the Test users page, click the **SAVE AND CONTINUE** button.

![google client id 7](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-7.png)

9. On the Summary page, click the **BACK TO DASHBOARD **button at the bottom.

![google client id 8](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-8.png)

10. On the next page, click on the **PUBLISH APP** button to publish your app.

![google client id 9](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-9.png)

11. Once done, click on **Credentials** in the left sidebar.

![google client id 10](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-10.png)

10. On the Credentials page, from the top, click on **+ CREATE CREDENTIALS** > **OAuth client ID**.

![google client id 11](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-11.png)

11. Then, from the **Application type** dropdown, select **Web application**.

![google client id 12](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-12.png)

12. Once you select the option then, you have to add the following details.

- **Name** - Add your application name.

- **Authorised JavaScript origins** - Click the **ADD URI** button to add your website URL - Example: *http://www.yourwebsite.com*.

- **Authorised redirect URLs** - Click the **ADD URI** button to add your website URL - Example: *http://www.yourwebsite.com*.

Once done, click on the **CREATE** button.

![google client id 13](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-13-1.png)

13.  On the next page, you’ll get your **Client ID** and **Client Secret,** copy and paste them into a notepad.

![google client id 14](https://nexterwp.com/wp-content/uploads/2023/03/google-client-id-14-2.png)

> *Note: For the Login & Signup block, you only need the Client ID.*

## Add the Client ID in the Login & Signup block

Once you have your Client ID, add the block on the page, go to **Forms** > **Type** and select any of the form types **Login**, **Register** or **Login & Register**. 

Select the appropriate layout from the **Layout** section.

> *Note: Here, we are using the Login form, but following the same process, you can add Google login to both ****Register**** and ****Login & Register**** forms.*

![](https://nexterwp.com/wp-content/uploads/2023/03/login-signup-login-type-new.png)

Once your form fields are ready, go to the **Login** tab and click the **+Add Field** button.

From the **Field** dropdown, select **Social Login**.

From there, turn on the **Google** toggle to enable login via Google. Add your id in the **Google Client ID** field.

You can also enable **Google One Tap Popup** by turning on the toggle. With this option, it will automatically show a popup asking the user to login via Google.

But if you don’t enable **Google One Tap Popup**, you’ll see a few more options.

**Type** - From here you can choose the button type, Standard or Icon.

**Theme** - You can select the button theme.

**Shape** - For the Standard button shape.

**Button Text** - You can choose from different button texts for the Standard button.

**Icon Shape** - For the Icon button shape.

**Size** - For the button size.

Finally, in the **Redirect URL** field, you can add a page link to redirect users to a specific page after login.

From the **Alignment,** you can align the button in the form.

Also, check [How to add Facebook login to a WordPress website](https://nexterwp.com/docs/add-facebook-login-to-wordpress/).