Auth0: Custom Social Connection

src/pages/verify/integrations/auth0.mdx

@@ -5,10 +5,11 @@ sort: 3
 title: Auth0
 subtitle: This tutorial demonstrates how to integrate Criipto Verify with Auth0.
 ---
+
 import Layout from '../../../layouts/mdx';
 export default Layout;
 
-This tutorial demonstrates how to integrate Criipto Verify with Auth0. Following steps are required to complete your first login:
+This tutorial demonstrates how to integrate Criipto Verify with Auth0. The following steps are required to complete your first login:
 
 1. [Register your Auth0 tenant in Criipto Verify](#register-your-auth0-tenant-in-criipto-verify)
 2. [Configure your OAuth2 flow](#configure-the-oauth2-code-flow)
@@ -29,7 +30,7 @@ Specifically you need the following information to integrate with Auth0:
 - _Client ID_ to identify your Auth0 tenant to Criipto Verify. In the case below we chose `urn:criipto:samples:no1`
 - _Domain_ on which you will be communicating with Criipto Verify. Could be for example `samples.criipto.id`
 - _Client secret_ is needed if you choose the *Back Channel* approach - which we do recommend. 
-The secret is generated and copied as describe further down.
+The secret is generated and copied as described further down.
 
 ![Register App](./images/register-app.png)
 
@@ -41,6 +42,10 @@ import CodeFlowSnippet from '../../../snippets/oauth2-code-flow.mdx';
 
 ## Create Auth0 connections
 
+You can leverage either an [Enterprise Connection](#enterprise-connection), or a [Custom Social Connection](#custom-social-connection) to connect Criipto Verify with Auth0.
+
+### Enterprise Connection
+
 To integrate Criipto Verify with Auth0, you create an Auth0 OpenID Connect connection to communicate with Criipto Verify. Because Auth0 will not pass the `acr_values` to Criipto Verify, you will have to create a new connection for every eID option that you intend to use. (`acr_values` is a parameter in the `/authorize` request to Criipto Verify needed to specify which kind of eID is requested)
 
 For those cases, you can leverage our login-method specific metadata endpoints. Each of these contain an embedded and base64-encoded variant of the "raw" value normally supplied in the `acr_values`.
@@ -53,17 +58,18 @@ For example, the `acr_values` of Norwegian BankID login method is `urn:grn:authn
 
 - `https://yourdomain.criipto.id/dXJuOmdybjphdXRobjpubzpiYW5raWQ=/.well-known/openid-configuration`
 
-### Choose the specific login method
+#### Choose the specific login method
 
-Below is a list of supported login methods with corresponding base64 encoded `acr_values`. Choose the once you intend to use.
+Below is a list of supported login methods with the corresponding base64 encoded `acr_values`. Choose the ones you intend to use.
 
 import LoginMethodsSnippet from '../../../snippets/login-methods-and-path-encoded.mdx';
 
 <LoginMethodsSnippet />
 
 <hr />
 
-### Create the OIDC connection(s)
+#### Create the OIDC connection(s)
+
 You create an OIDC connection for every login method you intend to use.
 
 1. Go to Auth0 dashboard for your tenant and under **Authentication** choose **Enterprise**.
@@ -94,9 +100,64 @@ You create an OIDC connection for every login method you intend to use.
 
 </Highlight>
 
-### Test the connection
+#### Test the connection
+
+To test your OpenID Connect connection, go back to the list of all OpenID Connect connections and select **Try** button on the right side of the connection you want to test. You will need a [test user](#test-users) to perform testing.
 
-To test your OpenID Connect connection, go back to the list of all OpenID Connect connections and select **Try** button on the right side of the connection you want to test.
+### Custom Social Connection
+
+Alternatively, you can leverage a <a href="https://auth0.com/docs/authenticate/identity-providers/social-identity-providers/oauth2" target="_blank">Custom Social Connection</a> to integrate with Criipto Verify via OpenID Connect.
+
+#### Create the OIDC connection
+
+1. Go to Auth0 dashboard for your tenant and under **Authentication** choose **Social**.
+2. Select **Create Connection**, go to the bottom of the list, then choose **Create Custom**.
+3. Enter **Connection name**.
+4. Under **Authorization URL** enter the [authorize URL](https://docs.criipto.com/verify/guides/authorize-url-builder/) to which your users will be redirected to log in to your application, e.g. `https://yourdomain.criipto.id/oauth2/authorize?scope=openid&client_id=urn:criipto:samples:no1&redirect_uri=https://jwt.io&response_type=code`
+5. Under **Token URL**, enter your token endpoint: `https://yourdomain.criipto.id/oauth2/token`
+6. Under **Client ID** enter the **Client ID/Realm** from your Criipto Verify application.
+7. Under **Client Secret** enter the **Client Secret** generated by Criipto Verify when you enabled the [OAuth2 Code Flow](##configure–the-oauth2-code-flow).
+8. Add the required <a href="https://auth0.com/docs/authenticate/identity-providers/social-identity-providers/oauth2#fetch-user-profile-script" target="_blank">Fetch User Profile Script</a> using your `userInfo` endpoint, e.g.:
+
+```javascript
+function fetchUserProfile(accessToken, context, callback) {
+  request.get(
+    {
+      url: 'https://yourdomain.criipto.id/oauth2/userinfo',
+      headers: {
+        Authorization: 'Bearer ' + accessToken,
+      },
+    },
+    (err, resp, body) => {
+      if (err) {
+        return callback(err);
+      }
+      if (resp.statusCode !== 200) {
+        return callback(new Error(body));
+      }
+      let bodyParsed;
+      try {
+        bodyParsed = JSON.parse(body);
+      } catch (jsonError) {
+        return callback(new Error(body));
+      }
+      const profile = {
+        user_id: bodyParsed.uuid,
+        name: bodyParsed.name,
+      };
+      callback(null, profile);
+    }
+  );
+}
+```
+
+9. Create a connection by clicking **Create**.
+10. Make sure to enable the created connection for your Auth0 application.
+11. Lastly, add Auth0's callback URL (`https://{yourAuth0Domain}/login/callback`) to your Criipto Verify application. Go to your Criipto Dashboard, and enter the Auth0 Callback URL under **Callback URLs** in Criipto Verify application management.
+
+#### Test the connection
+
+Test your Custom Social Connection by clicking the **Try Connection** button located in the top right corner.
 
 ### Test users
 
@@ -106,4 +167,4 @@ import TestUsersSnippet from '../../../snippets/test-users.mdx';
 
 ## Integrate your application with Auth0
 
-How to integrate your application with Auth0 depends on the technology you are working with. Refer to the [Auth0 quickstart guide](https://auth0.com/docs/quickstarts/) for more details.
+How to integrate your application with Auth0 depends on the technology you are working with. Refer to the [Auth0 quickstart guide](https://auth0.com/docs/quickstarts/) for more details.