Table of Contents
Passkeys are dominating the identity headlines, and with good reason. Over the past few months, Google has announced passkey support for Chrome, Android, personal email accounts and even Workspace accounts. Alongside support from Apple and Microsoft, these moves will do wonders for user adoption in the near-term future. But what if you’re an app that isn’t Google, Apple, or Microsoft and want to add passkeys to your login experience?
We have covered how easy it is to add passkeys to your app if you use Descope as your authentication provider. Now you can start your passkey journey with Descope even if you use another authentication service that doesn’t natively support passkeys.
In this blog, we will cover how to set up Descope as a federated Identity Provider (IdP) to implement passkey authentication for applications that currently use Auth0.
Say hello to passkeys
Passkeys are a new way for users to access applications without needing a password. Users interact with passkeys the same way they unlock their device – through a fingerprint, face scan, or PIN. Using device-based biometrics results in a much smoother user experience while also adding an extra layer of security.
Most importantly, passkeys do away with all the challenges related to password-based authentication. Since there are no credentials to steal, attackers can’t perform brute force or credential stuffing attacks. Since there are no credentials for users to create, they don’t have to worry about managing, forgetting, and resetting passwords.
Check out this demo site to see passkey authentication in action.
How the Auth0 integration works
With Descope acting as an OpenID Connect Service Provider (SP), you replace Auth0 username and password authentication with Descope Passkey authentication, while retaining Auth0 as your identity provider (IdP) and primary user management solution.
Here are a few concepts that you will need to understand:
OpenID Connect is a simple identity layer on top of the OAuth 2.0 standard, which allows clients to verify the identity of the end-user and obtain basic profile information in an interoperable and REST-like manner.
An IdP is a system entity that creates, maintains, and manages identity information for principals and provides principal authentication to other service providers within a federation.
The flow diagram below shows this process:
By acting as a federated IdP, Descope is able to offer its passkey authentication system to applications using Auth0. This allows applications using Auth0 to leverage Descope's passkey authentication without any major overhaul of their existing system. Auth0 simply needs to be configured to accept Descope as a custom social connection, with Descope acting as the IdP.
It's a win-win for developers and users alike. Developers can easily improve their application's authentication process, and users can enjoy a more secure and friendly experience.
Configuring Descope as an OIDC provider with Auth0 is super simple! All you will need is:
A Descope account (you can sign up for a “Free Forever” account)
Access to an Auth0 account that allows for Enterprise External Connections.
Once you have the above, simply follow along with this guide to learn how to add passkeys to your application with Descope.
Setting up your Descope Flow
As a reminder, Descope Flows are drag-and-drop workflows that help developers build authentication with a few lines of code. With OIDC, you will want to make sure that your Flow is designed with security in mind to properly handle passkey authentication.
In our sample app repository, you can download the oidc-flow JSON 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.
You will also need to embed the Flow component using either React or a HTML Web Component in your application, and specify in the Descope Console where it is hosted. This is important because Auth0 will need to know where you redirect you to once you select Login with Passkeys on your main application login page.
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
Client Secret: API key generated under Access Keys in the Descope Console
The following screenshots showcase where to find all of the items listed above:
Once you’ve gathered all of this information, put it in the configuration panel as shown below:
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 passkeys as an alternative login method to your traditional Auth0 authentication methods. Otherwise, every time a new user logs in with passkeys, 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.
When using this feature, if someone wants to add passkeys to their account for the first time, 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 create passkeys 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 to wherever in your app the Descope Flow is hosted.
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:
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 component. 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.
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:
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.
With Descope and OpenID Connect, you can now easily bid adieu to the era of passwords and step into a future of secure, user-friendly passkey authentication. Not only that, you can completely customize your authentication flow without having to change any of your APIs, backend session validation, or user identity store.
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 are an Auth0 customer and want to explore adding passkeys to your authentication flow, sign up for our platform and keep this tutorial bookmarked!
