Hey there, welcome back to our channel! Today, we have an exciting tutorial for you. We’ll be showing you how to add a super convenient one-click login with Google in WordPress. By implementing this feature, your users will be able to sign in with their Google accounts, they don’t need to create or remember passwords and usernames to login to your website.
This will save your users time and also increase your conversion rates. So, are you ready to make your website more user-friendly? Let’s dive right into this step-by-step guide.
Step 1: Install the WordPress Plugin and Configure
As the first step, you have to install “Nextend Social Login” on your WordPress site. This plugin helps you to add social login buttons on your login page. Your site’s users can easily sign up using their social media accounts.
Go to the admin dashboard and navigate to the plugin area. Click the “Add New” button, then search for the Nextend plugin and install it.
After you have installed and activated the plugin, you can find it under the settings tab. When you go to the plugin settings page, you can set up different social media accounts.
In this video, we will show you how to setup a Google login. We already have a tutorial about setting up Facebook social login on WordPress. Check out this video if you want more information.
To start, click the “Getting Started” button below the Google widget.
Step 2: Create a Google App and Get API Keys
Alright, the next step is to create a Google App. It needs you to get Google API keys for integration with your website and Google account. Don’t worry, it’s easier than it sounds. Just follow along with me.
To get started, head over to the Google Cloud developer console and log in with your Google credentials if you’re not already logged in.
Once you’re in, you need to create a project on Google Console. If you don’t have a project yet, no worries! Just click on the blue ‘New Project‘ text on the right side.
If you already have a project, simply click on the name of your project in the top bar and select your project name from the modal that pops up. I already have a project for my WordPress website, so I selected this project name.
Great! Now that you have a project, let’s set up the OAuth consent screen. This is an important step to ensure a smooth login experience for your users. Click the “OAuth consent screen” button on the left-hand sidebar.
First, you have to Choose a User Type according to your needs. We are going to create this app for external users to login to our website using their Google account, So select “External” as the user type and press the “Create” button to proceed.
On this OAuth consent screen, you’ll need to provide some details about your app. Don’t worry, it’s just a few simple fields to fill out. Enter a name for your app in the “App Name” field, then add a support email as well. If you want, you can add a logo for this app, but it is not necessary.
Under the “App Domain”, add the necessary URLs from your website, such as your main site URL, privacy policy domain, and terms of service page.
Next, we’ll need to authorize your domain. This is crucial to make sure everything works seamlessly. Under the “Authorized Domains” section, press the “Add Domain” button and enter your domain name without subdomains.
Now, enter your contact information. This will help Google notify you about any changes or updates to your project. Next, proceed by clicking the “Save and Continue” button; also skip the “Scopes”, and “Test users” pages. At last, you land on this summary page.
Alright, we’re making progress! Now, let’s move on to creating the credentials for your Google App. Click on “Credentials” on the left side menu. In this section, we’ll create an OAuth client ID. This will allow your users to log in with their Google accounts in just one click!
To start, click the “Create credentials” button at the top, then choose the “OAuth client ID” option. In this new window, select “Web application” under Application Type, and then you can add a “Name” for your OAuth client ID.
Under the “Authorized redirect URIs” section, click “Add URI” and add the redirect URL. You can get this URL from the Nextend app page. After that, click the “Create” button.
We are almost there! Once you’ve created the OAuth client ID, you’ll get your unique credentials. We’ll need these to integrate the Google login into your WordPress website. Copy these credentials into Notepad.
But wait, there’s one more important step! Right now, your app is in testing mode, which means only a limited number of people can use it.
Let’s change that and make it available to all Google Account users. Click on the “OAuth consent screen” option again on the left side, then click the “Publish App” button under the “Publishing Status” section, and press the “Confirm” button.
Step 3: Google Login Integration with WordPress
We have created Google app credentials, and now we can add them to the WordPress Nextend plugin. So switch to the “Settings” tab. Paste the Google app credentials that you copied before into this field. Then click “Save Settings”.
After that, you will get this message that asks you to verify the configurations. Click the “Verify Settings” button and login using your Google account, then the plugin will verify configurations. If you get this message after the verification, your Google account login is now activated for your WordPress site.
You don’t have to do anything to add this; it will automatically be added to all the login pages. But if you want to add social login buttons manually, you can get them in the “Button” tab of the Nextend Social Login plugin.
And there you have it! You’ve successfully created your Google App for one-click login in WordPress. If you have any questions, open a thread on the MineX tech forum. Thanks for watching, and see you in the next one!
Leave a comment