TeknoFlair

TeknoFlair Logo

How to integrate Google and Facebook authentication for user registration and login in WordPress?

integrate Google and Facebook
Share Now

To integrate Google and Facebook authentication for user registration and login in WordPress, you can use third-party plugins that simplify the process. Here’s a step-by-step guide on how to do this:

Install Required Plugins:

Navigate to Plugin > Add New plugin and search “Nextend Social Login” install and activate this plugin.

integrate Google and Facebook 1

integrate Google and Facebook 2

Navigate to Settings > Nextend Social Login option click and Connect your WordPress site to Google and Facebook.

integrate Google and Facebook 3

integrate Google and Facebook 4

Create API Keys:

Google API Keys:

  • Navigate to  https://console.developers.google.com/apis/
  • Log in with your Google credentials if you are not logged in.
  • If you don’t have a project yet, you’ll need to create one. You can do this by clicking on the blue “Create Project” text on the right side! ( If you already have a project, then in the top bar click on the name of your project instead, which will bring up a modal and click “New Project”. )

integrate Google and Facebook 5

  • Name your project and then click on the “Create” button again!

integrate Google and Facebook 6

  • Once you have a project, you’ll end up in the dashboard. ( If earlier you have already had a Project, then make sure you select the created project in the top bar! )

integrate Google and Facebook 7

  • Click the “OAuth consent screen” button on the left hand side.

integrate Google and Facebook 8

  • Choose a User Type according to your needs and press “Create”. If you want to enable the social login with Google for any users with a Google account, then pick the “External” option!

integrate Google and Facebook 9

  • Enter a name for your App to the “App name” field, which will appear as the name of the app asking for consent. 

integrate Google and Facebook 10

  • For the “User support email” field, select an email address that users can use to contact you with questions about their consent.

integrate Google and Facebook 11

  • Under the “Authorized domains” section press the “Add Domain” button and enter your domain name, probably: demo7.wpengineers.com without subdomains!

integrate Google and Facebook 12

  • At the “Developer contact information” section, enter an email address that Google can use to notify you about any changes to your project.

integrate Google and Facebook 13

  • Press “Save and Continue” then press it again on the “Scopes”, “Test users” pages, too!
  • On the left side, click on the “Credentials” menu point, then click the “+ Create Credentials” button in the top bar.

integrate Google and Facebook 14

  • Choose the “OAuth client ID” option.

integrate Google and Facebook 15

  • Select the “Web application” under Application type.

integrate Google and Facebook 16

  • Enter a “Name” for your OAuth client ID.

integrate Google and Facebook 17

  • Under the “Authorized redirect URIs” section click “Add URI” and add the following URL:
    • http://demo7.wpengineers.com/wp-login.php?loginSocial=google

integrate Google and Facebook 18

  • Click on the “Create” button
  • A modal should pop up with your credentials. If that doesn’t happen, go to the Credentials in the left hand menu and select your app by clicking on its name and you’ll be able to copy-paste the “Client ID” and “Client Secret” from there.

integrate Google and Facebook 19

  • Currently your App is in Testing mode, so only a limited number of people can use it. To allow this App for any user with a Google Account, click on the “OAuth consent screen” option on the left side, then click the “PUBLISH APP” button under the “Publishing status” section, and press the “Confirm” button.

integrate Google and Facebook 20

Facebook API Keys:

  • Navigate to https://developers.facebook.com/apps/
  • Log in with your Facebook credentials if you are not logged in.
  • Click on the “Create App” button and then choose the “Set up Facebook Login” option as use case and press “Next”!

integrate Google and Facebook 21

  • Pick the “Website” option for the platform.

integrate Google and Facebook 22

  • For the question “Are you building a game?”, select the “No, I’m not building a game” option, then press “Next”.
  • Fill the “Add an app name” and “App contact email” fields. The specified app name will appear on your Consent Screen!. Optional: choose a “Business Manager Account” if you would like to.
  • Click the “Create App” button and complete the Security Check.
  • Request access to the “email” permission:
    • Click on the “Use cases” tab on the left side and then click on the “Edit” button that appears next to the “Authentication and account creation” item.
    • Find the “email” permission and click the “Add” button.
    • Press the “Go back” button on the top right corner, so you can return to the previous page.

integrate Google and Facebook 23

  • Click on the “Products” tab on the left side and then click on the “Configure” button that appears next to the “Facebook Login” product, then choose “Settings”.

integrate Google and Facebook 24

  • Add the following URL to the “Valid OAuth redirect URIs” field: https://teknoflair.com/wp-login.php?loginSocial=facebook

integrate Google and Facebook 25

  • Press the “Save changes” button.
  • On the left side, click on the “Settings” tab, then click “Basic”.

integrate Google and Facebook 26

  • Enter your domain name to the “App Domains” field, probably: https://demo7.wpengineers.com/

integrate Google and Facebook 27

  • Fill up the “Privacy Policy URL” field. Provide a publicly available and easily accessible privacy policy that explains what data you are collecting and how you will use that data.
  • At “User Data Deletion”, choose the “Data Deletion Instructions URL” option, and enter the URL of your page* with the instructions on how users can delete their accounts on your site.
  • Select a “Category”, an “App Icon”.

integrate Google and Facebook 28

  • Scroll down to the bottom of the page, press the “+ Add platform” button.

integrate Google and Facebook 29

  • Select “Website” platform, then press “Next” and enter the following URL into the “Website > Site URL” field: https://demo7.wpengineers.com/

integrate Google and Facebook 30

integrate Google and Facebook 31

  • Press the “Save changes” button.

integrate Google and Facebook 32

  • By default, your application only has Standard Access for the “public_profile” and “email” permissions, which means that only you can log in with it. To get Advanced Access you will need to go through the Business Verification, that you can start on the “Verification” tab on the left side.

integrate Google and Facebook 33

integrate Google and Facebook 34

  • Currently your app is in Development Mode which also means that people outside of your business can not use it. Once your verification is completed, click on the “Go live” tab and publish your app by clicking on the “Go live” button at the bottom right corner. Before you press it, it is recommended to check the steps listed on the “Go live” page, if you configured everything properly.

integrate Google and Facebook 35

  • After everything is done, click on the “Settings” tab, then click “Basic”.
  • At the top of the page you can find your “App ID” and you can see your “App secret” if you click on the Show button. These will be needed in the plugin’s settings.

integrate Google and Facebook 36

integrate Google and Facebook 37

After both Accounts Verification so Google and Facebook login option available in login page

integrate Google and Facebook 38


Share Now

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top