Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
  • Frequently Asked Questions
  • How does Keycloakify work?
  • It works in Storybook but not in Keycloak
  • There is too much info exposed in window.kcContext
  • How do I identify the page to customize?
  • Can I use react-hooks-form?
  • I can't find what I need in the kcContext
  • How do I add extra pages?
  • How can I access Realm Attributes?
  • How can I redirect the user to Login/Register?
  • Errors in Keycloak Log
  • Why do I get reCaptcha warnings?
  • My Realm Overrides Translations do not apply
  • Validating the password in login-update-password.ftl page
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub

Can I use react-hooks-form?

Was this helpful?

You can but it's probably not a good idea. The Keycloak server is authoritative for defining if a given input is valid, not your theme. For example, it's on the Keycloak server that you would defines that user passwords must be at least 12 character long or that you only accept registration from emails @your-company.com. You don't want to hard code those rules in your theme just to be able to display errors in realtime as the user fills the form, it will be a nightmare to maintain because you'll have to keep your theme in sync with your Keycloak server configuration.

The validation criteria are made accessible to the clients in kcContext.profile.attributesByName[*].validators and kcContext.passwordPolicies. Implementing those validator manually within react-hooks-form isn't straight forward. There's a lot of cases and the format is specific to Keycloak.

What you want to do instead is use the provided by Keycloakify which is akin to the react-hooks-form API wise but already implements all the Keycloak validators and password policies.

Beyond that don't feel the need to implement every possible input fields like checkboxes, multi-value, etc. You can just implement the subset fields type your client or company actually uses.

useUserProfileForm hook