Provider – VKontakte

VK Sample

Table of contents

How to enable VKontakte login in WordPress

1. Create VKontakte App

  1. Navigate to https://vk.com/apps?act=manage
  2. Log in with your VK credentials if you are not logged in.
  3. Locate the blue “Create app” button and click on it.
  4. Enter the Title for your App and select “Website” as platform.
  5. Into the “Website address” field enter the URL of your homepage
  6. Fill the “Base domain” field with your domain name.
  7. When all fields are filled, click the “Upload app” button.
  8. Fill the information form of your app, upload an app icon then click Save.
  9. Pick Settings at the left-hand menu
  10. Into the “Authorized redirect URI” field add the URL that Nextend Social Login suggests at the backend.
  11. Save your app
  12. Find the necessary “App ID” and “Secure key” at the top of the Settings page where you just hit the save button.

2. App setup

Once your VKontakte app is ready you’ll need to copy and paste the Application ID and Secure key to the VKontakte provider’s Settings tab. You can find the information at your VKontakte app’s Settings which you can reach from the left sidebar.

3. Verifying

Once your Application ID and Secure key has been added you need to verify the setup first. This verification helps you identify possible problems with the app.

Settings

VK Provider Configuration

Application ID

The Application ID of your VKontakte app. You can find it at your App → left menu: Settings.

Secure key

The Secure key of your VKontakte app. You can find it at your App → left menu: Settings.

Username prefix on register

Whenever a new user registers with their VKontakte account they can get a custom prefix so you can easily identify them.

Fallback username prefix on register

Whenever a new user registers with their VKontakte account and we can not generate a valid username from the first name or last name, a random username will be generated. With this option they can get a custom prefix so you can easily identify them.

Terms and conditions

This option can only be seen, if Terms and conditions is set to Show in Global Settings → Privacy tab. Here you can set custom Terms and Conditions for users who register with VKontakte. For more information please read our GDPR documentation.

Common error messages returned by VKontakte during verification

redirect_uri has wrong domain

{“error”:”invalid_request”,”error_description”:”redirect_uri has wrong domain, check application settings”}

The problem is that the entered Base domain field is not correct for your app. Check the 6th step of the App setup to fix the problem.

redirect_uri is incorrect

{“error”:”invalid_request”,”error_description”:”redirect_uri is incorrect, check application redirect uri in the settings page”}

The problem is that the entered Authorized redirect URI field is not correct for your app. Check the 11th step of the App setup to fix the problem.

client_id is incorrect

{“error”:”invalid_client”,”error_description”:”client_id is incorrect”}

The entered Application ID is not correct. Maybe the app with the entered ID was deleted. Go to the VKontakte provider → Settings and make sure that an existing App’s Application Id and Secure key was entered.

client_secret is incorrect

Error: invalid_client: client_secret is incorrect

The Secure key you copied from the VKontakte app is invalid. Make sure the correct one was copied.

Provider – Google

Google Sample

Important notice

Google Apps created for Social Login now need to be verified by Google. Verification is required if your app is marked as Public. Before your consent screen and application are verified by Google, you can still test your application with some limitations, once the limitation is exceeded, users will receive a notification from Google, that the App is not verified and probably isn’t trustworthy.
So before proceeding, please have a look at the Unverified apps documentation which indicates how unverified apps may behave. If you would like to know more information about the verification it self, please check the OAuth Application Verification FAQ of Google.

Table of contents

How to enable Google login in WordPress

1. App creation

To be able to log in via Google you must create a Google app first.

  1. Navigate to https://console.developers.google.com/apis/
  2. Log in with your Google credentials if you are not logged in.
  3. 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”. )
  4. Name your project and then click on the “Create” button again!
  5. 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! )
  6. Click the “OAuth consent screen” button on the left hand side.
  7. 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!
    Note: We don’t use sensitive or restricted scopes either. But if you will use this App for other purposes too, then you may need to go through an Independent security review!
  8. Enter a name for your App to the “App name” field, which will appear as the name of the app asking for consent.
  9. For the “User support email” field, select an email address that users can use to contact you with questions about their consent.
  10. Fill the “Application home page” field with the URL of your homepage.
  11. Enter your privacy policy and terms of service links into the “Application privacy policy link” and “Application terms of service link” fields.
  12. Under the “Authorized domains” section press the “Add Domain” button and enter your domain name, without subdomains! E.g.: example.com
  13. At the “Developer contact information” section, enter an email address that Google can use to notify you about any changes to your project.
  14. Press “Save and Continue” then press it again on the “Scopes”, “Test users” pages, too!
  15. On the left side, click on the “Credentials” menu point, then click the “+ Create Credentials” button in the top bar.
  16. Choose the “OAuth client ID” option.
  17. Select the “Web application” under Application type.
  18. Enter a “Name” for your OAuth client ID.
  19. Under the “Authorised redirect URIs” section click “Add URI” and add the URL that Nextend Social Login suggests at the backend!
  20. Click on the “Create” button
  21. 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.
  22. Currently your App is in Testing mode, so only 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.

2. App setup

Once your Google app is ready you’ll need to copy and paste the Client ID and Client Secret to the Google provider’s Settings tab. You can find the information at your Google app’s Settings which you can reach from the left sidebar.

3. Verification

Once your Client ID and Client Secret has been added you need to verify the setup first. This verification helps you identify possible problems with the app.

Settings

Google Provider Configuration

Client ID

The Client ID of your Google app. You can find it at left menu: Credentials → select your App.

Client Secret

The Client Secret of your Google app. You can find it at left menu: Credentials → select your App.

Select account on each login

When enabled, Google will display the account select prompt each time the user logs in with the Google provider.

Google Provider Configuration

Username prefix on Register

Whenever a new user registers with their Google account they can get a custom prefix so you can easily identify them.

Fallback username prefix on register

Whenever a new user registers with their Google account and we can not generate a valid username from the first name or last name, a random username will be generated. With this option they can get a custom prefix so you can easily identify them.

Terms and conditions

This option can only be seen, if Terms and conditions is set to Show in Global Settings → Privacy tab. Here you can set custom Terms and Conditions for users who register with Google. For more information please read our GDPR documentation.

Sync data

By default Nextend Social Login stores the first name, last name, email, avatar url and access token if it is possible, however some additional information can also be retrieved and stored.
When an option is checked, that field will be stored in a meta key with the specified name.

Google Sync Data 1

Sync fields

It determines when the synchronization shall happen.

  • Register: whenever a new user registers with a provider, their data will be retrieved and stored.
  • Login: whenever user logs in with a provider, their data will be retrieved and stored.
  • Link: whenever user links and existing WordPress account with a provider, their data will be retrieved and stored.

Locale

Stores the user’s locale. Returns string.

Genders*

Stores the user’s genders. Returns string.

Biographies*

Stores the user’s introduction. Information is set at Google – About Me page. Returns string.

Birthdays*

Stores the user’s birthday. Returns string in a format: YYYY-MM-DD.

Google Sync Data 2

Occupations*

Stores the user’s occupation. Information is set at Google – About Me page. Returns string.

Organizations*

Stores the user’s organization information from Google – About Me( Stored values: name, title, type, start date, end date, is it current). Returns array.

Locations*

Stores the place where the user lives or where used to live in the past. Information is set at Google – About Me page. Returns array.

Age ranges*

Stores the user’s age range. Returns string.

Addresses*

Stores the addresses of the user. Information is set at Google – About Me page. Returns array.

Phone Numbers*

Stores the user’s phone numbers. Information is set at Google – About Me page. Returns array.

For fields marked with * it is essential to enable Google People API in your project!
  • Navigate to Google API Console
  • Select your existing Google APP on the top left corner with the “Select a project” option, if you have not selected it yet.
  • Type “Google People API” in search field and click on the one called “Google People API”!
  • By pressing “Enable” button, your App is done!

Nextend Social Login Pro Addon 3.0.14 and earlier used to depend on the Google+ API, which was announced to shut down on March 7, 2019. This is the reason Nextend Social Login – Pro Addon uses the Google People API starting with the version 3.0.15.

Google Sign-In Branding Guidelines compatibility

According to the Google Sign-In Branding Guidelines, the button need to comply with some requirements. At the buttons tab of the Google provider, there are predefined skins (light and dark), which comply with those requirements.
Google Button Skins

Common error messages returned by Google during verification

redirect_uri_mismatch

Error: redirect_uri_mismatch
The redirect URI in the request, https://yoursite.com/wp-login.php?loginSocial=google, (where the yoursite.com is your domain) does not match the ones authorized for the OAuth client.


Access blocked: This app’s request is invalid
You can’t sign in because this app sent an invalid request. You can try again later, or contact the developer about this issue. Learn more about this error
If you are a developer of this app, see error details.
Error 400: redirect_uri_mismatch


The problem is that the entered Authorized redirect URIs field is not correct for your app. Check the 19th step of the App setup to fix the problem.

invalid_client

Error: invalid_client The OAuth client was not found.

The entered Client ID is not correct. Maybe the app with the entered ID was deleted. Go to the Google provider → Settings and make sure that an existing App’s Client ID and Client Secret was entered.

Request is missing required authentication credential

Error: Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.

The entered Client ID or Client Secret is not correct, it is probably contain some extra white-space characters. Make sure you copied the Client ID and the Client Secret in the appropriate format.

Error 403: org_internal

Error 403: org_internal
This client is restricted to users within its organization.

The “User Type” in your App was set to “Internal”. The problem is that, the internal Apps can only be used be the members of the organization. If the goal is to make the App being usable by everybody, the “External” User Type must be selected, as we suggested in the 7th step of the Getting Started Section.

Other 403 and 404 errors

When your other providers work properly, but your Google provider gives you 403 or 404 error, your server or firewall will most likely have a limitation that prevents accessing to pages with HTTP/HTTPS links in them. For more information please visit our Google 403 and 404 errors documentation.

Frequently Asked Questions

Why am I not logged in automatically after the version 3.0.19?

For a better user experience we modified our Google authentication related codes. So once the user was already logged in with the Google provider and logged out, then the person will have the opportunity to chose a different Google account.
It was a common problem that users logged in with a Google account other then the one they wanted, so they logged out from the site. But from this point, the login happened automatically with the selected account.
Fortunately Google offers an account selector scope, so starting from Nextend Social Login 3.0.19, the account selection box will be offered instead of the autologin. In this way users will be able to choose the account they would like to login with.

Provider – LinkedIn

LinkedIn Sample

Table of contents

How to enable LinkedIn login in WordPress

1. App creation

To be able to log in via Linkedin you must create a Linkedin app first.

  1. Navigate to https://www.linkedin.com/developer/apps
  2. Log in with your LinkedIn credentials if you are not logged in
  3. Locate the “Create app” button and click on it.
  4. Enter the name of your App to the “App name” field.
  5. Find your page in the “LinkedIn Page” field. If you don’t have one yet, create a new one at: https://www.linkedin.com/company/setup/new/
  6. Enter your “Privacy policy URL” and upload an “App logo”
  7. Read and agree the “API Terms of Use” then click the “Create App” button!
  8. You will end up in the products area. If you aren’t already there, click on the “Products” tab.
  9. Find “Sign In with LinkedIn using OpenID Connect” and click “Request access”.
  10. A modal will appear where you need to tick the “I have read and agree to these terms” checkbox and finally press the “Request access” button.
  11. Click on the “Auth” tab.
  12. Find “OAuth 2.0 settings” section and add the following URL at “Authorized redirect URLs for your app”
  13. Click on “Update” to save the changes
  14. Find the necessary “Client ID” and “Client Secret” under the “Authentication keys” section, on the “Auth” tab.

2. App setup

Once your Linkedin app is ready you’ll need to copy and paste the Client ID and Client Secret to the Linkedin provider’s Settings tab. You can find the information at your Linkedin app’s Settings which you can reach from the left sidebar.

3. Verification

Once your Client ID and Client Secret has been added you need to verify the setup first. This verification helps you identify possible problems with the app.

Settings

Linkedin Provider Configuration

Client ID

The Client ID of your Linkedin app. You can find it at your App under Authentication Keys.

Client Secret

The Client Secret of your Linkedin app. You can find it at your App under Authentication Keys.

Linkedin Provider Configuration

Username prefix on Register

Whenever a new user registers with their LinkedIn account they can get a custom prefix so you can easily identify them.

Fallback username prefix on register

Whenever a new user registers with their LinkedIn account and we can not generate a valid username from the first name or last name, a random username will be generated. With this option they can get a custom prefix so you can easily identify them.

Terms and conditions

This option can only be seen, if Terms and conditions is set to Show in Global Settings → Privacy tab. Here you can set custom Terms and Conditions for users who register with LinkedIn. For more information please read our GDPR documentation.

Sync data

LinkedIn stated all developers need to migrate to Version 2.0 of their REST API by May 1. Unfortunately the new Apps no longer provide access for the r_basicprofile permission, which means the fields we can access to are limited:

  • First name
  • Last name
  • User ID
  • Avatar

With additional scopes the Email Address of the user can also be retrieved.
Since the sync data fields we had in Nextend Social Login v3.0.18 and before are no longer available in the v2/me REST API Endpoint, we need to remove the whole sync data feature of the LinkedIn provider.

Common error messages returned by LinkedIn during verification

redirect_uri does not match

The redirect_uri does not match the registered value

The problem is that the entered Authorized redirect URLs field is not correct for your app. Check the 12th step of the App setup to fix the problem.

client_id is invalid

The passed in client_id is invalid

The entered Client ID is not correct. Maybe the app with the entered ID was deleted. Go to the LinkedIn provider → Settings and make sure that an existing App’s Client ID and Client Secret was entered.

Client authentication failed

Error: invalid_client: Client authentication failed

The Client Secret you copied from the LinkedIn app is invalid. Make sure the correct one was copied.

Limitations

Don’t replace the LinkedIn App if you have users connected with LinkedIn

Whenever a person connects with LinkedIn login, an ID will be created, which is unique for the specific LinkedIn app that the login happened over. If the same person tries to login over another LinkedIn App, the person will receive another, completely different ID.
In Nextend Social Login, we use these IDs to recognize the WordPress account that the LinkedIn account was linked with. So if you replace the LinkedIn App, users with linked LinkedIn Accounts will no longer be able to login with the new App.

If you really need to replace the LinkedIn App, then users with linked LinkedIn accounts can only login with LinkedIn, if the person:

  1. logs in with the traditional username and password form or maybe with another provider that is also linked to the account
  2. unlinks the currently linked LinkedIn account
  3. and links the LinkedIn account again, using the new LinkedIn App

Each user can find the Link and Unlink buttons on the WordPress default profile page, e.g.:

  • https://yoursite.com/wp-admin/profile.php

or you can display the Link and Unlink buttons using:

Provider – X (formerly Twitter)

X (formerly Twitter) Sample

Table of contents

How to enable X login in WordPress

App creation steps if you selected the v1.1 API version:


  • You must apply for a Developer Account and be approved before you may create new apps. Once approved, you will be able to create new apps from developer.twitter.com.
  • Additionally the query string is no longer supported in the Callback URL, meaning that in the URL you must leave the ? and every other parameters which come after it.

To be able to log in via X you must create an X app first.

  1. Navigate to https://developer.twitter.com/en/portal/projects-and-apps
  2. Log in with your X credentials if you are not logged in.
  3. If you don’t have a developer account yet, please apply one by filling all the required details! This is required for the next steps!
  4. Once your developer account is complete, navigate back to https://developer.twitter.com/en/portal/projects-and-apps if you aren’t already there!
  5. Click on “+ Add Project”!
  6. Name your project, and go through the basic setup. You’ll need to select your use case, give a description then click the “Next” button.
  7. Choose the “Production” option for “App environment”, then press “Next”!
  8. Into the “App name” field, enter a name for your App, then press “Next” again!
  9. You’ll find your API key and secret on this page. Copy and paste the “API Key” and the “API Key Secret” to the corresponding fields at Nextend Social Login > X > Settings and press “Save Changes”.
  10. Go back to your X project and on the left side, under the “Projects & Apps” section click on the name of your App.
  11. Scroll down and click on the “Set up” button at “User authentication settings”.
  12. Choose the “Read” option at “App permission”.
  13. If you want to get the email address as well, then don’t forget to enable the “Request email from users” option. In this case you also need to fill the “Terms of service” and the “Privacy policy” fields with the corresponding URLs!
  14. Select the “Web App, Automated App or Bot” option for “Type of App”.
  15. Into the “Callback URI / Redirect URL” field you should add the URL that Nextend Social Login suggests at the backend.
  16. Enter your site’s URL to the “Website URL” field.
  17. Click on “Save”.
  18. Go back to Nextend Social Login then verify and enable the X provider!

App creation steps if you selected the v2 API version:

Twitter V2 API has some rate limits that you need to consider before you choose a plan. For example we use the “GET_2_users_me” endpoint, which have:

  • User Rate Limit: which means a user can me “X” requests every 24 hours.
  • Effective 30-day limit: which means your App can serve a total of “Y” requests every 30 days. This limit is shared between all users and applied to the entire project.

Once the rate limit is reached, people won’t be able to login with X until the limit resets. If you want to have a higher limit, you might need to upgrade to the Basic plan of Twitter API v2.

To be able to log in via X you must create an X app first.

  1. Navigate to https://developer.twitter.com/en/portal/projects-and-apps
  2. Log in with your X credentials if you are not logged in.
  3. If you don’t have a developer account yet, please apply one by filling all the required details! This is required for the next steps!
  4. Once your developer account is complete, navigate back to https://developer.twitter.com/en/portal/projects-and-apps if you aren’t already there!
  5. Name your project, and go through the basic setup. You’ll need to select your use case, give a description then click the “Next” button.
  6. Choose the “Production” option for “App environment”, then press “Next”!
  7. Into the “App name” field, enter a name for your App, then press “Next” again!
  8. Click on the the App settings button on the bottom right corner.
  9. Scroll down and click on the “Set up” button at “User authentication settings”.
  10. Choose the “Read” option at “App permission”.
  11. Select the “Web App, Automated App or Bot” option for “Type of App”.
  12. Into the “Callback URI / Redirect URL” field you should add the URL that Nextend Social Login suggests at the backend.
  13. Enter your site’s URL to the “Website URL” field.
  14. Click on “Save”.
  15. Find your “Client ID” and “Client Secret”. Copy and paste the credentials to the corresponding fields at “Nextend Social Login > X > Settings” and press “Save Changes”.
  16. Verify the settings and enable the X provider!

Required Nextend Social Login settings for X App

Once your X app is ready you’ll need to copy and paste the API Key and API Key Secret or the Client ID and Client Secret ( depending on the selected API version ) to the X provider’s Settings tab.

Verify the settings

Once your API Key and API Key Secret or the Client ID and Client Secret ( depending on the selected API version ) have been added you need to verify the setup first. This verification helps you identify possible problems with the app.

Settings

Twitter Provider Configuration

API version

The OAuth and API version that Nextend Social Login should use. Either v1.1 or v2

API Key ( v1.1 )

The API Key of your X app. You can find it at your App → Keys and Tokens tab → Consumer Keys section.

API Key Secret ( v1.1 )

The API Key Secret of your X app. You can find it at your App → Keys and Tokens tab → Consumer Keys section.

Client ID ( v2 )

The Client ID of your X app. You can find it at your App → Keys and Tokens tab → OAuth 2.0 Client ID and Client Secret section.

Client Secret ( v2 )

The Client Secret of your X app. You can find it at your App → Keys and Tokens tab → OAuth 2.0 Client ID and Client Secret section.

Twitter Other Settings

Username prefix on Register

Whenever a new user registers with their X account they can get a custom prefix so you can easily identify them.

Fallback username prefix on register

Whenever a new user registers with their X account and we can not generate a valid username from the first name or last name, a random username will be generated. With this option they can get a custom prefix so you can easily identify them.

Terms and conditions

This option can only be seen, if Terms and conditions is set to Show in Global Settings → Privacy tab. Here you can set custom Terms and Conditions for users who register with X. For more information please read our GDPR documentation.

Profile image size

The avatar will be stored with the selected size.

Sync data

By default Nextend Social Login stores the first name, last name, email, avatar url and access token if it is possible, however some additional information can also be retrieved and stored.
When an option is checked, that field will be stored in a meta key with the specified name.

Twitter Sync Data

Sync fields

It determines when the synchronization shall happen.

  • Register: whenever a new user registers with a provider, their data will be retrieved and stored.
  • Login: whenever user logs in with a provider, their data will be retrieved and stored.
  • Link: whenever user links and existing WordPress account with a provider, their data will be retrieved and stored.

Bio

Stores the user’s bio.

Language

Stores the user’s language.

Location

Stores the user’s location.

Register date

Stores the date, when the X account registration happened.

Profile URL

Stores the user’s X profile URL.

Screen name

Stores the user’s screen name without the @ tag.

Owned website

Stores the user’s website.

Frequently Asked Questions

1. How can I get the email address from the X users when using the v1.1 API version?

If your app is already set up, go to the Projects & Apps Overview page, find your App and click on the App settings icon ( the one that looks like a gear). Then click on the “Edit” button at the “Authentication settings” section and switch on the “Request email address from users” setting.
Important: If you ask the email address, you also need to fill the “Terms of service” and the “Privacy policy” fields with the corresponding URLs of your site!

2. How can I get the email address from the X users when using the v2 API version?

Currently it is not possible to get the user’s email address when using the v2 API version, as X doesn’t offer a scope that requests access to this resources, and by default the email address is not returned, unfortunately.

Common error messages returned by X during verification

Callback url has been locked

Error: Unexpected response: This client application’s callback url has been locked /oauth/request_token

The problem is that the value that was entered into the “Callback URI / Redirect URL” field is not correct for your app. Check the 15th step of the App setup to fix the problem.

oauth_callback value ‘oob’

Error: Unexpected response: Desktop applications only support the oauth_callback value ‘oob’ /oauth/request_token

The problem is that the value that was entered into the “Callback URI / Redirect URL” field is not correct for your app. Check the 15th step of the App setup to fix the problem.

Not a valid callback URL format

Error The client application failed validation: Not a valid callback URL format.

The problem is that the value that was entered into the “Callback URI / Redirect URL” field is not correct for your app or it may contain whitespace character. Check the 15th step of the App setup to fix the problem.

Could not authenticate you

Error: Could not authenticate you

The entered API Key is not correct. Maybe the app with the entered ID was deleted. Go to the X provider → Settings and make sure that an existing App’s API Key and API Key Secret was entered.

Provider – Facebook

Facebook Sample

Important notice

Before proceeding, please have a look at the Facebook API changes.

Table of contents

How to enable Facebook login in WordPress

As of February 1, 2023, Facebook requires Business Verification for Advanced Access, which is necessary for the Facebook login feature. This means that, individuals can no longer use Facebook login on their websites to offer social login for their visitors, only verified businesses will be able to use this provider! For more information about this limitation, please check the official statement.

1. Create a Facebook App

To be able to log in via Facebook you must create a Facebook app first.

  1. Navigate to https://developers.facebook.com/apps/
  2. Log in with your Facebook credentials if you are not logged in.
  3. Click on the “Create App” button and then choose the “Authenticate and request data from users with Facebook Login” option and press “Next“!
  4. Select “No, I’m not building a game“.
  5. Fill the “Add an app name” and “App contact email” fields. The specified app name will appear on your Consent Screen!
  6. Optional: choose a “Business Manager Account” if you would like to. If you didn’t choose a “Business Manager Account” at this point, you will need to select it in step 24, before you start the “Verification“!
  7. Click the “Create App” button and complete the Security Check.
  8. Click on the “Use cases” tab on the left side and then click on the “Customize” button that appears next to the “Authentication and account creation” item.
  9. Press the “Go to settings” button that you can find below the “Facebook Login” section, next to “Settings“.
  10. A message at the top of the page might prompt you to switch to “Facebook Login for Business”. Ignore that, as our integration is for “Facebook Login“!
  11. Into the “Valid OAuth redirect URIs” field, you should add the URL that Nextend Social Login suggests in the backend.
  12. Click on the “Save changes” button. (If you receive a blank page after you pressed the “Save changes” button, you might need to refresh the page.)
  13. Press the “Go back” button on the top right corner, so you can return to the previous page.
  14. Below the “Permissions” section, find the “email” permission and click on the “Add” button.
  15. Press the “Go back” button on the top right corner again.
  16. On the left side, click on the “App settings” tab, then click “Basic“.
  17. Enter your domain name to the “App Domains” field.
  18. 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.
  19. 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. To comply with GDPR, you should already offer possibility to delete accounts on your site, either by the user or by the admin:
    • If each user has an option to delete the account: the URL should point to a guide showing the way users can delete their accounts.
    • If the accounts are deleted by an admin: then you should have a section – usually in the Privacy Policy – with the contact details, where users can send their account erasure requests. In this case the URL should point to this section of the document.
  20. Select a “Category“, an “App Icon“.
  21. Scroll down to the bottom of the page, press the “+ Add platform” button.
  22. Select “Website” platform, then press “Next” and enter the URL into the “Website > Site URL” field that Nextend Social Login suggests in the Getting Started guide within the plugin.
  23. Press the “Save changes” button.
  24. 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 trough the Business Verification, that you can start on the “Review > Verification” tab on the left side.
  25. After a successful Business Verification, you need to go to the “Review > App Review” tab, and open the review request with the “Edit” button. Fill in any missing fields here, then submit the form for review, and wait until it is approved by Meta, which may take several days.
  26. 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 “Publish” tab and publish your app by clicking on the blue “Publish” button at the bottom right corner. Before you press it, it is recommended to check the steps listed on the “Publish” page, if you configured everything properly.
  27. After everything is done, click on the “App settings” tab, then click “Basic“.
  28. 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 plugin’s settings.

2. App setup

Once your Facebook app is ready you’ll need to copy and paste the App ID and App secret to the Facebook provider’s Settings tab. You can find the information at your Facebook app’s Settings which you can reach from the left sidebar.

3. Verifying

Once your App ID and App secret has been added you need to verify the setup first. This verification helps you identify possible problems with the app.

Settings

Facebook Provider Configuration

App ID

The App ID of your Facebook app. You can find it at your App → left menu: Settings.

App Secret

The App Secret of your Facebook app. You can find it at your App → left menu: Settings.

Facebook Provider Configuration

Username prefix on Register

Whenever a new user registers with their Facebook account they can get a custom prefix so you can easily identify them.

Fallback username prefix on register

Whenever a new user registers with their Facebook account and we can not generate a valid username from the first name or last name, a random username will be generated. With this option they can get a custom prefix so you can easily identify them.

Terms and conditions

This option can only be seen, if Terms and conditions is set to Show in Global Settings → Privacy tab. Here you can set custom Terms and Conditions for users who register with Facebook. For more information please read our GDPR documentation.

Sync data

By default Nextend Social Login stores the first name, last name, email, avatar url and access token if it is possible, however some additional information can also be retrieved and stored.
When an option is checked, that field will be stored in a meta key with the specified name. The fields are stored in the wp_user_meta table.

NOTE: To use these fields, your app needs an App Review by Facebook, as of Facebook updated their App Review process and API permissions model. More information can be found on the Facebook App Review page.

Facebook Sync data

Sync fields

It determines when the synchronization shall happen.

  • Register: whenever a new user registers with a provider, their data will be retrieved and stored.
  • Login: whenever user logs in with a provider, their data will be retrieved and stored.
  • Link: whenever user links and existing WordPress account with a provider, their data will be retrieved and stored.

Age range

Stores the age range of the user, according to Facebook Age Demographic.

Birthday

Stores the user’s birthday.

Facebook Sync data

Profile link

Stores a link to the users’ Timeline.

NOTE: Facebook protects the user profile links, so they’ll only resolve the URL, if both conditions met:

1. you are logged in with your Facebook account
2. you are a friend of the persons whose profile link you opened

Hometown

Stores the users’ hometown.

Location

Stores the users’ current location which entered by them on their profile.

Gender

Stores the gender of the user.

Quotes

Stores the users’ quotes.

Facebook User Experience Design compatibility

According to the User Experience Design, the button need to comply with some requirements. At the buttons tab of the Facebook provider there are predefined skins, which comply with those requirements.
Facebook Button Skins

Facebook Data Use Checkup

To protecting people’s privacy, Facebook requires an annual checkup so they can ensure that your API access and data use comply with the Facebook policies.
If Facebook display the “Data Use Checkup” modal for your App, then make sure you complete it otherwise you may lose the API access.
Once you started the process, Facebook will ask the permissions that you need. In case of Nextend Social Login, we need the following permissions:

  • public_profile
  • email

so don’t forget to check them under the “Certify Data Use” section, before you continue to the next steps.
Note: If you use the sync data feature of the Pro Addon, then you will also need to select the permissions that we mention on the Sync Data tab for each field.

Frequently Asked Questions

Why can’t I get the user’s email address when they register via Facebook?

There are certain cases when Facebook does not return the user’s email address:

  • The user didn’t give permission for the App to access their email
  • No Email address on account
  • No confirmed email address on account
  • No verified email address on account
  • User entered a security checkpoint which required them to reconfirm their email address and they have not yet done so
  • Users’s email address is unreachable

The problem is described in an official Facebook post. We also set up a test page where you can test whether the user is supposed to get email address. This code is from the official Facebook graph without any changes.
If you feel the email address should be fetched upon registration but it’s not, you should open an official bug report at Facebook.

Common error messages returned by Facebook during verification

Can’t load URL

Can’t load URL: The domain of this URL isn’t included in the app’s domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.

The problem is that the App domains field does not contain your site’s current domain. Check the 16th steps of the App setup to fix the problem.

Facebook can also return this message when the Valid OAuth Redirect URIs doesn’t contain the correct OAuth Redirect URL. Check the 10th steps of the App setup to fix the problem.

In some rare cases the problem can happen because of poorly written 3rd party social plugins, so you could also try disabling your other plugins and see if the verification process works. Then when you find the plugin that causes the problem, you should contact its developers to get their plugin fixed.

URL blocked

URL blocked: This redirect failed because the redirect URI is not white-listed in the app’s client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs.

The problem is that the entered Valid OAuth redirect URIs field is not correct for your app. Check the 10th step of the App setup to fix the problem.

Error validating verification code

Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request

The problem is that the entered Valid OAuth redirect URIs field is not correct for your app. Check the 10th step of the App setup to fix the problem.

Invalid App ID

Invalid App ID: The provided app ID does not look like a valid app ID.

The entered APP id is not correct. Maybe the app with the entered ID was deleted. Go to the Facebook provider → Settings and make sure that an existing App’s ID and secret was entered.

Client secret error

Error: Error validating client secret

The App secret you copied from the Facebook app is invalid. Make sure the correct one was copied.

Unable to validate CSRF state

Error: Unable to validate CSRF state

The problem is related to the server’s cookie related caches. Some servers only accept special cookie name as the caching server allows only these special cookie names. You should get in touch with your host and ask them about their cookie related caches.

If you’re using Pantheon server, update your Nextend Social Login version to 3.0.6 or greater where the error should be fixed.

Appsecret proof error

Error: API calls from the server require an appsecret_proof argument

The problem is that the appsecret_proof argument got turned on at your API. You should turn it off.
Nextend Social Login currently does not use appsecret_proof as it does not need it, but it will support this setting from version 3.0.10.

App not setup

App not setup: This app is still in development mode, and you don’t have access to it. Switch to a registered test user or ask an app admin for permissions.

The problem is that the Facebook app wasn’t switched to live. Check the 24th step of the app configuration to learn how to switch your app to live.

App not active

This app is not accessible right now and the app developer is aware of the issue. You will be able to log in when the app is reactivated.


The problem is that you Facebook app is either in Development mode, or Meta blocked your App as it violated the Meta guidelines or you ignored some actions that Meta requested you to do.

  • First of all make sure you switched the App to live mode.
  • If it is already in live mode, check the “Required actions” section of your App, and fix all mentioned problems. Once all possible problems are fixed you might need to submit an appeal.

Feature unavailable

Feature unavailable: Facebook Login is currently unavailable for this app.

This error means that you don’t have the Facebook Login product added to your app. Probably you created your Facebook App in a way other than we described in the guide above, as it should add the Facebook Login product by default.

Facebook Login is currently unavailable

Feature Unavailable: Facebook Login is currently unavailable for this app, since we are updating additional details for this app. Please try again later.

This error usually occurs if your App doesn’t have Advanced Access for the “email” and “public_profile” permissions. Without Advanced Access, people outside of your Business won’t be able to login, as only those accounts are able to authenticate via your App, that have some kind of role assigned ( e.g. Tester, Developer, etc. ) in your App.
To be able to get advanced access, you need to go trough a Business Verification as we described in step 23.

If Meta has already approved your Business Verification request, but you still see this error message then it is also possible that your App has some basic information missing. You should check if you added a Privacy Policy URL, User Data Deletion( you can find more information about this in our Facebook – Getting Started section ), selected a Category / Sub-Category, chose an App Icon, and selected an App Purpose All of these can be modified in your Facebook App under Settings > Basic.

Limitations

Don’t replace the Facebook App if you have users connected with Facebook

Whenever a person connects with Facebook login, an ID will be created, which is unique for the specific Facebook app that the login happened over. If the same person tries to login over another Facebook App, the person will receive another, completely different ID.
In Nextend Social Login, we use these IDs to recognize the WordPress account that the Facebook account was linked with. So if you replace the Facebook App, users with linked Facebook Accounts will no longer be able to login with the new App.

If you really need to replace the Facebook App, then users with linked Facebook accounts can only login with Facebook, if the person:

  1. logs in with the traditional username and password form or maybe with another provider that is also linked to the account
  2. unlinks the currently linked Facebook account
  3. and links the Facebook account again, using the new Facebook App

Each user can find the Link and Unlink buttons on the WordPress default profile page, e.g.:

  • https://yoursite.com/wp-admin/profile.php

or you can display the Link and Unlink buttons using:

Facebook login fails in WebView ( Embedded Browsers )

For your account security, logging into Facebook from an embedded browser is disabled. To continue, download and log into the Facebook app on your device and try again.


If you receive the error message above, that means you are trying to login trough an embedded browser. On October 5, 2021, Meta officially deprecated the Facebook login over Android embedded browsers (WebViews) for logging in users.
Since the login can not work anyways, starting with Nextend Social Login version 3.1.3, we will hide the Facebook button in embedded browsers, just like we do in case of Google.
According to the official documentations of Facebook, App developers should rather launch links in external browsers or use Custom Tabs.