Overview
Passkey autofill provides an incredibly seamless and secure way for users to sign-in using their passkey. In this guide, we will show you how to add passkey autofill to your Keycloak sign-in flow using Authsignal. When clicking on the username or password input fields, users will be prompted to authenticate with their passkey that they added through Authsignal’s pre-built UI.Passkey autofill.
Keycloak provider code example
The above example can be extended to meet your specific requirements.
Prerequisites
- You have completed the previous guide on adding passkey MFA to your Keycloak login flow.
Authsignal configuration
Local development
To make things easy, we will make a few simple changes to your local development setup so that you can simulate a production environment, locally. We will usemkcert
to create a local SSL certificate and local-ssl-proxy
to proxy requests to your local Keycloak server.
Replace
keycloak-demo.authsignallabs.com
with your domain. If using the pre-built UI, this will differ from your Authsignal custom domain. i.e. keycloak-demo.authsignallabs.com
which our demo app uses vs keycloak-demo-auth.authsignallabs.com
where the pre-built UI is running - in this demonstration.1
SSL Certificate Setup
Take note of the path to the
.pem
files that are created as you’ll need them in the next steps.2
Custom Domain to Local IP Address Mapping
Map your custom domain to your local IP address by adding the following line to your Add this line:
hosts
file:3
Run the proxy server
4
Run your Keycloak server
Learn more about the Keycloak server configuration options.
5
Sign in to your Keycloak server
Open your browser and navigate to 
https://your_domain:8443
(e.g. https://keycloak-demo.authsignallabs.com:8443
) which will redirect you to the admin sign-in page on your proxied https Keycloak server.
Opening the Keycloak admin sign-in page
Changes to your Keycloak configuration
In your Keycloak admin UI, navigate to the Authentication section and click on your custom flow. Delete the default username and password flow.
Delete the default username and password flow

Enable Passkey Autofill

Enable Passkey Autofill
Sign-in UI configuration
We need to add some custom code to the Keycloak sign-in page so that it can use Authsignal’s Web SDK to handle passkey autofill. Start by creating a new theme for your Keycloak instance, at the following path:themes/mytheme/login/login.ftl
on your keycloak server.
You can call the theme whatever you want, but for this example, we will call it mytheme
.
Add the following code to the login.ftl
file. This code will allow autofill to work when the user clicks the username or password input fields.
themes/mytheme/login/login.ftl
webauthn
has to be the last autocomplete attribute value in the list otherwise it will not work.themes/mytheme/login/resources/js/script.js
and add the following code. This code is required to allow autofill to work when the user clicks the input.
themes/mytheme/login/resources/js/script.js
mytheme
and click Save.

Opening the Keycloak admin sign-in page
You can style your theme by adding your own CSS to the
themes/mytheme/login/resources/css/styles.css
file.You can find your realm’s sign in page URL by selecting your realm and then navigating to the Clients section in the Keycloak admin UI and clicking Home URL.

Find your realm's Home URL
Passkey configuration updates
Before passkeys can be used on your Keycloak login page, you need to ensure that you have added your Keycloak login page domain as an expected origin. As an example, in this demo the passkey configuration is as follows:- Relying Party ID:
authsignallabs.com
- Expected Origins:
keycloak-demo.authsignallabs.com
(Keycloak login page) andkeycloak-demo-auth.authsignallabs.com
(pre-built UI custom domain)
Passkey autofill.