Custom SSO Integrations

Single Sign-On (SSO) allows users to access multiple services with one set of credentials. Memberstack supports OpenID Connect Apps integrations.

In this article, you’ll learn how to use Memberstack as an OpenID Connect Provider.

• You can find timestamps and important links mentioned in the video at the end of the article. 
• also, you need a paid Memberstack plan to enable a live version of the SSO. If you don't have a live version right now, you can access all of the features in Test mode.

I suggest you use a nifty free site to generate code and test your SSO flow. It's called OpenID. That's what I'll be using for this demonstration.

• FYI  For this article, I'll create an SSO with Memberstack in Test mode,

1. Create an App

The first step is create an app.

1. Go to your Memberstack dashboard and click Dev tools on the side menu.
2. Go to the Test Mode Custom SSO Integrations field and click Add Integration.

In the popup window:

1. Enter a name for the app.
2. Enter the Redirect URI from OpenID. (see below)

Locating the OpenID URI

To copy and paste the OpenID URI:

1. Go to the OpenID page.
2. Click the CONFIGURATION link.
3. Click the field at the top of the page and select Custom.
4. Scroll down to the Remember to set line and copy this: https://openidconnect.net/callback
5. Click Save.

Go back to the Memberstack popup window.

1. Paste the link into the Redirect URIs field.
2. Click the Add Integration button.

Memberstack adds the app to the Test Mode Custom SSO Integrations field.

2. Copy Keys

The next step is to copy keys from the Memberstack app to OpenID.

1. Go to the Memberstack app and click Edit.
2. Copy the Client ID key.

Open the browser tab with the OpenID Connect Configuration page.

1. Paste the key into the OIDC Client ID field.
2. Go back to the Memberstack app and copy the Secret key.
3. Go back to the OpenID Connect Configuration page and paste the Secret key into the OIDC Client Secret field.

3. Customize Fields

Next, insert Memberstack's authentication URL into OpenID. Memberstack will then update the OpenID fields automatically.

• Use this URL: https://auth.memberstack.com/.well-known/openid-configuration

1. Go to the OpenID Connect Configuration page.
2. Paste the above link into the Discovery Document URL field.
3. Click the USE DISCOVERY DOCUMENT button.

OpenID automatically updates the endpoints.

4. Edit Scope

The final step is to configure the scope.

1. Go to the Scope field on the OpenID Connect Configuration page.
2. By default the field includes OpenID.
3. To include the user email, enter email. (optional)
4. To include the user name, enter profile. (optional)
5. Click Save.

5. Link to Signup

This step is optional.

Do you want to include a link to your signup page during login? If so, this article + quick video will show you how to set that up. 

6. Testing

Now it's time to run a log in simulation.

1. Go to the OpenID main page.
2. Click the START button.

 Enter user credentials and click Log in.

The user clicks Continue to authorize sharing their email and profile information with Dave App.

Next, the OpenID page displays.

1. Scroll down to the Exchange Code from Token heading.
2. Click the Exchange button.
3. Click Next.

Finally, click the Verify button.

The heading shows the test result.

6. Translate

Check out this article if you need to translate your SSO page into another language. Translate the Memberstack UI.

Time Stamps and Links

00:00 - Introduction & Overview

• https://openidconnect.net/
• Memberstack Dev tools page

00:50 - Understanding live mode and test mode. Learn more →

01:46 - Adding a new integration

02:00 - Redirect URI

02:30 - Client ID and Client Secret

03:00 - OpenID Connect Configuration settings

• Discovery document: https://auth.memberstack.com/.well-known/openid-configuration
• Authorization Token Endpoint: https://auth.memberstack.com/authorize

• Token Endpoint: https://auth.memberstack.com/token

• Token Keys Endpoint: https://auth.memberstack.com/wks

03:30 - Scope

• openid
• email = email
• profile = name

04:05 - Live Demo