This blog is the latest in the “The Power of Descope Flows” series, which covers how our drag-and-drop CIAM platform can be used to add, modify, and update authentication on any app or website. In this blog, we cover how Descope Flows can be used to support a Product-Led Growth strategy.
Check out our other "Power of Flows" blogs on user onboarding, enforcing SSO on enabled domains, streamlining in-person event registrations, replacing passwords with passkeys, securely merging OAuth identities, simplifying password-based authentication, and turning anonymous users into happy customers.
Remember the last time you forgot your password? You likely fumbled with a friction-filled reset process that, while only taking a few minutes, would quickly drive away less patient users. Enter passkeys: a frictionless, passwordless way to sign up or sign in to apps using a fingerprint, PIN, or a quick selfie.
Passkeys have been gaining popularity thanks to their adoption by tech giants like Google, Amazon, and PayPal. There’s also the perk of widespread compatibility; virtually all modern browsers have begun integrating passkeys, meaning most devices support them.
Passkeys offer numerous benefits, including:
Greater ease of use
Elimination of complex passwords and usernames
Phishing resistance
Robust security
Despite their advantages, not every organization wants to replace its existing authentication provider simply to add passkeys. Descope can supplement your auth framework with passkeys without changing its user store or primary authentication provider—all that’s required is some quick configuration.
Implementing passkeys across devices
With Descope, setting up passkeys can be as simple as flipping a switch. However, you might encounter a scenario where a user signs up with passkeys on their laptop and then later tries logging in with a smartphone. Unlike simply setting up passkeys, supporting them for the same user across multiple devices requires additional configuration.
In this blog, we’ll show you how to add cross-device passkey authentication with Descope. We’ll start by enabling passkeys for your app in Descope Flows, and then we’ll demonstrate how to extend support across multiple devices, such as when a user moves from a laptop to an iPhone. By the end, you’ll know how to provide passkey support for your users on all their compatible devices.
How to add passkeys
With Descope, adding passkeys to your application is fast and painless. This article provides a step-by-step guide to this process.
There are a few considerations to keep in mind while setting up:
Log in to or sign up for a free forever Descope account.
Use whichever Descope SDK you’re most comfortable with. We’ll use the React SDK for this example.
Add a project ID in the AuthProvider component.
Change flow ID in the Descope component to passkeys-cross-device.
This flow is available as a part of Flow Template for Passkeys under Flows.
We’ll use Google Chrome for this example, but any passkey-compatible browser will work.
Once the app has been set up, it's time to test it out on both a laptop and a phone.
Running the app
Log in to your Descope account, click on Flows, and import the passkeys-cross-device JSON into your project. We’ve designed the flow to verify the user’s email when using passkey authentication.
Once you have set up the sample app on your local desktop, run it on localhost:5173
Let’s start by testing passkeys on a laptop with a biometric fingerprint scanner, or one that works with Face ID or Windows Hello. Once the app is running on your localhost, click the Sign In with Passkeys button.
You will see a browser prompt to sign in with a passkey. Since we haven’t yet set that up, click cancel and enter your email.
Next, fill in your first and last name. This step is a component of progressive profiling, which you can learn more about in our related learning center article.
The browser will prompt you to create (or save) the passkey. We’ll create the passkey for the Google Chrome profile associated with this user.
After you create the passkey under the Chrome profile, enter the verification OTP you receive in your email inbox and click Submit.
You have successfully set up a passkey and signed in to the application.
Sign out and check the sign-in flow with passkeys. Now, you can sign back in without a password! Select Sign in with Passkeys and use your device's biometrics scanner to access the locally stored passkeys.
Limitations of single-device passkey support
This implementation works fine for our singular laptop. However, when users move to a smartphone, they’ll hit a roadblock because they’re not using the original device where they enabled passkeys. Users logging in from this new device would reinitiate the entire passkey setup—only to receive an error stating the user already exists.
To solve this limitation, we’ll make passkeys work across different devices under a single user identity. Typically, this would require working with the WebAuthn protocol and making numerous manual coding changes to your app. But instead laboring through those frustrating steps, Descope Flows lets us easily configure cross-device without touching the codebase.
Let’s take a look at the flow above for this implementation. This portion of the flow resolves the cross-device issue in which Descope checks if the user already exists. If the answer is “yes,” we’ll verify the user by sending an OTP to their email (in this case), and we’ll additionally set up or update passkeys for this user on the current device.
Testing out cross-device passkeys
Testing this app on your phone requires you to deploy it on Vercel, Heroku, or a similar deployment platform. Follow the steps to sign in to the app with passkeys; you will notice that there isn’t a passkey already available for your user. On the passkey prompt, click Cancel, and the flow will now ask you for your email address.
Enter your existing email address with Descope, and it will send you a verification OTP. This is required since you are logging in for the first time using this device. Once that’s completed, you will set up your passkey on your phone, where it will ask you if you want to use your Face ID to sign in and successfully log you into your app.
At this stage, you can log out and try to verify the sign-in process again. It should easily log you in with your passkey now set up on your phone. You have now successfully used your phone to log into your app using Descope Passkey authentication.
You might encounter the inverse of this scenario, in which the passkey is on the user’s phone instead of their laptop. Your users will simply click On other devices when shown the Choose a Passkey prompt.
This will be followed by a Use a passkey from another device? dialog box, which will present them with a QR code to scan using their phone.
On the user’s phone, they will be able to choose the passkey related to the user trying to log in. After using Face ID or PIN, they will be logged into the app on their laptop.
Summary
By now, you have achieved the following scenarios for dealing with passkeys:
Implementing passkeys on a laptop and testing the passwordless flow.
Authenticating existing users by creating and using passkeys on a smartphone.
Signing in to an application on a laptop with passkeys present on a phone.
With Descope Flows, you have successfully implemented passkey authentication in your application, ensuring a secure and user-friendly login experience across multiple devices.
Conclusion
Passkeys make life simple for end users by offering seamless, passwordless authentication in their favorite apps. However, one of passkeys’ few shortcomings is accessing an app from different devices. This blog explored adding passkeys with Descope and addressed the challenge of passkey implementation when using multiple devices.
As we’ve demonstrated, Descope Flows allow you to add passkeys with ease and while tackling cross-device support using a simple and customizable configuration. Flows also enable you to completely tailor your user authentication journey without touching your backend session validation, APIs, and user identity store. In addition to being a “rip and replace” solution, Descope can also supplement your existing authentication infrastructure as a SAML / OIDC provider.
Want to learn how to incorporate Descope’s passkeys with a specific auth provider? Check out our in-depth guides on adding passkeys to Auth0 and Cognito. Have questions about our platform? Book a demo with our team.
