✅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 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 environment 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:

https://github.com/keycloakify/keycloakify-starter/blob/main/src/keycloak-theme/login/pages/RegisterUserProfile.tsxgithub.com

The RegisterUserProfile page...

https://github.com/keycloakify/keycloakify-starter/blob/main/src/keycloak-theme/login/pages/shared/UserProfileFormFields.tsxgithub.com

...but this is where the magic happens

Password validation

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.

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 connected, it's choice appear in the JWT

This works because I have created the following mapper in my Keycloak configuration panel:

Go to clients

-> [name of your client]

-> client scopes

-> [name of your client]-dedicated

-> configure new mapper

-> User attribute

• Name: Favorite pet

• Mapper type: User attribute

• User attribute: favourite_pet

• Token claim name: favourite_pet

• Claim JSON type: string

Walkthrough the Keycloak UI