Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11 (Legacy)
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11 (Legacy)
  • 👨‍💻Quick start
  • 🧪Testing your Theme
    • In Storybook
    • In a Keycloak Docker Container
    • With Vite or Webpack in dev mode
  • 🔩Integrating Keycloakify in your Codebase
    • In your React Project
      • In your Vite Project
      • In your Webpack Project
    • As a Subproject of your Monorepo
      • Turborepo
      • Nx Integrated Monorepo
      • Package Manager Workspaces
  • 🎨Customization Strategies
    • CSS Level Customization
      • Basic example
      • Removing the default styles
      • Applying your own classes
      • Page specific styles
      • Using Tailwind
      • Using custom assets
        • .css, .sass or .less
        • CSS-in-JS
    • Component Level Customization
      • Using custom assets
  • 🖋️Custom Fonts
  • 🌎Internationalization and Translations
    • Base principles
    • Adding Support for Extra Languages
    • Previewing you Pages In Different Languages
    • Adding New Translation Messages Or Changing The Default Ones
  • 🎭Theme Variants
  • 📝Customizing the Register Page
  • 👤Account Theme
    • Single-Page
    • Multi-Page
  • 📄Terms and conditions
  • 🖇️Styling a Custom Page Not Included In Base Keycloak
  • 🔧Accessing the Server Environment Variables
  • 🎯Targetting Specific Keycloak Versions
  • 📧Email Customization
  • 🚛Passing URL Parameters to your Theme
  • 🤵Admin theme
  • 📥Importing the JAR of Your Theme Into Keycloak
  • 🔛Enabling your Theme in the Keycloak Admin Console
  • 🤓Taking ownership of the kcContext
  • 📖Configuration Options
    • --project
    • keycloakVersionTargets
    • environmentVariables
    • themeName
    • startKeycloakOptions
    • themeVersion
    • postBuild
    • XDG_CACHE_HOME
    • kcContextExclusionsFtl
    • keycloakifyBuildDirPath
    • groupId
    • artifactId
    • Webpack specific options
      • projectBuildDirPath
      • staticDirPathInProjectBuildDirPath
      • publicDirPath
  • FAQ & HELP
    • 🤝Comunity resources
    • ⬆️Migration Guides
      • ⬆️v10->v11
      • ⬆️v9 -> v10
      • ⬆️CRA -> Vite
      • ⬆️v8 -> v9
      • ⬆️v7 -> v8
      • ⬆️v6 -> v7
      • ⬆️v6.x -> v6.12
      • ⬆️v5 -> v6
    • 😞Can't identify the page to customize?
    • 🤔How it Works
    • 😖Some values you need are missing from in kcContext type definitions?
    • ❓Can I use it with Vue or Angular
      • Angular
    • ⚠️Limitations
    • 🛑Errors Keycloak in Logs
    • 🙋How do I add extra pages?
    • 🤓Can I use react-hooks-form?
    • 🚀Redirecting your users to the login/register pages
    • 💟Contributing
    • 🍪Google reCaptcha and End of third-party Cookies
    • 🔖Accessing the Realm Attributes
  • ⭐Sponsors
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. FAQ & HELP

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