User Registration – Social Connect

The Social Connect addon extends the core functionality of the User Registration & Membership plugin by enabling seamless social media authentication. This powerful integration allows website visitors to register and log in using their existing social media accounts, eliminating the need to create and remember additional login credentials for your WordPress site.

Prerequisites:
- Active installation of User Registration & Membership Plugin (Pro)
- Active installation of Social Connect Addon

Install User Registration & Membership Pro #

To use the Social Connect Addon, ensure User Registration & Membership Pro is installed and activated. If not, purchase it from wpuserregistration.com and follow our guide on activating it with a license key.

Activate Social Connect Addon #

1. Navigate to User Registration & Membership > Addons in your WordPress dashboard.
2. Locate the Social Connect Addon in the list of available addons.
3. Toggle to activate the addon.

Once activated, you’ll find new Social Connect settings under: User Registration & Membership > Settings > Social Connect

From here, you can configure your preferred social login options and begin setting up each social network integration. Currently, the plugin integrates with Facebook, X (formerly Twitter), Google, LinkedIn, and Instagram.

The social login option using social media (whichever is enabled) appears on your login page as below:

Setting Up Facebook Login #

User Registration & Membership plugin allows you to enable Facebook login or registration on your website using the users’ Facebook accounts.

Prerequisites: 
- A Facebook developer account
- A registered Facebook app

Step 1: Register a Facebook App

First, log in to the Facebook Developer portal or create a new account to access Meta for developers. Here’s where you’ve to create an app.

Click the Create App button to proceed.

Now, select app Type as Consumer and hit the Next button.

You’ll now be asked to provide App Details:

• App Name: Enter your website name (e.g., “My Site Login”).
• App Contact Email: Use your admin email.

Once you give the app name and email, click the Next button.

Next, select App Use Case as Other. Keep on clicking the Next button to finish the setup.

Now, you’ll see the details of your app, where you can confirm them and click Create App.

Step 2: Set Up Facebook Login

In your app dashboard, navigate to Products > Add Product.

Here, you need to select Facebook Login and click Set Up. After that, you’ll be asked to choose the platform for the app, so select Web.

Now, provide the necessary details like your site URL.

Follow the setup wizard until you reach the final step.

Step 3: Configure OAuth Redirect URIs

1. Go to Facebook Login > Settings.
2. Under Valid OAuth Redirect URIs, enter all URIs.
   • When configuring the Valid OAuth Redirect URIs for your User Registration & Membership plugin, you must add specific URLs that tell Facebook where to send users after they authenticate.
   • For pages like login, my-account, and registration, include the user_registration_social_login=facebook parameter at the endpoint.

Hence, these must match exactly what your plugin will use. If you have added a custom page, copy the URL and add the endpoint as mentioned earlier under valid OAuth redirect URIs. You can add multiple redirect URIs if you have login functionality on different pages

Important Notes: Replace yourdomain.com with your actual domain name

After adding these URLs, click “Save changes” at the bottom of the Facebook settings page to apply your configuration.

3. Check the Redirect URI

You can now enter the OAuth redirect URI individually to check for validity, under the Redirect URI Validator.

Step 5: Copy App ID and Secret

In your Meta dashboard, navigate to App Settings > Basic, locate:

• App ID
• App Secret (click Show to reveal).

Copy both credentials and keep them safe.

Step 6: Configure the Facebook API Settings

In your WordPress dashboard, go to User Registration & Membership > Settings > Social Connect. Now, enable Facebook Login: Toggle the switch to “On”. Finally, paste the App ID and App Secret into their respective fields.

Click Save Settings. Users can now log in using their Facebook account.

Step 7: Test Facebook Login

1. Open your website in incognito/private browsing mode.
2. Navigate to the login or registration page.
3. Click the Login with Facebook button.
4. Users will be redirected to Facebook for authentication.

Troubleshooting

• “Invalid Redirect URI” Error: Ensure the URIs in Facebook’s settings match your site’s URLs exactly (case-sensitive, no typos).
• “App Not Live” Error: Add your domain to App Domains and ensure HTTPS is enabled.

For more details, visit Facebook Documentation

Facebook Login not working on Mobile Phones

If you get the following error message while logging in using Facebook on your mobile devices, this suggests that the App you created on the Facebook Developer site isn’t live.

For this, follow the steps below.

• Go to Facebook for developers from here
• Choose My Apps from the top bar
• Click on your app icon ( then you will notice that your app is not live from the top bar )

• From the left side select Settings > Basic
• Put your privacy policy link in the Privacy Policy URL and in the User data deletion field, you can make a copy from this privacy policy ( select file from the top bar and select make a copy )
• Save changes

Setting Up Google Login #

If you have a Google account, you can easily create the API keys from Google. Follow these steps:

Step 1: Create a Google Cloud Project

1. Go to console.cloud.google and click on Create project on the top menu bar.

2. Enter a meaningful project name that you’ll recognize and select the organization location if required.
3. Click Create to create your project.

Step 2: Configure the OAuth Consent Screen

1. In the left navigation menu, expand APIs & Services and select OAuth consent screen.

2. Now, select your newly created project, and click on Get started.

3. Complete the required project configuration:

• Give App name
• Choose the appropriate user type for your application (External or Internal)
• Developer contact information

 4. Click on Create.

Step 3: Create OAuth Client ID Credentials

Now, you’ll see the OAuth Overview screen asking you to create OAuth client.

1. Click on Create OAuth client to create client IDs.

2. Select the application type as Web Application for your WordPress site.
3. Give the name to your OAuth 2.0 client.

Configure Authorized JavaScript Origins and Redirect URIs.

Note: When Google asks for a redirect URI, they’re essentially asking for a URL (e.g., https://yourdomain.com/callback). 

• Click Add URI (Uniform Resource Identifier) and add your website URL under Authorized JavaScript origins:
  
  For example: https://yoursite.com. Now, replace yoursite.com with your domain.

• Under the Authorized redirect URIs add the URLs of the page where users will log in or register, followed by the endpoint:
  ?user_registration_social_login=google

These are the URLs of the page, where you want to allow user to login or register using their Google account.

Few examples of valid redirect URls:

https://yoursite.com/login/?user_registration_social_login=google
https://yoursite.com/my-account/?user_registration_social_login=google
https://yoursite.com/registration/?user_registration_social_login=google

• Click Create to authorize Google login.  

Step 4: Add Credentials to WordPress

After creating the OAuth client, Google will give you a Client ID and a Client Secret. Copy both keys and navigate to WordPress Dashboard.

In your WordPress Dashboard:

1. Go to User Registration & Membership > Settings > Social Connect >API Settings.
2. Toggle to enable Google Login and paste the Client ID and Client Secret into their respective fields.
3. Click Save Changes.

Now, users will see the option to log in using their Google account.

You can customize the login message with anything you want through Advance Settings.

Step 5: Test Google Login

1. Visit your site’s login page in private or incognito mode.
2. Click the Google Login button.
3. If successful, users can now log in or register using their Google accounts!

If you have not configured the settings properly, you might see the error as shown in the image below:

So, verify that all redirect URIs are correctly formatted and have the endpoint ?user_registration_social_login=google

Setting up X (formerly Twitter) Login #

Step 1: Create an APP in X(formerly Twitter)

1. Go to the X (formerly Twitter) developer portal to create a new app.

2. If you don’t have a developer account, it will ask you to create one. So, hit the Apply button and create an account for free. If you already have a developer account, you can skip this step.

3. The default app will be available under Projects & Apps in your dashboard. Click on it, and you will see the details for this app.

Step 2: Configure User Authentication for X (formerly Twitter)

1. Under User authentication settings, click on the Set up button

2. Set up app permissions as per your preference and choose the type of app as Web App for WordPress website.

3. Add your app info to configure app settings

Callback URI/ Redirect URL: It is your callback page (at the redirect URL) when X (formerly Twitter) sends the user back:

Do not add query strings to your callback URLs in your X (formerly Twitter) app’s configuration
X (formerly Twitter) will allow you to pass any standard query strings along with your callback URL in your OAuth/request_token request. Therefore, Twitter does not allow you to add query strings to the end of the callback URL you list in the X (formerly Twitter) apps dashboard.
Example:

• You want to use https://yourdomain.com?source=twitter as your callback URL
  • Add this to the X (formerly Twitter) app dashboard: https://yourdomain.com

For further information read X's documentation.

Now click on Save.

Step 3: Copy Client ID and Secret Key

You’ll now be redirected to the page with your OAuth 2.0 Client ID and Client Secret. Copy them and go back to your WordPress dashboard.

Step 4: Configure the X (formerly Twitter) API Settings

Go to User Registration & Membership > Settings > Social Connect in your WordPress dashboard. Now, enable Twitter Login and paste the Client ID and Client Secret into their respective fields.

Click Save Settings. Users can now log in using their X (formerly Twitter) account.

Step 5: Test X (formerly Twitter) Login with User Registration & Membership Plugin

1. Open your website in incognito/private browsing mode.
2. Navigate to the login or registration page.
3. Click the Login with Twitter button.
4. Users will be redirected to X (formerly Twitter) for authentication.

Now you should be able to log in using your Twitter credentials.

For more details, visit the X's developer guide. 

Setting up LinkedIn Login #

Step 1: Create an App on LinkedIn

Go to the LinkedIn developers page and click the Create App button to create a new application.

Enter the details of your app and submit the form:

After submitting the form, you will be redirected to your app’s settings page.

Step 2: Configure Authentication on LinkedIn

Go to the ‘Auth‘ tab to find your authentication keys.

Also, enter the fully qualified URLs to define valid OAuth 2.0 callback paths in the OAuth 2.0 settings in the Auth tab.

OAuth Redirect URIs should have an exact match.
More on this in the last section of this documentation, or click here.

Now, you must add permissions to use the LinkedIn login on your website. To do this, go to the Products tab and add ‘Sign With LinkedIn‘.

When you add the ‘Sign In with LinkedIn‘, you will be able to see the permissions in the OAuth Scope section in the Auth Tab.

Generate the Client ID and Client Secret for your LinkedIn app and make a note of the Client ID and Client Secret for later use.

Step 3: Enable LinkedIn Social Connect in User Registration & Membership Settings

1. Go to User Registration & Membership > Settings > Social Connect tab in your WordPress dashboard.
2. Toggle the LinkedIn option to enable it.
3. Enter the Client ID and Client Secret obtained from the LinkedIn app configuration.

Save your settings.

You can now allow users to log in using their LinkedIn accounts on your WordPress website.

To test, you can follow the steps as mentioned above for other apps.

That’s all for the social connect API settings.

Social Connect Advanced Settings #

After activating the add-on, you’ll see an extra Social Connect tab inside the User Registration’s setting section. To get started using social connect, you need to go to Advance Setting and check the box which says “Enable social registration ?” and also you can check the option “Display social buttons in registration ?” to display the social buttons on your registration form.

Enable Social Registration: Tick the checkmark if you want to enable social registration.

Display social buttons in registration: Tick here if you want to display social buttons in the registration.

Default User Role: This option lets you choose the user role for social registration.

Connect socially connected users with form: Choose the registration form from the dropdown to connect with the socially connected users. It will provide the additional form field from your registration form to socially connected users.

In order to allow users to edit their profile details and add more information, you will have to connect these users to the registration form created with the User Registration plugin.

Social Login Templates: Select a template for social login.

Social text: Text that appears on the social icon login page.

Social Login Button on Individual Form #

Now, the User Registration’s Social Connect addon provides you the flexibility to add a custom social connect button on individual forms.
To do so, please go to the individual form setting. Scroll down and there you will find the setting called”Social Connect option” to select the social button on the specific form.

Redirect URLs: #

Make sure you have the https://example.com/wp-login.php/?user_registration_social_login=facebook like, redirect URLs. 

Or, if you are using Social Connect with the default registration login page or my-account page, make sure to add https://example.com/login/?user_registration_social_login=facebook or https://example.com/my-account/?user_registration_social_login=facebook where login and my-account are page slugs created with user registration  shortcode [user_registration_login] and [user_registration_my_account] respectively.

Note: the above URLs are for Facebook. You can replace the word 'Facebook' in the above URLs with Google, or LinkedIn for the respective social networks.