After a brief stint working on other projects, it's time for a quick pop back over to Auth0. In my previous post about integrating TalentLMS and Auth0 with SAML 2.0, I describe how to <a href="/posts/2019/using-saml-2-0-with-auth0-to-authenticate-users-in-talent-lms/">capture the user's first and last name</a> during the registration process. Instead, for this task we are taking the first name and last name capturing out of the user sign up and implementing it as part of what Auth0 calls <a href="https://auth0.com/docs/users/concepts/overview-progressive-profiling">Progressive Profiling</a>. The documentation is both extremely helpful and entirely too specific to be of use. A lot of the complications with this task was been figuring out what the specific implementation that the documents describe is trying to do, and then implementing that process in a simpler or different manner.
<img src="/images/auth0-progprof-pocform.png" alt="Are you jealous of my awesome styling? It&#x27;s ok, I am, too.">
<h2>Create a Simple Website</h2>
As a quick proof-of-concept, I made a <a href="https://gist.github.com/drovani/b78e757821ef8fe9ec8d545174e66ebc#file-index-html">single html page</a>, uploaded it to an Azure Storage static website, and use that as the landing point for the Progressive Profiling. Some notable highlights in the file:
<ul>
<li>Line 22: replace <code>{instance}</code> with the subdomain of your Auth0 account.</li>
<li>Line 24, 27: the name on these inputs needs to match what Auth0 is looking for on the receiving end.</li>
<li>Live 22, 34-37: Auth0 sends a <code>state</code> parameter that needs to be sent back to Auth0 when returning the user to the login workflow.</li>
</ul>
<pre><code>&#x3C;!DOCTYPE html>
&#x3C;html lang="en-us">
 &#x3C;head>
 &#x3C;title>Auth0 Progressive Profiling&#x3C;/title>
 &#x3C;style>
 body{
 max-width: 900px;
 margin-left: auto;
 margin-right: auto;
 }
 label{
 display: block;
 }
 &#x3C;/style>
 &#x3C;/head>
 &#x3C;body>
 &#x3C;header>
 &#x3C;h1>Auth0 Progressing Profiling&#x3C;/h1>
 &#x3C;h2>Proof of Concept page&#x3C;/h2>
 &#x3C;/header>
 &#x3C;main>
 &#x3C;form id="submitform" method="POST" action="https://{instance}.auth0.com/continue?state=">
 &#x3C;label>First name
 &#x3C;input name="given_name" required />
 &#x3C;/label>
 &#x3C;label>Last name
 &#x3C;input name="family_name" required />
 &#x3C;/label>
 &#x3C;button type="submit">Save Changes&#x3C;/button>
 &#x3C;/form>
 &#x3C;/main>
 &#x3C;/body>
 &#x3C;script>
 const urlparams = new URLSearchParams(window.location.search);
 const stateval = urlparams.get('state');
 const form = document.getElementById('submitform');
 form.action = form.action + stateval;
 &#x3C;/script>
&#x3C;/html>
</code></pre>
This page can be styled any way needed and can be hosted anywhere. For simplicity, follow the guide for "<a href="https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website-how-to?tabs=azure-portal">Host a static website in Azure Storage</a>". The important piece from this process is that you will need a URL for the user to be sent to during the sign in workflow.
<img src="/images/auth0-progprof-staticurl.png" alt="Static Website in Azure Storage URL">
<h2>Create an Auth0 Rule</h2>
Log into Auth0 and create a new Rule; the name doesn't matter. Paste in the code from <a href="https://gist.github.com/drovani/b78e757821ef8fe9ec8d545174e66ebc#file-progressive-profiling-js">the following gist</a>:
<ul>
<li>Line 6: This is going to look for a metadata field of <code>progressive_profiling_url</code>. If that doesn't exist, then this whole rule is irrelevant, so just continue on.</li>
<li>Line 13: Auth0 sets the <code>context.protocol</code> on the return trip to be <code>redirect-callback</code>; thus, we are able to take different action whether this is the first trip through this rule or the second trip through.</li>
<li>Line 18: These are the field names that must match what the form is posting.</li>
<li>Line 30: If this isn't the return trip through this rule, then we need to send the user off to the <code>progressive_profiling_url</code>.</li>
</ul>
<pre><code>function (user, context, callback) {
 const RULE_NAME = 'Progressive Profiling';
 console.log(`${RULE_NAME} started.`);

 context.clientMetadata = context.clientMetadata || {};
 const progprof_url = context.clientMetadata.progressive_profiling_url || configuration.progressive_profiling_url;

 // skip if this doesn't need progressive profiling
 if (!progprof_url) {
 return callback(null, user, context);
 }

 user.user_metadata = user.user_metadata || {};

 // if returning from the profile site
 if (context.protocol === "redirect-callback") {
 // build complete user profile
 user.user_metadata = Object.assign(user.user_metadata,
 _.pick(
 context.request.body,
 ['given_name', 'family_name']));

 // update user profile in Auth0
 auth0.users.updateUserMetadata(user.user_id, user.user_metadata)
 .then(() => {
 console.log(`${RULE_NAME}: ${user.user_id}: Updated user profile with given_name "${user.user_metadata.given_name}" and family_name "${user.user_metadata.family_name}".`);
 callback(null, user, context);
 })
 .catch((err) => {
 console.log(`${RULE_NAME} ERROR:`, err);
 callback(err);
 });
 } else {
 // check if user already has profiled fields
 if (!user.user_metadata || !user.user_metadata.given_name || !user.user_metadata.family_name) {
 context.redirect = {
 url: progprof_url
 };
 console.log(`${RULE_NAME}: Redirecting to ${context.redirect.url}`);
 callback(null, user, context);
 }
 }
}
</code></pre>
This rule should be set as the last rule that performs a redirect. For example, if you are also using the <a href="/posts/2019/authenticate-shopify-customers-with-auth0/">Shopify Multipass</a> rule, then this rule needs to come after that. Auth0 doesn't redirect the user until after all rules have been touched; thus, the last one to set the <code>context.redirect.url</code> will be where the user goes.
<h2>Add Client Metadata Field</h2>
There are two places you could set the <code>progressive_profiling_url</code> field - globally on the Rules page, or at the application level under Advanced Settings.
<img src="/images/auth0-progprof-globalkey.png" alt="Rule Configuration global setting">
By setting it in the global settings, then this rule will apply to all authentication applications.
<img src="/images/auth0-progprof-applevelkey.png" alt="Application Metadata setting">
When setting it as an application metadata, the redirect will only occur when users are attempting to log into a website that uses these settings. This is useful when you don't want to bug the user for their additional information for sites that don't require it, but require it when the third-party site mandates the values be supplied.

Auth0 Progressive Profiling Proof-of-Concept

What better way to follow up from the last two posts by combining the concepts. In "This week at BlueBolt", I present my solution for utilizing Auth0 to authenticate a user and then pass them back to Shopify utilizing the Multipass feature.
<a href="https://www.youtube.com/watch?v=8bF5ft-oOWU"><img src="/images/leeloo-dallas-auth0.jpg" alt="Leeloo Dallas Auth0 Multipass"></a>
The primary steps involved in this process include:
<ol>
<li><a href="#enable-multipass-on-shopify-account">Enable Multipass on Shopify account</a></li>
<li><a href="#create-an-auth0-application">Create an Auth0 Application</a></li>
<li><a href="#add-auth0-rule-to-create-multipass-token-and-redirect-user">Add Auth0 rule to create Multipass token and redirect user</a></li>
<li><a href="#update-shopify-theme-with-auth0-links">Update Shopify Theme with Auth0 Links</a></li>
<li><a href="#add-url-values">Add URL Values</a></li>
<li><a href="#optional-capture-first--last-name-during-signup">Optional: Capture First &#x26; Last Name During Signup</a></li>
</ol>
This post was updated on 2020-01-31, adding a <code>return_to</code> URL to redirect the user to after being authenticated by Shopify.
<h2>Prerequisites</h2>
Similar to how TalentLMS requires an upgraded subscription in order to utilize SSO, Shopify requires a Shopify Plus storefront. As a <a href="https://www.shopify.com/partners">Shopify Partner</a>, you can create development stores to test out any functionality you need to implement on a Plus store.
An Auth0 account is also required. Their free tier includes everything necessary, but even if it didn't, a newly created instance includes all paid features for a few weeks to get you started.
<h2>Enable Multipass on Shopify account</h2>
Log into the Shopify store, go to the <code>Settings</code> page and click into the <code>Checkout</code> window. Customer accounts need to be either optional or required. This will allow you to enable Multipass for the store.
<img src="/images/multipass-step1-shopify-enable.png" alt="Shopify - Settings - CheckOut - Customer accounts">
This Multipass secret will be used by the encryption routine to create a cipher that Shopify will be able to decrypt and verify that a Multipass request is legitimate. If you ever suspect that your Multipass key has been compromised, then Disable and re-Enable Multipass. This will generate a new secret key which you will need to copy into Auth0.
<h2>Create an Auth0 Application</h2>
Within the Auth0 dashboard, go to <code>Applications</code>, click <code>Create Application</code>, given it a name (like "Shopify Store" - this is publicly visible!) and choose the <code>Regular Web Application</code>.
<img src="/images/multipass-step2-auth0-createapp.png" alt="Auth0 - Applications - Create Application">
Skip the Quick Start; go to Settings.
For the following sections, you need to substitute <code>{shopify-domain}</code> with the domain of your particular store (ex: <code>sample-store.myshopify.com</code>)
<ul>
<li>Allowed Callback URLs: <code>https://{shopify-domain}/account</code></li>
<li>Application Login URI: <code>https://{shopify-domain}/account/login</code></li>
<li>Allowed Logout URLs: <code>https://{shopify-domain}/account/logout</code></li>
</ul>
Expand the Advanced Settings section and add these two key/value pairs under Application Metadata:
<ul>
<li>Key: shopify_domain; Value: <code>{shopify-domain}</code></li>
<li>Key: shopify_multipass_secret; Value <code>{multipass-secret}</code></li>
</ul>
<img src="/images/multipass-step3-auth0-appmetadata.png" alt="Auth0 - Applications - Advanced Settings - Application Metadata">
<h2>Add Auth0 rule to create Multipass token and redirect user</h2>
Now that we have a landing point for the Shopify store to send users to, we need to be able to pass the authenticated user back to the Shopify store. This is where Multipass comes into play.
<img src="/images/multipass-step4-auth0-createrule.gif" alt="Auth0 - Rules - Create Rule">
Start by creating a new Rule in Auth0, use the <code>Empty rule</code> template, give it a descriptive name (like: "Shopify Multipass"), and paste in <a href="https://gist.github.com/drovani/8199b1e0ffa1976c00af6781fcb98fbf#file-auth0-rule-shopify-multipass-js">the following code</a>.
<pre><code>function (user, context, callback) {
 if (context.clientMetadata &#x26;&#x26; context.clientMetadata.shopify_domain &#x26;&#x26; context.clientMetadata.shopify_multipass_secret)
 {
 const RULE_NAME = 'shopify-multipasstoken';
 const CLIENTNAME = context.clientName;
 console.log(`${RULE_NAME} started by ${CLIENTNAME}`);

 const now = (new Date()).toISOString();
 let shopifyToken = {
 email: user.email,
 created_at: now,
 identifier: user.user_id,
 remote_ip: context.request.ip
 };
 if (context.request &#x26;&#x26; context.request.query &#x26;&#x26; context.request.query.return_to){
 shopifyToken.return_to = context.request.query.return_to;
 }

 if (context.user_metadata)
 {
 shopifyToken.first_name = user.user_metadata.given_name;
 shopifyToken.last_name= user.user_metadata.family_name;
 }

 const hash = crypto.createHash("sha256").update(context.clientMetadata.shopify_multipass_secret).digest();
 const encryptionKey = hash.slice(0, 16);
 const signingKey = hash.slice(16, 32);

 const iv = crypto.randomBytes(16);
 const cipher = crypto.createCipheriv('aes-128-cbc', encryptionKey, iv);
 const cipherText = Buffer.concat([iv, cipher.update(JSON.stringify(shopifyToken), 'utf8'), cipher.final()]);

 const signed = crypto.createHmac("SHA256", signingKey).update(cipherText).digest();

 const token = Buffer.concat([cipherText, signed]).toString('base64');
 const urlToken = token.replace(/\+/g, '-').replace(/\//g, '_');

 context.redirect = {
 url: `https://${context.clientMetadata.shopify_domain}/account/login/multipass/${urlToken}`
 };
 }
 return callback(null, user, context);
}
</code></pre>
<ul>
<li>Line 2: since Auth0 runs all rules for all authentications, we want to restrict this to just when the Auth0 Application has declared the <code>shopify_domain</code> and <code>shopify_multipass_seceret</code> metadata.</li>
<li>Line 4-6: Some minor logging, just to verify that the rule is being run.</li>
<li>Line 8-14: Shopify requires at least the <code>email</code> and <code>created_at</code> data points. For added information, we are also passing an <code>identifier</code> (in case multiple Auth0 accounts have the same email address) and <code>remote_ip</code> to ensure that this Multipass request can only be used by the same computer that sent the initial login request.</li>
<li>Line 15-17: If there is a <code>return_to</code> value in the query string, then add this to the Shopify token.</li>
<li>Line 19-23: In my <a href="/posts/2019/using-saml-2-0-with-auth0-to-authenticate-users-in-talent-lms/">TalentLMS/Auth0 post</a>, I describe how to grab first/last name when signing up a user. If that is in place, this will also add those data points to the Shopify account.</li>
<li>Line 25-36: These lines that do the actual encryption were taken from <a href="https://github.com/beaucoo/multipassify/blob/master/multipassify.js">a repository</a> that I found on GitHub, so thanks go to <a href="https://github.com/corymsmith">Cory Smith</a> from Calgary, AB for this one.</li>
<li>Line 38-40: This sets the destination for the authenticated user.</li>
</ul>
Once this rule runs, the user will be redirected back to the Shopify store. This is important, because if there are any Auth0 rules after this one, they will be completely skipped.
<h2>Update Shopify Theme with Auth0 Links</h2>
For this example, we are just going to add a link to login into Auth0. If you want to completely replace the Shopify Login process with Auth0, then instead of presenting the user with a login page, you can redirect the user directly to Auth0. As a Proof-of-Concept, though, this will require the user to manually click the link.
Start by editing the current theme (or whatever theme you want to use to test this out).
<img src="/images/multipass-step5-shopify-edit-theme.png" alt="Shopify - Online Store - Themes - Edit Code">
Open the Login page, typically under Templates you will find the <code>customers/login.liquid</code> file. Find a good place to add the link; I put it next to the "Create account" link.
<pre><code>&#x3C;a href="{{ settings.auth0_login_url }}">Log in with Auth0&#x3C;/a>
</code></pre>
<img src="/images/multipass-step6-shopify-loginauth0link.png" alt="Shopify - customers/login.liquid">
You may also want to put a link on the registration page, located in the <code>customers/register.liquid</code> template. If you are completely replacing Shopify logins with Auth0, then this will be another page where you will redirect the user straight to Auth0 instead of requiring them to click on a specific link.
Next up is to replace the logout link with the Auth0 logout. There is a logout link on the account page, found in <code>customers/account.liquid</code>. If your theme has a logout link anywhere else, that will also need to be replaced with the following:
<pre><code>&#x3C;a href="{{ settings.auth0_logout_url }}">{{ 'layout.customer.log_out' | t }}&#x3C;/a>
</code></pre>
Finally, we need to <a href="https://help.shopify.com/en/themes/development/theme-editor/settings-schema">configure the theme settings</a> to allow a user to paste the login and logout urls. Open the <code>settings_schema.json</code> file and paste the following snippet to the end of the array. This will provide an admin user the ability to key in the URL value without having to modify the theme templates directly.
<img src="/images/multipass-step7-shopify-settingsschema.png" alt="Shopify - settings_schema.json">
This snippet creates a new settings section called "Auth0 Config" and add the two input that we need. Note that the <code>id</code> property matches the name of the properties we used above for the login and logout links.
<pre><code>{
 "name": "Auth0 Config",
 "settings": [
 {
 "type": "text",
 "id": "auth0_login_url",
 "label": "Auth0 Login Url",
 "info": "The full Auth0 URL to redirect the customer to for login."
 },
 {
 "type": "text",
 "id": "auth0_logout_url",
 "label": "Auth0 Logout Url",
 "info": "The full Auth0 URL to redirect the customer to for logout."
 }
 ]
}
</code></pre>
<h3>Add URL Values</h3>
To put the values for the Auth0 URLs, you can either directly edit the <code>settings_data.json</code> file or you can use the Shopify admin UI. I prefer the UI, because then Shopify handles escaping any necessary characters.
Let's first build the login URL. Go back to Auth0 and copy the <code>Client ID</code> for your application (it's the one created in step 2).
<img src="/images/multipass-step8-auth0-clientid.png" alt="Auth0 - Applications - Client ID">
<ul>
<li>auth0-instance: the URL for your Auth0 instance.</li>
<li>clientid: the value from Auth0</li>
<li>shopify-domain: the domain you want the user sent back to. This must match the Allowed Callback URLs initially specified.</li>
<li>return-to-path: this can either be set as a hardcoded value (like "account") or it can be dynamically replaced with JavaScript on the page. This is helpful if you want to override the login on the Cart page.</li>
</ul>
<pre><code>https://{auth0-instance}.auth0.com/authorize?response_type=code&#x26;client_id={clientid}&#x26;return_to=https://{shopify-domain}/{return-to-path}&#x26;scope=SCOPE&#x26;state=STATE
</code></pre>
The logout URL looks very similar:
<ul>
<li>auth0-instance: the URL for your Auth0 instance.</li>
<li>clientid: the value from Auth0</li>
<li>shopify-domain: the domain you want the user sent back to. This must match the Allowed Logout URLs initially specified.</li>
</ul>
<pre><code>https://{auth0-instance}.auth0.com/v2/logout?response_type=code&#x26;client_id={clientid}&#x26;returnTo=https://{shopify-domain}/account/logout
</code></pre>
Back to the Themes page, now click the <code>Customize</code> button, switch to the <code>Theme settings</code>, expand the <code>Auth0 Config</code> section, and paste the URLs from above.
<img src="/images/multipass-step9-shopify-settings.gif" alt="Shopify - Theme - Customize - Theme settings - Auth0 Config">
<h2>Optional: Capture First &#x26; Last Name During Signup</h2>
The final step is to customize the Sign Up page to require the user to enter values for First and Last name. The simplest way (that I found) to do this is to customize the login page in Auth0. Under <code>Universal Login</code>, click on the <code>Login</code> tab, toggle the "Customer Login Page" and select the "Lock" Default Template. This uses the <a href="https://auth0.com/docs/libraries/lock/">Auth0Lock</a> and for our purposes, we will be utilizing the <code>additionalSignUpFields</code> array <a href="https://auth0.com/docs/libraries/lock/v11/configuration#additionalsignupfields-array-">configuration option</a>. Add the following JSON snippet to the code block:
<pre><code>additionalSignUpFields:[{
 name: "given_name",
 placeholder: "Enter your First Name"
},
{
 name:"family_name",
 placeholder:"Enter your Last Name"
}],
</code></pre>
And it should look something like this:
<img src="/images/sso-step7-customize-login-page.png" alt="Auth0 - Customize Sign Up Fields">
Click <code>Save Changes</code> and that should be it! Go back to Shopify's login page and you can test it out. To make sure it really works, log yourself out of Shopify, and when logging back in, click the <code>Log in with Auth0</code> link you created earlier. You can go through the Sign Up workflow, which should require First name, Last name, Email, and Password.
<h2>In Production</h2>
Once you are ready to force all users to use Auth0 to login, the <code>customers/login.liquid</code> template can be completely replaced with a redirect to the <code>auth0_login_url</code>. All links to the login page can be replaced with direct links to the same setting. Also, all logout links need their url to be replaced with the <code>auth0_logout_url</code> setting.

Authenticate Shopify Customers with Auth0

Prior to this week, I did not know who <a href="https://www.talentlms.com/">TalentLMS</a> is, what <a href="https://wiki.oasis-open.org/security/FrontPage#SAML_V2.0_Standard">SAML</a> does, and how <a href="https://auth0.com/">Auth0</a> fits into the SSO alphabet soup. However, when a client wants something figured out, that's what I am here to do! After pouring over documentation for both TalentLMS and for Auth0, going down several dead-end paths, and nagging a few of my coworkers to "try it again?", I now successfully (and very delicately) have credentials collected from Auth0 logging a user into TalentLMS.
The primary steps involved in this process include:
<ol>
<li><a href="#enable-saml20-sso-integration-in-talentlms">Enable SAML2.0 SSO integration in TalentLMS</a></li>
<li><a href="#create-an-auth0-application">Create an Auth0 Application</a></li>
<li><a href="#map-setting-in-talentlms">Map Setting in TalentLMS</a></li>
<li><a href="#create-auth0-rule-to-define-saml-mapping">Create Auth0 Rule To Define SAML Mapping</a></li>
<li><a href="#capturing-first--last-name">Capturing First &#x26; Last Name</a></li>
<li><a href="#how-to-break-talentlms">How to Break TalentLMS</a>
<ol>
<li><a href="#talentlms-username-must-match-auth0-name">TalentLMS "Username" must match Auth0 "Name"</a></li>
<li><a href="#dont-switch-sso-login-screen-until-everything-works">Don't Switch "SSO login screen" Until Everything Works</a></li>
<li><a href="#talentlms-does-not-permanently-delete-users">TalentLMS Does Not Permanently Delete Users</a></li>
</ol>
</li>
<li><a href="#is-there-a-better-way">Is There a Better Way?</a></li>
</ol>
This post was updated on 2020-01-31, adding information about TalentLMS's <code>nameidentifier</code> requirements and how to lock down user accounts.
<h2>Prerequisites</h2>
TalentLMS requires a subscription level of Basic or above to implement Single Sign-On. I could not find any way around this, even temporarily. They don't have any sort of a "developer" plan or other trial period to be able to demonstrate a proof-of-concept. At $159.00 per month, one will need to invest at least that much to make this work. Thankfully, my client had no problem bumping up their subscription tier without even knowing if SSO would work.
An Auth0 account is also required. Their free tier includes everything necessary, but even if it didn't, a newly created instance includes all paid features for a few weeks to get you started.
<h2>Enable SAML2.0 SSO integration in TalentLMS</h2>
Over in TalentLMS, go to <code>Home / Account &#x26; Settings / Users</code> and change the <code>SSO integration type</code> to "SAML2.0".
<img src="/images/sso-step1-talent-settings.png" alt="TalentLMS - Settings - Users - SSO Integration type">
At the bottom of the page is the <code>Identity provider (IdP) configuration</code> section. There are values in here that need to go over to Auth0.
<pre><code>The Entity ID is:
{instance}.talentlms.com

The Assertion Consumer Service (ACS) URL is:
https://{instance}.talentlms.com/simplesaml/module.php/saml/sp/saml2-acs.php/{instance}.talentlms.com

The Single Logout Service URL is:
https://{instance}.talentlms.com/simplesaml/module.php/saml/sp/saml2-logout.php/{instance}.talentlms.com
</code></pre>
<h2>Create an Auth0 Application</h2>
Within the Auth0 dashboard, go to <code>Applications</code>, click <code>Create Application</code>, given it a name (like "TalentLMS") and choose the <code>Regular Web Application</code>.
<img src="/images/sso-step2-auth0-createapp.png" alt="Auth0 - Applications - Create Application">
For now, skip the Quick Start and Settings; go to Addons and flip the toggle for "SAML2 Web App".
<img src="/images/sso-step3-auth0-saml2webapp.png" alt="Auth0 - Applications - SAML2 Web App">
Put the url for the TalentLMS instance as the <code>Application Callback URL</code> and paste the Settings JSON below (replacing "{instance}" with your value).
<pre><code>{
 "mappings": {
 "user_id": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier",
 "email": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
 "name": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
 "given_name": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname",
 "family_name": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname",
 },
 "passthroughClaimsWithNoMapping": true,
 "mapUnknownClaimsAsIs": true,
 "logout": {
 "callback": "https://{instance}.talentlms.com/simplesaml/module.php/saml/sp/saml2-logout.php/{instance}.talentlms.com",
 "slo_enabled": true
 }
}
</code></pre>
Since TalentLMS requires a unique identifier (TargetedID), a First name, a Last name, and an Email, we need to have Auth0 capture all four fields on sign-up and pass them through with the SAML identity claim. This requirement is what took up the bulk of my time trying to figure out. We'll come back to adding all the finishing pieces needed to make it work.
After you click the <code>Save</code> button at the bottom of the modal, switch over to the <code>Usage</code> tab, and click on "Download Auth0 certificate". Save this file and open it in your favorite text editor. It will look something like this:
<pre><code>-----BEGIN CERTIFICATE-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDMYfnvWtC8Id5bPKae5yXSxQTt
BAMTEGhjLXBvYy5hdXRoMC5jb20wHhcNMTkxMTA4MTgwNzM0WhcNMzMwNzE3MTgw
NzM0WjAbMRkwFwYDVQQDExBoYy1wb2MuYXV0aDAuY29tMIIBIjANBgkqhkiG9w0B
AQEFAAOCAQ8AMIIBCgKCAQEAvyV51yFcm+SJgWT8AKcw0uFTFRZnjkrmJZCMuKvC
+Zpul6AnnZWfI2TtIarvjHBFUtXRo96y7hoL4VWOPKGCsRqMFDkrbeUjRrx8iL91
KjIU8w3a8+9TDRpVbTLYtG9t8f1SjDcroBHLaF1XE8gH253L3tzK0Vfw3v7SHM9V
lso3/gsf/CfJIxQXVkCtUinRElRAIGbSSuOL9fP5Coy29uC4h+w+Tkan0IQsVoTu
bE5TH49mTN/ZF9Pcio1dktJOLVi+Ww4yl9l4Qbu4K4tEK4FXWyNqTDc+11SFd2uU
C3RMtsyO6qT+KeuwBtBjqgKHjB0jl1Yn/Du8ljPESb2mgwIDAQABo0IwQDAPBgNV
HRMBAf8EBTADAQH/MB0GA1UdDgQWBBRXd2raOpQViBgFHsR9seM1fN9CdTAOBgNV
4/srnyf6sh9c8Zk04xEOpK1ypvBz+Ks4uZObtjyQjtQ8mbDOsiLLvh7wIDAQABad
1l1v5K/yIqt1b17mtnIw5EXGpnwe2INxeUVvOz2eQAff1UdmyKh605LUKAFd9SZk
DnRiFU4QD0yenFkSlpnjU3Xy7UzGg2Nv5j/d8RsPGrg+pJDVGwFSriEg1TQQX4ZX
MhcxkOZFsw+EjKjx8j9x6gDZ3q+e5GvTPNO/jUX9gfO8Bz8SnhKyDiqHtvZhkBlG
yQjtQ8mbDOsiLLvh7wIDAQAB/5ml3plqk252APWd9hsW1IbLCrc4yttA6usDYJ1d
zohmAMID02C7cYoiR1e2dK+wjHsuBGptjGmOkL44ZjjY1FCljomvzYalCFeNeHo=
-----END CERTIFICATE-----
</code></pre>
<h2>Map Setting in TalentLMS</h2>
Flipping over to that other tab (you didn't close it, right? Because there's a lot more of this back-and-forth to do) - now we can fill out most of these values:
<img src="/images/sso-step4-talentlms-saml.png" alt="TalentLMS - SAML - Settings">
<ol>
<li>The <code>Identity provider</code> in TalentLMS matches the <code>Issuer</code> in Auth0.</li>
<li>Click the "or paste your SAML certificate" link and drop in the big block of random looking characters from the PEM file.</li>
<li><code>Remote sign-in URL</code> comes from Auth0's <code>Identity Provider Login URL</code>.</li>
<li><code>Remote Sign-out URL</code> is the <code>Identity Provider Login URL</code> with "/logout" appended.</li>
<li><code>TargetedID</code>, <code>First name</code>, <code>Last name</code>, and <code>Email</code> get the schema values from the <code>mappings</code> section of the Auth0 JSON.</li>
</ol>
Now that everything has been pasted into their respective fields, go ahead and click the <code>Save and check your configuration</code> button. You should be prompted to Log In or Sign Up. Proceed with signing up, which should then kick you back to the TalentLMS "Check your SSO configuration" page.
<img src="/images/sso-step5-login-signup.png" alt="TalentLMS Check your SSO configuration">
<h2>Create Auth0 Rule To Define SAML Mapping</h2>
There are two pieces still missing: sending the <code>given_name</code> and <code>family_name</code> fields from Auth0, and capturing those fields during the Sign Up process.
Auth0 stores any additional data that is captured into <code>user_metadata</code>, which can be viewed in <code>Users &#x26; Roles -> Users</code>, select a user, then scroll down to the <code>Metadata</code> section. The next step is in our process to add these SAML configuration mappings to pull data from the <code>user_metadata</code>. To do this, we are going to add a new Auth0 rule. Click on <code>Rules</code>, <code>+ Create Rule</code>, select <code>&#x3C;/> Empty rule</code>. Give it a name like "TalentLMS SAML Mappings" and <a href="https://gist.github.com/drovani/41b6f9c5acb186e8ca5ef4b4c7321c54#file-auth0-rule-talentlms-samlmapping-js">paste the following</a> into the Script section:
<pre><code>function (user, context, callback) {

 if (context.clientID === '{{auth0-application-client-id}}') {

 const RULE_NAME = 'talentlms-samlmappings';
 const CLIENTNAME = context.clientName;
 console.log(`${RULE_NAME} started by ${CLIENTNAME}`);

 if (!user.user_metadata.given_name || _.isEmpty(user.user_metadata.given_name) ||
 !user.user_metadata.family_name || _.isEmpty(user.user_metadata.family_name))
 {
 console.log(`${RULE_NAME} Insuffient user_metadata for TalentLMS - given_name: ${user.user_metadata.given_name} family_name: ${user.user_metadata.family_name}`);
 callback(null, user, context);
 }

 var auth0Identity = _.find(user.identities, function(u) { return u.provider === 'auth0'; });
 var alphanumericUserId = auth0Identity.provider + auth0Identity.user_id;

 user.app_metadata = user.app_metadata || {};
 user.app_metadata.alphanumeric_auth0_user_id = alphanumericUserId;

 context.samlConfiguration.mappings = {
 "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier": "app_metadata.alphanumeric_auth0_user_id",
 "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress": "email",
 "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/given_name": "user_metadata.given_name",
 "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/family_name": "user_metadata.family_name"
 };

 }

 callback(null, user, context);
}
</code></pre>
<ul>
<li>Line 3: substitute {{auth0-application-client-id}} with the <code>Client ID</code> value for this Auth0 application. This ensures the rule only runs for the Auth0 application configured for TalentLMS login.</li>
<li>Line 5-7: simple logging to validate the rule runs when it is supposed to</li>
<li>Line 9-14: validate that the first and last names have been captured already, otherwise abort. A subsequent rule can be made to enable <a href="/posts/2019/auth0-progressive-profiling-proof-of-concept/">Progressive Profiling</a></li>
<li>Line 16-20: strip out the pipe in the Auth0 id, assign it to the cached <code>user</code> object</li>
<li>Line 22-27: map the fields from the rule's scope of variables to the SAML schema.</li>
</ul>
Click <code>Save Changes</code>. You can even click <code>Try This Rule</code>.
<ol>
<li>Replace the <code>User</code> part of the test input:</li>
</ol>
<pre><code>{
 "name": "jdoe@foobar.com",
 "email": "jdoe@foobar.com",
 "user_id": "auth0|0123456789",
 "nickname": "jdoe",
 "picture": "http://foobar.com/pictures/jdoe.png",
 "identities": [
 {
 "provider": "auth0",
 "user_id": "0123456789",
 "connection": "Username-Password-Connection",
 "isSocial": false
 }
 ],
 "user_metadata": {
 "given_name": "John",
 "family_name": "Doe"
 }
}
</code></pre>
<ol>
<li>Replace the <code>clientID</code> portion of the <code>Context</code> script with the same value used in the rule.</li>
</ol>
After clicking the <code>Try</code> button, the "Output" should indicate that the rules context has a <code>samlConfiguration</code> object containing a <code>mappings</code> object that matches when you entered above.
<h2>Capturing First &#x26; Last Name</h2>
The final step is to customize the Sign Up page to require the user to enter values for First and Last name. The simplest way (that I found) to do this is to customize the login page in Auth0. Under <code>Universal Login</code>, click on the <code>Login</code> tab, toggle the "Customer Login Page" and select the "Lock" Default Template. This uses the <a href="https://auth0.com/docs/libraries/lock/">Auth0Lock</a> and for our purposes, we will be utilizing the <code>additionalSignUpFields</code> array <a href="https://auth0.com/docs/libraries/lock/v11/configuration#additionalsignupfields-array-">configuration option</a>. Add the following JSON snippet to the code block:
<pre><code>additionalSignUpFields:[{
 name: "given_name",
 placeholder: "Enter your First Name"
},
{
 name:"family_name",
 placeholder:"Enter your Last Name"
}],
</code></pre>
And it should look something like this:
<img src="/images/sso-step7-customize-login-page.png" alt="Auth0 - Customize Sign Up Fields">
Click <code>Save Changes</code> and that should be it!
Flip back to the TalentLMS <code>Check your SSO configuration</code> page, click the <code>Log out</code> button (to clear your Auth0 session), and click the <code>Log in</code> button. Once you do so, you should now have four green checkmarks!
<img src="/images/sso-step6-successfully-logged-in.png" alt="TalentLMS - Successfully logged in.">
If you get an error here, it is probably because the profile you are using did not have a <code>given_name</code> and <code>family_name</code> in the user's meta data. Within Auth0, go to <code>Users &#x26; Roles -> Users</code>, edit the user you are logging in with, scroll down to the <code>user_metadata</code> window and add the following:
<pre><code>{
 "given_name": "TestGivenName",
 "family_name": "TestFamilyName"
}
</code></pre>
Save changes, go back to TalentLMS, and attempt to log in again.
<h2>How to Break TalentLMS</h2>
The major problem I found with this solution is that it is extremely fragile. There are several ways to completely break logging in.
<h3>TalentLMS "Username" must match Auth0 "Name"</h3>
When setting us TalentLMS for SAML, the field that gets mapped to "TargetedID" becomes the user's "Username". By default, this is editable by the user in TalentLMS. If the user changes that value in TalentLMS, then the next time Auth0 sends over the authenticated user information, the values won't match. TalentLMS will then try to create another user, but will fail because the email address is already on an existing account.
Thankfully, the steps are straightforward in how to disable the ability for a user to change their username in TalentLMS:
<ol>
<li>From the administrator panel, click on "User types"</li>
<li>Click the edit icon next to the Learner-Type</li>
<li>Expand the General -> Profile tree</li>
<li>Disable "Update" and "Reset password" settings</li>
<li>Click the Save button</li>
<li>Repeat these steps for Trainer-Type and Admin-Type (you cannot remove the ability from the SuperAdmin user type)</li>
</ol>
<img src="/images/sso-step8-talentlms-disable-profile-update.png" alt="TalentLMS - Disable Profile Editing">
<h3>Don't Switch "SSO login screen" Until Everything Works</h3>
At the bottom of the Users settings page in TalentLMS is an innocent looking drop down list with the label of "SSO login screen" with two options: "Login page + IdP login link" and "IdP login page". Since I was just testing things out, I flipped the option to the second of the two, clicked "Save" and promptly locked myself (and everyone else) out of the TalentLMS instance. It required submitting a support ticket to have them revert the setting - quite an embarrassing moment, since I had to go back to the client and have them verify to customer support that this change needed to be made. TalentLMS should really have a modal pop up that says:
<blockquote>
Are you sure? Because if SSO login isn't perfectly working, you're going to screw things up. Also, if you haven't already made a SSO user a "SuperAdmin" you should do that, or you won't be able to get back into the administrative dashboard to fix any SSO settings.
Save Changes? or Revert?
</blockquote>
After you have everything working with SSO, and have an SSO user as a SuperAdmin, then you can change the login to be "IdP login page". This will force users directly to Auth0 to authenticate, removing the step of clicking the "Log in with SAML 2.0" link.
<h3>TalentLMS Does Not Permanently Delete Users</h3>
In my testing, I would frequently delete a user from both TalentLMS and Auth0 so that I could restart the entire sign up / log in workflow from the beginning. However, I quickly ran into an issue where TalentLMS would claim that an email address was already taken - even though I knew I had deleted the user.
It turns out that TalentLMS only soft-deletes users (even if an Admin clicks the Delete button). If you want to <a href="https://help.talentlms.com/hc/en-us/articles/360014658253-How-to-delete-users-and-courses-permanently">permanently delete users</a> you need to go through the convoluted process to permanently delete them. Thankfully, the Knowledge Base article was easy to find.
<h2>Is There a Better Way?</h2>
TalentLMS and Auth0 also support OpenID Connect as an SSO option, so that would also be an option. I don't have a good reason why I went with SAML over OpenID. Maybe someone else can share their experience and we'll see what the advantages for each might be.

Rovani's Sandbox

auth0

Auth0 Progressive Profiling Proof-of-Concept

Authenticate Shopify Customers with Auth0

Using SAML 2.0 with Auth0 to Authenticate Users in TalentLMS