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.
- Go to your Memberstack dashboard and click Dev tools on the side menu.
- Go to the Test Mode Custom SSO Integrations field and click Add Integration.
In the popup window:
- Enter a name for the app.
- Enter the Redirect URI from OpenID. (see below)
Locating the OpenID URI
To copy and paste the OpenID URI:
- Go to the OpenID page.
- Click the CONFIGURATION link.
- Click the field at the top of the page and select Custom.
- Scroll down to the Remember to set line and copy this: https://openidconnect.net/callback
- Click Save.
Go back to the Memberstack popup window.
- Paste the link into the Redirect URIs field.
- 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.
- Go to the Memberstack app and click Edit.
- Copy the Client ID key.
Open the browser tab with the OpenID Connect Configuration page.
- Paste the key into the OIDC Client ID field.
- Go back to the Memberstack app and copy the Secret key.
- 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
- Go to the OpenID Connect Configuration page.
- Paste the above link into the Discovery Document URL field.
- Click the USE DISCOVERY DOCUMENT button.
OpenID automatically updates the endpoints.
4. Edit Scope
The final step is to configure the scope.
- Go to the Scope field on the OpenID Connect Configuration page.
- By default the field includes OpenID.
- To include the user email, enter email. (optional)
- To include the user name, enter profile. (optional)
- 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.
Now it's time to run a log in simulation.
- Go to the OpenID main page.
- 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.
- Scroll down to the Exchange Code from Token heading.
- Click the Exchange button.
- Click Next.
Finally, click the Verify button.
The heading shows the test result.
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
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
- email = email
- profile = name
04:05 - Live Demo