✅
Realtime input validation and custom registration fields

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 enable it set:   
JAVA_OPTS=-Dkeycloak.profile=preview (docker example, helm example) 
or  
KEYCLOAK_EXTRA_ARGS: --features=declarative-user-profile (Docker compose example) 
​
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:
keycloakify-starter/RegisterUserProfile.tsx at main · keycloakify/keycloakify-starter
GitHub
The RegisterUserProfile page...
keycloakify-starter/UserProfileFormFields.tsx at main · keycloakify/keycloakify-starter
GitHub
...but this is where the magic happens
As of today Keycloak dosen't allow to define a pattern for the password in the admin console. You can however pass validators for it to the useFormValidation function. (this is why useFormValidation returns attributesWithPassword)
Getting your custom user attribute to be included in the JWT  
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
Cloud IAM - Keycloak Identity and Access Management as a Service
Feeling overwhelmed? Check out our exclusive sponsor's Cloud IAM consulting services to simplify your experience.
Terms and conditions
Limitations
Last modified 1mo ago