✅Realtime input validation and custom registration fields
Last updated
Last updated
In reality the regexp used in this gif doesn't work server side, the regexp pattern should be ^[^@]@gmail\.com$ (the RegExp should match the whole string) 😬.
User Profile is a Keycloak feature that enables to define, from the admin console, what information you want to collect on your users in the register page and to validate inputs on the frontend, in realtime!
User profile is only available in Keycloak 15 and newer and it's not enabled by default, you have, to start keywloak with the extra parameter: --features=declarative-user-profile
How you would pass this parameter in practice depend of the Docker image/Helm chart that you are using. Here is an example with docker compose. With older Keycloak distribution you can also use JAVA_OPS environement variable
docker example, helm example. But the default way, with the official docker image is this.
The feature also need to be enabled the feature in the console or you won't see the tab.
Keycloakify provides client side validation out of the box but for customizing the registration experience you'll have customize register-user-profile.ftl
Example in the starter project:
You can establish guidelines for what constitutes a valid password, such as a minimum length, by utilizing the Keycloak Admin UI under 'Authentication -> Password Policy'. However, as of now, Keycloak does not support front-end validation of passwords.
This limitation means that we can't provide immediate feedback to the user on the client side about the validity of their chosen password. Only after the user clicks on 'Register' will they receive an error if the chosen password does not adhere to the server-defined password policy.
Should you insist on implementing client-side password validation, you can pass validators to the useFormValidation function, although it's not typically recommended. The reason for this is potential confusion for users if the validator defined in your theme does not align with the server's password policy.
In the public deployment of the starter project.
If you register you'll see that you have to select if your are a cat or dog person.
This appear because, on my keycloak server I have configured a custom user profile attribute.
And when the user is connecte, it's choice appear in the JWT
This work because I have created the following mapper in my Keycloak configuration pannel:
Go to clients -> starter (name of your client) -> Mappers
Name: Favourite pet
Mapper type: User attribute
User attribute: favourite_pet
Token claim name: favourite_pet
Claim JSON type: string
