Learn how to add passkey autofill to your Keycloak login flow with Authsignal.
Passkey autofill.
mkcert
to create a local SSL certificate and local-ssl-proxy
to proxy requests to your local Keycloak server.
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.SSL Certificate Setup
.pem
files that are created as you’ll need them in the next steps.Custom Domain to Local IP Address Mapping
hosts
file:Run the proxy server
Run your Keycloak server
Sign in to your Keycloak server
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
Delete the default username and password flow
Enable Passkey Autofill
Enable Passkey Autofill
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.
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.
mytheme
and click Save.
Opening the Keycloak admin sign-in page
themes/mytheme/login/resources/css/styles.css
file.Find your realm's Home URL
authsignallabs.com
keycloak-demo.authsignallabs.com
(Keycloak login page) and keycloak-demo-auth.authsignallabs.com
(pre-built UI custom domain)Passkey autofill.