🔏 Create Keycloak themes using React 🔏
---- Project starter / Demo setup ----
CSS Level customization - Component Level customization
----
Ultimately this build tool generates a Keycloak theme Learn more
🗣 V6 have been released 🎉
It features major improvements.
Checkout the migration guide.
@emotion/react
is 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: boolean
prop 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
.ftl
pages. - Support for Keycloak plugins that introduce non standard ftl values.
(Like for example this plugin that define
authorizedMailDomains
inregister.ftl
).