Auth0 OIDC Integration Setup Guide

In this guide, we will cover how to set up Descope as a federated Identity Provider (IdP) to implement authentication for applications that currently use Auth0.

With Descope acting as an OpenID Connect Identity Provider (IdP), you replace Auth0 username and password authentication with Descope authentication, while retaining Auth0 as the primary user management solution.

The flow diagram below shows this process:

Descope OIDC guide diagram of Auth0 as auth provider

Configuring Descope as an OIDC provider with Auth0 is super simple! All you will need is:

Once you have the above, simply follow along with this guide to learn how to add Descope Flows to your application.

Setting up your Hosted Auth Page

Note

If you want to use Passkeys, you can download the oidc-flow JSON from our sample app repository, which you can import into your own project.

It is important to use this Flow, as it is designed to make sure the user and their email is always verified when using passkeys as an authentication method for security reasons.

Descope OIDC with Auth0 as auth provider flow configuration 1

Your flows are automatically hosted with our Descope Auth Hosting Application. To learn more about our hosted app, you can read about it in our Docs page here.

If you're using the oidc-flow.json provided above, edit the query parameter at the end of the Flow Hosting URL like so: https://auth.descope.io/<Project ID>?flow=oidc-flow

Descope OIDC with Auth0 as auth provider flow configuration 2

Note

You should keep this page open, as you're going to need this information for the next part of this blog.

If you would like to edit the UI of the passkey login screen, you can do that in the Flow Editor. Once your flow is complete and your login redirect has been configured, you'll need to connect your flow to Auth0 by setting Descope up as an enterprise OIDC connection.

Descope as an Enterprise Connection

In order to set up Descope as an Enterprise connection with Auth0, you will need to add an Enterprise OpenID connection. You can do this under the Authentication -> Enterprise section of your Auth0 admin dashboard.

When you create a new OpenID connection, you will be prompted to fill in the following information:

  • Connection Name: Call it Descope
  • Issuer URL: This is the Issuer URL which is found under your SSO Configuration settings
  • Client ID: Your Descope Project ID, which can be found under Project Settings in the Descope Console
  • Client Secret: Access key generated under Access Keys in the Descope Console

Once you've gathered all of this information, put it in the configuration panel as shown below:

Descope OIDC with Auth0 as auth provider Auth0 configuration 1

The selection toggle at the bottom - Sync user profile attributes at each login - will need to be toggled on if you would like to use Descope as an alternative login method to your traditional Auth0 authentication methods. Otherwise, every time a new user logs in with Descope, an additional user will be created in the Auth0 User Portal, without all of the same permissions and roles that were previously defined for that user.

Descope OIDC with Auth0 as auth provider Auth0 configuration 2

When using this feature, the user will then be prompted to verify their Auth0 account with their normal username and password before the user account details can be merged. That way, a malicious user cannot login with Descope for someone else and gain access to their account.

Lastly, you'll need to make sure that the scopes for the OIDC connection are correct and that you have a way to initiate the OIDC flow and redirect back the hosted Descope Flow.

To do this, click on the new connection you've just made, and make sure that the four scopes are defined in your connection configuration:

Descope OIDC with Auth0 as auth provider Auth0 configuration 3

Descope OIDC with Auth0 as auth provider Auth0 configuration 4

If you're using a custom login page you've built with Auth0, you will need to add a button or some other way to navigate to where you've embedded the Descope Flow. However, it's likely that you are using the Universal Login Experience that comes with Auth0 -if that's the case, you can navigate to the Login Experience tab and select Display connection as a button.

Descope OIDC with Auth0 as auth provider Auth0 configuration 5

This will allow you to redirect back to your Descope Flow and use Descope to perform the authentication rather than Auth0. Your main login screen will now look something like this:

Descope OIDC with Auth0 testing the completed flow

Once the user clicks on Continue with Descope Passkeys, and logs in with their biometrics, the app will act as though they've logged in with Auth0.

Sample App

If you're interested in seeing how this is implemented in a sample React application, feel free to check out our sample app on GitHub.

If you have any other questions about Descope or our flows, feel free to reach out to us!

Was this helpful?

On this page