This article describes the process of configuring Keycloak for passwordless login using passkeys, webauthn, and OTP (One-Time Password). Some configurations in this article may require Keycloak 23 or higher to function properly.
Configuring the Authentication Section
In Keycloak’s Authentication - Flow menu, duplicate the browser flow. We’ll name the copy browser with optional webauth and otp.
In the new flow, delete browser password form and all steps/flows below it:
First, add a step, select username Form, and set it to required:
Below, add a subflow and name it passwordless or password or otp:
Within the passwordless or password or otp subflow, add three steps: Password Form, WebAuthn Passwordless Authenticator, and OTP Form. These three steps correspond to password authentication, passkey/webauthn authentication, and OTP code (six-digit two-factor authentication) respectively. Set these three steps as alternative, meaning users can choose any one of the three methods to log in.
The final result after adding all steps should look like this:
Bind Flow
Click on Action in the upper right corner of the flow and bind the newly created flow to the browser flow (browser login):
Enable webauthn in required actions
In Authentication-Required actions, enable Webauthn Register Passwordless:
Using passkey to log in
Add a passkey
In the Signing in section of the account panel, you’ll see a new Passwordless option. Click Set up Security key to set up your Passkey.
Test Passkey login
After entering your account information, you will see the login method interface:
Click Security Key to log in using Passkey.
Misc
If users are required to set up a passkey/OTP, the Set as default action option in Required Actions needs to be checked.
