DEV Community

Garrone Joseph
Garrone Joseph

Posted on

16

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more