---
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 includes a Login & Signup block that allows users to add a Google login option to their forms.
- Users must generate a Google Client ID through the Google Developers Console to enable Google login.
- The Login & Signup block supports enabling Google One Tap Popup for automatic login prompts.
- Users can customize the button type, theme, shape, text, and size for the Google login button in their forms.

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/).

## Frequently Asked Questions

**Q: What should I do if I can't generate a Google Client ID?**
A: If you're having trouble generating a Google Client ID, ensure you're logged into your Google account and have created a project in the Google Developers Console. If you haven't created a project, click on the CREATE PROJECT link. Remember, you need to fill out the OAuth consent screen and provide app information before you can access the Credentials page to create your OAuth client ID.

**Q: Are there any limitations when using Google login with Nexter Blocks?**
A: One limitation to note is that the Login & Signup block requires the Google Client ID to function properly. Without it, the Google login option will not work. Additionally, ensure that your website URL is correctly added in the Authorized JavaScript origins and redirect URLs when creating the Client ID to avoid issues.

**Q: What are the best practices for setting up Google login on my WordPress site?**
A: When setting up Google login, ensure that your Google Client ID is correctly configured and that you have enabled the necessary permissions in the Google Developers Console. It's also a good practice to test the login functionality after setup to ensure users can log in seamlessly. Consider using the Google One Tap Popup for a better user experience.

**Q: How do I troubleshoot issues with the Google login not appearing?**
A: If the Google login option is not appearing, first check that the Login & Signup block is properly installed and activated. Then, verify that you have correctly added your Google Client ID in the block settings. Additionally, ensure that your website URL matches the one registered in the Google Developers Console under Authorized JavaScript origins.