Keycloakify: Create Keycloak themes using React

Keycloakify is a build tool that aims at making the creation of custom Keycloak themes as straightforward as possible.

Keycloak provides theme support for web pages. This allows customizing the look and feel of end-user facing pages so they can be integrated with your applications.
It involves, however, a lot of raw JS/CSS/FTL hacking, and bundling the theme is not exactly straightforward.

Beyond that, if you use Keycloak for a specific app you want your login page to be tightly integrated with it.
Ideally, you don't want the user to notice when he is being redirected away.

Trying to reproduce the look and feel of a specific app in another stack is not an easy task not to mention
the cheer amount of maintenance that it involves.

Without keycloakify, users suffers from a harsh context switch, no fronted form pre-validation:

Wouldn't it be great if we could just design the login and register pages as if they were part of our app?

Here is keycloakify for you 🍸

With keycloakify:

NOTE: No autocomplete here just because it was an incognito window.

Ultimately the build tool Generates a Keycloak theme

If you already have a Keycloak custom theme, it can be easily ported to Keycloakify.

Checkout Keycloakify here