Welcome to the unlocking the future with passkeys lab!
We're thrilled to continue this journey with you as we dive deeper into enhancing Identiflix. For those just joining us, Identiflix is our educational Next.js web application designed to bridge the gap between identity experts and eager students. It allows instructors to generate identity-related courses and students to enroll and learn from them.
Before we start, make sure you've completed the Identiflix Setup lab. This foundational step is crucial for all subsequent labs.
In this lab, we’re tackling one of the most pressing issues raised by our users: the need for a passwordless login option. Passwords are not only cumbersome to remember but also pose significant security risks. Users have expressed a strong preference for a more streamlined and secure authentication method. Enter passkeys—a cutting-edge solution that replaces traditional passwords with cryptographic keys tied to users' devices. This approach promises to enhance both security and user experience, making logging in smoother and safer.
We’ve decided to implement passkeys after evaluating various options. Unlike social logins or magic links, passkeys offer a unique combination of security and convenience without the associated shortcomings of the other methods. This innovative technology is gaining traction as the future of authentication, and we’re excited to integrate it into Identiflix.
Go Beyond Passwords with Passkeys
We all know the limitations and challenges of passwords: they're often weak, easily forgotten, and susceptible to phishing attacks. Enter passkeys, a new and revolutionary approach to online authentication that promises to address these pain points and usher in a passwordless future.
Passkeys are a new technology based on public key cryptography that replace passwords, enabling users to securely sign in to websites and apps using their biometrics (fingerprint, facial recognition), PIN or a hardware security key. Passkeys eliminate the need to remember complex passwords or type them repeatedly, enhancing user experience and security.
Passkeys replace passwords with cryptographic key pairs for phishing-resistant sign-in security and an improved user experience. You can use these cryptographic keys from end-user devices like computers, phones, or security keys for user authentication. Any passwordless FIDO credential is a passkey.
You can learn more about passkeys with Auth0 in Passkeys for Auth0 Database Connections.
Why Use This Technology?
Passkeys are a new and innovative way to sign in to apps and websites, offering several compelling advantages over traditional passwords and other authentication methods:
- Enhanced Security: Passkeys are inherently more secure than passwords due to their unique cryptographic nature and device-based authentication. They are resistant to phishing attacks, where users are tricked into revealing their passwords on fake websites, as passkeys are only associated with trusted websites and apps. Passkeys are stored in the user's device, and only public information is stored on the server, reducing the risks associated with data breaches.
- Intuitive: Passkeys eliminate the hassle of remembering and managing multiple passwords for different accounts. Instead, users can sign in with their fingerprint, facial recognition, or PIN, making the sign-in process seamless and secure.
- Backed by the Industry's Best: Passkeys are backed by a strong consortium of tech giants, including Apple, Google, Okta, and Microsoft, ensuring widespread adoption and compatibility across various platforms and devices. This broad support will facilitate a smooth transition from passwords to a more secure and convenient authentication method.
- Enhanced Privacy: Passkeys are designed to be more privacy-focused than traditional passwords or social logins. They are stored locally on users' devices, and only public keys are shared with websites or apps.
- Simple: With Auth0, implementing passkey authentication can be as simple as switching a toggle, as you'll demonstrate by completing this lab.
Lab Setup
Before we get started, let's make sure you have all you need to run this workshop:
- Complete the Identiflix Project Setup.
Enable Passkeys in Your Auth0 Tenant
Log in to your Auth0 Dashboard and navigate to "Authentication" > "Database" > "Username-Password-Authentication".
Click on the tab "Authentication Methods" to access the Passkey feature.
Toggle the switch on "Passkey". The passkey's flow is dependent on other configurations of your tenant. If your tenant doesn't meet some of the requirements, you'll be prompted with a screen like the following highlighting what additional steps you are required to implement to effectively use passkeys:
Let's break down these passkey prerequisites.
We need to enable these features to use passkeys:
- Identifier First login flow. The Identifier First login flow presents the user with a screen where they enter their identifier, followed by another step where the user provides proof of their identity, such as a password or confirmation from a face or fingerprint recognition system. It differs from the Identifier + Password login flow, which gives the user a single screen to enter their email and password.
- New Universal Login Experience. The New Universal Login Experience provides many improvements over the Classic Universal Login Experience, including support for the W3C Web Authentication API, which is necessary for passkeys.
In turn, we need to disable these features:
- Custom Login Page. Currently, the login flow for passkeys does not support custom login pages.
- Requires username. With passkeys, there is no need for an additional text field for the user to enter a username.
- Use my own database unless Import Users to Auth0 is enabled. Passkeys cannot be used when using external databases.
If you are using a freshly created tenant or you have not customized your Authentication Profile before, you likely need to set your tenant's Authentication Profile to use the "Identifier First" login flow.
In the "Passkey Authentication Prerequisites" modal, right-click on the first option, "Identifier First login flow", and open that link in a new browser window or tab to address that pending prerequisite.
In the "Authentication Profile" page that loads up, select "Identifier First" and then save your changes by clicking on the "Save" button in the top-right corner.
By selecting the "Identifier First", you change the login and sign-up flow so that an email address goes first, followed by prompting for passwords or other authentication methods on a second step screen, similar to what Google does with its login flow.
Head back to the "Username-Password-Authentication" page, and toggle the "Passkey" option to enable it. This time around, you get a confirmation message saying that your tenant has passkeys enabled:
You can optionally click on "Configure" to customize the passkeys experience further, though the default configuration is all you need for now.
It's now time to test your passkey workflow.
Test Your Passkeys Connection
From the Database Connections screen or the Auth0 Dashboard home page, click on the "Try now" button to start a new Universal Login preview, which now displays a new option to log in with passkeys:
Create a new account by clicking the login box's "Sign up" link.
Enter an email address into the field and click the Continue button. Then, you are given the option to create a passkey:
Click the "Create a passkey " button. You'll see a pop-up giving you different options to create a passkey:
Depending on your OS and device (mobile phone or laptop), things can differ, but the general idea remains the same: you need to choose how to create and store your passkey. It can be a hardware device like a security key, your laptop, or a smartphone or can be software, for example, with Chrome using your Google Account, using Apple's keychain, or password managers with passkey support like 1Password.
For quick setup, you can choose a built-in functionality to create a passkey, which you'll normally confirm with a method such as biometrics or a PIN.
At this point, you will see the following page as a sign of success:
Congratulations! You've successfully enabled passkeys on your Auth0 tenant!
Test in Identiflix
Now that you've set up your passkey in the Auth0 dashboard, it's time to see it in action within the Identiflix app. Begin by opening the Identiflix application in your browser or on your device. Navigate to the login page as a regular user would. Instead of entering a traditional password, you should be prompted to use your newly created passkey.
Now the process will continue as it did before during the dashboard test without requiring any changes in the application's code.
If everything is set up correctly, you should be able to log in without any issues. In case you encounter any problems, double-check your settings in the Auth0 dashboard and ensure that your passkey is correctly configured.
Congratulations! You've successfully enabled passkeys on your Auth0 powered application!
Recap
In this lab, you learned how to configure Auth0 to use passkeys for authentication. Welcome to the future of authentication!
To learn more about passkeys check out the following dedicated passkeys sessions:
- A Brief History of Passkeys by Tim Cappalli.
- A Practical Use Case: Passkeys Management with Auth0 by Carla Urrea Stabile
- Or visit learnpasskeys.io and Passkeys for Auth0 Database Connections in our documentation.
