--- title: "Integrating ID4me with Auth0" description: "Learn how to add an ID4me-compliant identity provider option to an application using Auth0" authors: - name: "Mathias Conradt" url: "https://auth0.com/blog/authors/mathias-conradt/" date: "Oct 15, 2019" category: "Identity & Security,Identity,ID4me" tags: ["id4me", "security", "identity", "identity-management", "authentication", "auth0"] url: "https://auth0.com/blog/integrating-id4me-with-auth0/" --- # Integrating ID4me with Auth0 ## Purpose The purpose of this sample project is to demonstrate how you can use [Auth0](https://auth0.com/) to add an **ID4me-compliant** identity provider as an option to your end-users to sign up and log in to your web application. ## About ID4me [ID4me](https://id4me.org) is an **open, global, federated standard** to manage online identities. It allows the user to establish their identity using **their own domain name** and then use that identity to log in and sign up at websites that support ID4me. ID4me provides full data sharing control. ID4me users are not only free to choose their identity provider, they can **change their provider at any time**. This is also what differentiates ID4me from other commonly known social identity providers in the field. The user can also use single-sign-on across different services with just one ID, which means they don't have to remember multiple passwords for different websites. The initiative’s mission is to provide users with open and internationally available identity services that adhere to **security and data protection standards**, that foster** user choice**, and that **avoid identity lock-ins**. ID4me is an open group of internet service providers, software developers, and other entities that care about the future of the internet and want to defend its distributed and federated architecture when it comes to digital identities. ## About Auth0 [Auth0](https://auth0.com) is an Identity as a Platform (IDaaS) service provider. With Auth0, you take perhaps the riskiest endeavor your engineering organization will face, managing and securing the identities of your customers and employees, and abstract away this complexity and risk with our identity platform. Our standards-based **Identity-as-a-Service** platform is built for developers, by developers so that your engineering organization can focus on building the solutions that delight your customers and drive your revenue. Our customers find that what typically either takes months to deliver or simply cannot be delivered via internal or external solutions, takes them only days to deliver with Auth0 due to our extensive SDKs, intuitive API, extensible architecture, and our simple management dashboard. This is why Auth0 is the leader in developer-focused identity management, with more than 7,000 customers trusting us with billions of transactions everyday. ## Prerequisites If you don't already have an Auth0 account, sign up for a free Auth0 account here. We assume that you have an existing ID4me identity and have already chosen an identity authority (identity provider) and identity agent (claims/user information provider). If not, go to the [Identity Agent website](https://identityagent.de/register) and create one for free. This example demonstrates the use of `id.test.denic.de` ([DENIC-ID](https://www.denic.de/en/service/denic-id/) test environment) as the user identity authority and `identityagent.de` as the identity agent, according to the ID4me specification. ## Terminology Before we proceed, let's clarify some terminology up front. **Relying party** An online service that uses ID4me to validate user logins. *In our example*: a Node.js web application, but brokered via Auth0. (So, technically, Auth0 is the Relying Party). **Identity authority** An online entity ensuring the correct authorization of the user at every login, by storing and verifying their authentication credentials, such as their password. It represents the “back-end” and trust source for the provision of the authorization service, but it generally does not deal directly with the user and does not store or supply the user’s personal information. *In our example*: `id.test.denic.de` **Identity agent** An online entity providing the ID4me service to users. It represents the “front-end” for the provision of the authorization service, selling or supplying ID4me identifiers to users and creating them at an identity authority. It also stores the user’s personal information, communicating it to the relying parties when the user consents, and can potentially provide the user with reports and statistics on the service. *In our example*: `identityagent.de` A typical ID4me authentication flow, and the parties involved, looks like this: ![ID4me authentication flow](https://images.ctfassets.net/23aumh6u8s0i/7AwYCBasmS2ZnZCwJUJKUT/47fad22d847d9dc30da9631dbd30296b/Screen_Shot_2019-09-23_at_11) ## Configuration The flow of this authentication process is a bit different than with other custom social connection providers added to Auth0, which is grounded in the federative concept of ID4me. Because of this, our integration with Auth0 will also be a little different. We assume that the reader is generally familiar with the concept of ID4me. If you need to brush up, you can find more details [on the ID4me website](https://id4me.org/login-partner-developer-zone). ID4me makes use of the [*Distributed Claims* mechanism](https://openid.net/specs/openid-connect-core-1_0.html#AggregatedDistributedClaims). The following diagram outlines the flow of the overall authentication process when integrated with Auth0: ![Auth0 id4me authentication flow](https://images.ctfassets.net/23aumh6u8s0i/K1yKqChVMFOvzOqmlUsIB/8be37ffb4960d49398f99c39cb0d9632/auth0-id4me-flow) ### 1. Create Application Register an Auth0 client application by creating a new application within Auth0. Go to the `Applications` section in the Auth0 dashboard and click the `+ Create Application` button. ![Create Auth0 application](https://images.ctfassets.net/23aumh6u8s0i/39UxGEeZaezod3amV5dyrx/3b14c4891847bc62e7d5f5a645719b16/applications-create) Give the application any name you'd like (such as `Auth0 ID4me Demo`) and choose `Regular Web Application` as the type. ![Auth0 application type](https://images.ctfassets.net/23aumh6u8s0i/3EINXBPwEwGlASnU68dcZV/78baf14f54307d7bf6ed8886153f3c68/Screen_Shot_2019-09-09_at_3) Next, choose `Node.js` as the technology. ![Auth0 application technology](https://images.ctfassets.net/23aumh6u8s0i/6kFW6FMyKEqVPvHp7KOsHB/408e555b48092202cdf819cd28c9ebb3/Screen_Shot_2019-09-17_at_2) ### 2. Client Application Settings Click the `Settings` tab of the client application. In the application settings: * Make sure `Application Type` is set to `Regular Web Application`. * Set `Allowed Callback URLs` to `http://localhost:3000/callback` * Set `Allowed Logout URLs` to `http://localhost:3000` ![Auth0 application settings](https://images.ctfassets.net/23aumh6u8s0i/3XfJdSQmO0MqWPZmGBKlsC/9a5c36474a130c429232777862872458/Screen_Shot_2019-09-09_at_3) The Application Logo can be adjusted to your liking. It's not a mandatory field. Take note of `client_id` and `client_secret`, you will need these later in the actual Node.js application. ### 3. Client Application Connections Click the `Connections` tab of the client application. Make sure that no connection is enabled here, as we'll purely rely on ID4me for this example. The `Username-Password-Authentication` connection might already be enabled, so make sure you disable it. ![Auth0 connections](https://images.ctfassets.net/23aumh6u8s0i/7BKCU2Dihn99fptcr6nWU5/1bc235c12b883ae8f3806bbbe4aa4fa5/Screen_Shot_2019-09-17_at_2) ### 4. Client Application Done When you go back to the Applications section, the application should now be listed in the `Applications` overview: ![Auth0 applications overview](https://images.ctfassets.net/23aumh6u8s0i/66JdL8oaMMbow1GnxN9tlK/44876af1aa717467cf32649aa69c2368/Screen_Shot_2019-09-09_at_3) ### 5. Auth0 Management API Configuration We need to grant our Node.js client application access to the Auth0 Management API. For this, go to the `API` section of the `Dashboard`, select the `Auth0 Management API`, and select the `Machine to Machine Applications` tab in there. Enable the `Authorized` switch for the `Auth0 ID4me Demo` application (so that it's green) and click the arrow on the right, which toggles the **Scopes** view. Select the scopes `read:connections`, `update:connections`, `delete:connections`, and `create:connections` from the scope list. Then hit the `Update` button at the bottom. ![Auth0 scopes](https://images.ctfassets.net/23aumh6u8s0i/1m7gdGEfOcrj1zEaUHz9Vt/1ffcd72280f235bc28d28a89e4887051/Screen_Shot_2019-09-17_at_10) ### 6. Cloning the Node.js Client Application from Github Clone the GitHub repository for the sample Node.js client application: ```bash git clone https://github.com/auth0-blog/auth0-id4me-sample.git ``` On your computer, switch to the folder where you checked out the project. ```bash cd auth0-id4me-sample-draft ``` Copy the `.env.sample` file to `.env`: ```bash cp .env.sample .env ``` Open the `.env` file in a text editor and adjust the values in it: * `AUTH0_DOMAIN`: your Auth0 tenant domain (without `https://`) * `AUTH0_CLIENT_ID`: the `client_id` from step 2 above * `AUTH0_CLIENT_SECRET`: the `client_secret` from step 2 above When finished, build and run the app: ```bash npm install npm start ``` Now open the browser and go to [`http://localhost:3000`](http://localhost:3000). The client application is now up and running and you can test it with your **ID4me user**. ## ID4me Authentication The user enters their `user id` in the client application, then presses the `Login with ID4me` button. ![ID4me login](https://images.ctfassets.net/23aumh6u8s0i/39z2raKukyj7zpmss7fuTW/7150a66bf86e3764ac8457ab1b847f54/Screen_Shot_2019-09-18_at_4) The client application will redirect the user to Auth0, who in turn transparently federates the request further to the user's chosen ID Authority, in our example, Denic ID. Here, the user ID will also be filled in so that the user is only asked to provide the password. ![ID4me login screen](https://images.ctfassets.net/23aumh6u8s0i/1KaKsR6xS9pz6y9be4dfcv/d397eef9434ebcbe48e83956a471614b/Screen_Shot_2019-09-09_at_2) If it's the first time that the user uses the app and authenticates with ID4me, they will be asked what information they consent to share (between the ID4me authority and Auth0). ![ID4me consent](https://images.ctfassets.net/23aumh6u8s0i/4la8l7b9DbXyAooFrQaBJT/f1827e488d6dbed177e2cbf729cbdca6/Screen_Shot_2019-09-17_at_6) Next, consent is also given to the Auth0 client application (consent to share between Auth0 an the Node.js client application). ![ID4me Auth0 consent](https://images.ctfassets.net/23aumh6u8s0i/4hHfKHKlWEUyrsdgvP8us9/09bc56486a0decf8557201792998717f/Screen_Shot_2019-09-17_at_6) The browser redirects to the application, having received an ID token and information about the user: ![ID4me demo](https://images.ctfassets.net/23aumh6u8s0i/khJYUSUJKJZc5YLC70YbU/1d493b0734904fe9e0eddc96983cd7ca/Screen_Shot_2019-09-18_at_4) ## Auth0 Backend ### Auth0 Dashboard: Users Let's look at the user list and into this specific user's detail after he authenticated: ![Auth0 user](https://images.ctfassets.net/23aumh6u8s0i/2UBg8JeAiFmU5HT6pNTQWk/78a98bba02bff0968623659c1e46c8c2/Screen_Shot_2019-09-17_at_2) The user's primary identity provider is shown as `oauth2`. ![Auth0 ID4me user](https://images.ctfassets.net/23aumh6u8s0i/7Bmo6SUCGbZ0HUhni7AIyn/a500f07b12b0f361942c757513e9f81f/Screen_Shot_2019-09-17_at_2) And the raw JSON of this user contains the ID4me identifier: ![ID4me identifier](https://images.ctfassets.net/23aumh6u8s0i/54fUG2ArZhgQFGe0GJL6H3/99e5188597fe4c1dc44a07fbfd8eef86/Screen_Shot_2019-09-17_at_2) ## ID4me Provider Backend The following image shows the screenshots of both the User **Identity Authority** and **Identity Agent** (or User Information Provider). The `General > Data` section at the User Information Provider (`identityagent.de` in our example): ![User identity provider](https://images.ctfassets.net/23aumh6u8s0i/5jh8GcauNjkCnavldSaqee/cd4d669896dfeb6e256bf436c41c2736/Screen_Shot_2019-08-29_at_3) When the user clicks on the link `Identity authority dashboard`, they will get to the dashboard of `DENIC-ID`. ![identity authority dashboard](https://images.ctfassets.net/23aumh6u8s0i/79EdKJg7GlRb0M8j0PqgBs/018d9edf1c57a6104939cfc072cbc2e5/Screen_Shot_2019-08-29_at_3) Once in the dashboard, you have various settings options to choose from, such as: * Data Sharing * Two-factor Authentication * Password settings * Account Status ![ID4me data sharing](https://images.ctfassets.net/23aumh6u8s0i/6XHwtozea2PKWp4lEZBcy6/e32ba380928177369080ec7010393bd3/Screen_Shot_2019-08-29_at_3) ![ID4me two factor auth](https://images.ctfassets.net/23aumh6u8s0i/2ROPaicMbXXNdNd2aYbk7G/698ca9aa00eb8e8adcc16ae3eccc90c5/Screen_Shot_2019-08-29_at_3) ![ID4me password settings](https://images.ctfassets.net/23aumh6u8s0i/42FXFoVsZYb1UsoP36jggb/5baff014fee2b3f24b6fcc40df531592/Screen_Shot_2019-08-29_at_3) ![ID4me account status](https://images.ctfassets.net/23aumh6u8s0i/2e5BV73fl6n0jHg2TErpry/43a8b96cae575e335912cd72f55682ef/Screen_Shot_2019-08-29_at_3)