Keycloak Passkeys

Submitted by Erik Wegner on

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.

Activated features overview on the realm page

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:

Login flow configuration
  1. Duplicate the browser flow.
  2. Add the Passkeys Conditional UI Authenticator step after the Identity Provider Redirector step. Enable it as Alternative.
  3. Add the WebAuthn Authenticator step through the plus sign in the Conditional OTP row. Enable it as Alternative.
  4. Set the existing OTP Form step to Alternative.

Then bind the new flow to the browser login:

Bind flow

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:

Configured security factors

Perform a login

Username and password form

The login form asks for the username and the password. The link Try Another Way opens the following choice for the first factor:

Choose the first factor

If you choose Passkey, the following form is shown. On a mobile device, this works easier than on a desktop browser.

Passkey login form

If the user enters username and password, the second factor is required. This starts with the webauthn passkey selection.

Webauthn second factor selection

If you click Try Another Way here, the choice for the second factor is shown:

Second factor selection

The final form shows the input for the OTP code:

OTP form
Categories