Skip to content

Commit

Permalink
Auth0: Custom Social Connection (#112)
Browse files Browse the repository at this point in the history
* Auth0: Custom Social Connection

* Auth0: Custom Social Connection
  • Loading branch information
nmoskaleva authored Mar 25, 2024
1 parent 0451f99 commit 69182dd
Showing 1 changed file with 69 additions and 8 deletions.
77 changes: 69 additions & 8 deletions src/pages/verify/integrations/auth0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)

Expand All @@ -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`.
Expand All @@ -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**.
Expand Down Expand Up @@ -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

Expand All @@ -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.

0 comments on commit 69182dd

Please sign in to comment.