🔏 Create Keycloak themes using React 🔏
Home - Documentation - Storybook - Starter project
Ultimately 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.
We are exclusively sponsored by Cloud IAM, a French company offering Keycloak as a service.
Their dedicated support helps us continue the development and maintenance of this project.
Cloud IAM 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.
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, for your support!
Thanks goes to these wonderful people (emoji key):
- 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 amockPageId.
You are now expected to have a"prepare": "copy-keycloak-resources-to-public",in your package.json scripts.
This script will createpublic/keycloak-assetswhen you runyarn install(If you are using another package manager likepnpmmakes sure that"prepare"is actually ran.)
See the updated starter.public/keycloak-assetsshouldn't be tracked by GIT and is automatically ignored.
- Better storybook support, see the starter project.
- 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
- Remember me is fixed
- Build work behind corporate proxies, see issue.
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.
- You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, see PR.
- Feature new build options:
bundler,groupId,artifactId,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.
- Widows compat (thanks to @lordvlad, see PR). WSL is no longer required 🎉
@emotion/reactis no longer a peer dependency of Keycloakify.
- It is now possible to pass a custom
<Template />component as a prop to<KcApp />and every individual page (<Login />,<RegisterUserProfile />, ...) it enables to customize only the header and footer for example without having to switch to a full-component level customization. See issue.
- You can now optionally pass a
doFetchDefaultThemeResources: booleanprop to every page component and the default<KcApp />This enables you to prevent the default CSS and JS that comes with the builtin Keycloak theme to be downloaded.
You'll get a black slate.
- Bundle size drastically reduced, locals and component dynamically loaded.
- First print much quicker, use of React.lazy() everywhere.
- Real i18n API.
- Actual documentation for build options.
Checkout the migration guide
- React.lazy() support 🎉. #141
- Feat
logout-confirm.ftl. PR
Fix login-verify-email.ftl page. Before - After
Add support for login-config-totp.ftl page #127.
Rename keycloak_theme_email to keycloak_email.
If you already had a keycloak_theme_email you should rename it keycloak_email.
Migration guide
New i18n system.
Import of terms and services have changed. See example.
Add login-idp-link-email.ftl page See PR.
M1 Mac support (for testing locally with a dockerized Keycloak).
WARNING: This is broken.
Testing with local Keycloak container working with M1 Mac. Thanks to @eduardosanzb.
Be aware: When running M1s you are testing with Keycloak v15 else the local container spun will be a Keycloak v16.1.0.
Register with user profile enabled: Out of the box options validator support.
Example
tss-react and powerhooks are no longer peer dependencies of keycloakify.
After updating Keycloakify you can remove tss-react and powerhooks from your dependencies if you don't use them explicitly.
There is a new recommended way to setup highly customized theme. See here.
Unlike with the previous recommended method,
with this new method your theme wont break on minor Keycloakify update.
Feature login-update-password.ftl.
Every time a page is added it's a breaking change for non CSS-only theme.
Change this and this to update.
- Out of the box frontend form validation 🥳
- Improvements (and breaking changes in
import { useKcMessage } from "keycloakify".
No breaking changes except that @emotion/react, tss-react and powerhooks are now peerDependencies instead of being just dependencies.
It's important to avoid problem when using keycloakify alongside mui and
when passing params from the app to the login page.
- Feature Use advanced message
and
messagesPerFields(implementation here) - Test container now uses Keycloak version
15.0.2.
- It's now possible to implement custom
.ftlpages. - Support for Keycloak plugins that introduce non standard ftl values.
(Like for example this plugin that define
authorizedMailDomainsinregister.ftl).