---
title: "How to add Google login to a WordPress website?"
url: https://qa.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://qa.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 offers a Login & Signup block that allows easy integration of Google login into WordPress forms.
- Google Client ID generation requires creating a project in the Google Developers Console and configuring OAuth consent settings.
- The Login & Signup block enables customization options for Google login, including button type, theme, and size.
- Google One Tap Popup can be enabled to prompt users for login automatically, enhancing user experience.

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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.nexterwp.com/docs/add-facebook-login-to-wordpress/).