This is the documentation for v9, checkout the latest version
Keycloakify
HomeGitHubStartersStorybookDiscordKeycloak-js Alternative
v9
  • Keycloakify
  • Release Notes & Upgrade Instructions
  • FAQ
v9
  • ๐Ÿ‘จโ€๐Ÿ’ปQuick start
  • ๐Ÿ“ฅImporting your theme in Keycloak
  • ๐Ÿ”ฉKeycloakify in my App
  • ๐Ÿ–ผ๏ธImporting assets and fonts
  • ๐Ÿ“งEmail customization
  • โœ’๏ธTerms and conditions
  • โœ…Realtime input validation and custom registration fields
  • โš ๏ธLimitations
  • ๐Ÿ”งEnvironment Variables
  • ๐ŸŒŽi18n: msg(...)
  • ๐Ÿ“–Build options
  • ๐Ÿ’‚Email domain acceptlist
  • ๐Ÿ›‘Keycloak error in log
  • ๐ŸŒ‰Passing values from the App to the theme
  • ๐Ÿ’ŸContributing
  • ๐Ÿค”How it works
  • โฌ†๏ธMigration guides
    • โฌ†๏ธCRA -> Vite
    • โฌ†๏ธv8 -> v9
    • โฌ†๏ธv7 -> v8
    • โฌ†๏ธv6 -> v7
    • โฌ†๏ธv6.x -> v6.12
    • โฌ†๏ธv5 -> v6
Powered by GitBook
On this page

Was this helpful?

Realtime input validation and custom registration fields

PreviousTerms and conditionsNextLimitations

Last updated 27 days ago

Was this helpful?

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 , what information you want to collect on your users in the register page and to validate inputs !

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:

How you would pass this parameter in practice depend of the Docker image/Helm chart that you are using. . With older Keycloak distribution you can also use JAVA_OPS environment variable

, . But the default way, with the official docker image is .

The feature also need to be 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:

Password validation

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.

Getting your custom user attribute to be included in the JWT

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

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, .

Should you insist on implementing client-side password validation, , 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 .

โœ…
Keycloak does not support front-end validation of passwords
you can pass validators to the useFormValidation function
the public deployment of the starter project
define, from the admin console
on the frontend, in realtime
--features=declarative-user-profile
Here is an example with docker compose
docker example
helm example
this
enabled the feature in the console
keycloakify-starter/RegisterUserProfile.tsx at main ยท keycloakify/keycloakify-starterGitHub
The RegisterUserProfile page...
keycloakify-starter/UserProfileFormFields.tsx at main ยท keycloakify/keycloakify-starterGitHub
...but this is where the magic happens
Walkthrough the Keycloak UI
Logo
Logo