🔏 Create Keycloak themes using React 🔏

Home - Documentation - Storybook - Starter project

This build tool generates a Keycloak theme Learn more

> Whether or not React is your preferred framework, Keycloakify > offers a solid option for building Keycloak themes. > It's not just a convenient way to create a Keycloak theme > when using React; it's a well-regarded solution that many > developers appreciate. Keycloakify is fully compatible with Keycloak, starting from version 11 and is anticipated to maintain compatibility with all future versions. You can update your Keycloak, your Keycloakify generated theme won't break. To understand the basis of my confidence in this, you can [visit this discussion thread where I've explained in detail](https://github.com/keycloakify/keycloakify/discussions/346). ## Sponsor 👼 We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service. Their dedicated support helps us continue the development and maintenance of this project. [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github) provides the following services: - Simplify and secure your Keycloak Identity and Access Management. Keycloak as a Service. - Custom theme building for your brand using Keycloakify.

![Logo Dark](https://user-images.githubusercontent.com/6702424/234135797-c84d0a90-0526-43e5-a186-70cbebdeb278.png#gh-dark-mode-only)

![Logo Light](https://user-images.githubusercontent.com/6702424/234135799-68684c33-4ec5-48d4-8763-0f3922c86643.png#gh-light-mode-only)

Checkout Cloud IAM and use promo code keycloakify5
5% of your annual subscription will be donated to us, and you'll get 5% off too.

Thank you, [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support! ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Waldemar Reusch} 💻	_{William Will} 💻	_{Bystrova Ann} 💻	_{Michael Kreuzmayr} 💻	_Mary 💻	_{German Öö} 💻	_{Julien Bouquillon} 💻
_{Aidan Gilmore} 💻	_Void 💻	_juffe 💻	_{Lazaros Toumanidis} 💻	_Marc 💻	_{Kasir Barati} 📖	_{Alex Oliynyk} 💻
_{Thomas Silvestre} 💻	_satanshiro 💻	_{Koen Poelhekke} 💻

# Changelog highlights ## 7.14 - Deprecate the `extraPages` build option. Keycloakify is now able to analyze your code to detect extra pages. ## 7.13 - Deprecate `customUserAttribute`, Keycloakify now analyze your code to predict field name usage. [See doc](https://docs.keycloakify.dev/build-options#customuserattributes). It's now mandatory to [adopt the new directory structure](https://docs.keycloakify.dev/migration-guides/v6-greater-than-v7). ## 7.12 - You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme. There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.extrathemenames). ## 7.9 - Separate script for copying the default theme static assets to the public directory. Theses assets are only needed for testing your theme locally in Storybook or with a `mockPageId`. You are now expected to have a `"prepare": "copy-keycloak-resources-to-public",` in your package.json scripts. This script will create `public/keycloak-assets` when you run `yarn install` (If you are using another package manager like `pnpm` makes sure that `"prepare"` is actually ran.) [See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11). `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored. ## 7.7 - Better storybook support, see [the starter project](https://github.com/keycloakify/keycloakify-starter). ## 7.0 🍾 - Account theme support 🚀 - It's much easier to customize pages at the CSS level, you can now see in the browser dev tool the customizable classes. - New interactive CLI tool `npx eject-keycloak-page`, that enables to select the page you want to customize at the component level. - There is [a Storybook](https://storybook.keycloakify.dev) - [Remember me is fixed](https://github.com/keycloakify/keycloakify/pull/272) ## 6.13 - Build work behind corporate proxies, [see issue](https://github.com/keycloakify/keycloakify/issues/257). ## 6.12 Massive improvement in the developer experience: - There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter - A lot of comments have been added in the code of the starter to make it easier to get started. - The doc has been updated: https://docs.keycloakify.dev - A lot of improvements in the type system. ## 6.11.4 - You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/239). - Feature new build options: [`bundler`](https://docs.keycloakify.dev/build-options#keycloakify.bundler), [`groupId`](https://docs.keycloakify.dev/build-options#keycloakify.groupid), [`artifactId`](https://docs.keycloakify.dev/build-options#keycloakify.artifactid), [`version`](https://docs.keycloakify.dev/build-options#version). Theses options can be user to customize the output name of the .jar. You can use environnement variables to overrides the values read in the package.json. Thanks to @lordvlad. ## 6.10.0 - Widows compat (thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/226)). WSL is no longer required 🎉 ## 6.8.4 - `@emotion/react` is no longer a peer dependency of Keycloakify. ## 6.8.0 - It is now possible to pass a custom `