Keycloak Passkeys
Let's start with some introductions to the terms from the summary:
Terms and definitions
Keycloak is an identity management solution developed as an open source product. It allows centralized logins, aka single sign-on scenarios.
Multi factor authentication enhances security of authentication processes. A user needs more than a password to identify himself.
TOTP means time-based one time passwords. These passwords are 6 digit numbers, changing every 30 seconds and often come through scanning a QR code.
WebAuthn is a browser interface for hardware security devices that also act as a second factor.
Passkeys is another standard that connects a given hardware (token, phone, security chip) to a user account. Passkeys are secured themselfs, therefore are sufficent to identity a user as a single factor.
Preparation
The first thing to do is to enable the features for webauthn and passkeys.
Browser flow
The flow configuration controls the available options and required user input. To support Passkeys and username+password+second-factor-authentication, you can follow the documentation and put all steps into the appropriate position:
- Duplicate the browser flow.
- Add the Passkeys Conditional UI Authenticator step after the Identity Provider Redirector step. Enable it as Alternative.
- Add the WebAuthn Authenticator step through the plus sign in the Conditional OTP row. Enable it as Alternative.
- Set the existing OTP Form step to Alternative.
Then bind the new flow to the browser login:
View registed devices
Users can add a code generator (authenticator application), Passkeys as second factor and Passkeys for passwordless logins. This is the view to those registered devices:
Perform a login
The login form asks for the username and the password. The link Try Another Way opens the following choice for the first factor:
If you choose Passkey, the following form is shown. On a mobile device, this works easier than on a desktop browser.
If the user enters username and password, the second factor is required. This starts with the webauthn passkey selection.
If you click Try Another Way here, the choice for the second factor is shown:
The final form shows the input for the OTP code: