How to Set Up Single Sign-On Between WordPress and Circle

In this tutorial, I’ll guide you through the process of integrating Circle, a community platform, with your WordPress site to enable a single sign-on (SSO). This means your users will only need one login to access both your WordPress-based content and your Circle community. Let’s dive in!

I have a video version of this tutorial as well as a step by step written version below for your convenience.

Step 1: Install and Activate the WP OAuth Server Plugin

To begin, we’ll add the necessary plugin to our WordPress site.

  1. Navigate to Plugins: In your WordPress dashboard, go to Plugins > Add New.
  2. Search for WP OAuth Server: In the search bar, type “WP OAuth Server”.
  3. Install the Plugin: Look for the plugin named “WP OAuth Server (OAuth Authentication)”, which is recommended by Circle. Click Install Now.
  4. Activate the Plugin: Once installed, click Activate.

Step 2: Configure the WP OAuth Server Plugin

With the plugin installed and activated, we need to configure it.

  1. Access OAuth Server Settings: In your WordPress dashboard, find OAuth Server in the left-hand menu and click Settings.
  2. Enable OAuth Server: Check the box to enable the OAuth server and click Save Changes.

Step 3: Add a New Client in WP OAuth Server

Next, we need to create a new client within the OAuth server.

  1. Navigate to Clients: In the OAuth server settings, click on Clients and then Add New Client.
  2. Fill in Client Details:
    • Client Name: Enter a name that helps you identify this connection, such as “Circle”.
    • Redirect URL: You’ll get this from your Circle account. (Instructions below)

Step 4: Obtain the Redirect URL from Circle

To connect Circle to your WordPress site, we need a specific URL from Circle.

  1. Go to Circle Settings: In your Circle account, navigate to the settings gear on the left-hand side.
  2. Access Single Sign-On: Click on Single Sign-On and choose WordPress WP OAuth.
  3. Copy the Callback URL: This URL follows the format https://yourcommunitydomain/oauth2/callback. Copy this URL.

Step 5: Complete Client Setup in WordPress

Now, return to your WordPress site to finalize the client setup.

  1. Paste the Redirect URL: In the new client setup screen, paste the copied URL into the Redirect URL field.
  2. Create the Client: Click Create Client. This will generate a Client ID and a Client Secret.

Step 6: Enter Client ID and Secret in Circle

With the Client ID and Secret generated, we need to input these into Circle.

  1. Return to Circle Settings: Go back to the Circle settings where you copied the callback URL.
  2. Paste the Credentials: Enter the Client ID and Client Secret in the respective fields in Circle.
  3. Enable SSO: Ensure that the SSO option is enabled. This will rely on the settings you configured in WordPress.

Step 7: Additional Circle Configuration

Make sure to set up a few additional settings in Circle to ensure a smooth user experience.

  1. Allow Existing Circle Members to Sign In: Initially, enable this option to avoid getting locked out during setup. You can disable it after verifying that everything works.
  2. Ensure Matching Admin Emails: The email used for your Circle admin account should match the admin email on your WordPress site to avoid access issues.

Step 8: Customize WordPress Login Screen

To ensure a cohesive brand experience, customize your WordPress login screen.

You can accomplish this easily using a plugin such as SureMembers or Thrive Themes‘ login customizer.

The SureMembers Method

  1. Enable Login Customizer: Navigate in WordPress to SureMembers > Settings > Login Customizer.
  2. Customize Login URL: You can toggle this on to change your login url. It’s nicer than the default wp-login.
  3. Customize Colors: Adjust your colors to match your brand. This is a simple customizer.

The Thrive Themes Method

  1. Access Thrive Dashboard: In your WordPress dashboard, go to Thrive Dashboard > Login Screen Branding.
  2. Manage Login Screen: Click on Manage Login Screen and then Edit with Thrive Architect.
  3. Customize: Adjust the appearance to match your brand, replacing the default WordPress look.

Testing the Integration

  1. Log Out of Both Sites: Ensure you are logged out of both your WordPress site and Circle.
  2. Test Login: Navigate to your Circle community and click the login button. You should be redirected to your custom WordPress login screen. After logging in, you should be redirected back to Circle, now logged in.

Conclusion

That’s all there is to setting up Circle with WordPress for single sign-on! Now, your users can enjoy seamless access to your courses, memberships, and community discussions without juggling multiple logins.

If you’re interested in joining our private community, check out the link below for more information. Happy integrating!