npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@magnetcustomer/keycloakify

v9.6.2

Published

Create Keycloak themes using React

Downloads

6

Readme

Keycloakify is fully compatible with Keycloak 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, ~~22~~, 23 and up!

Sponsor

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.

Logo Dark

Logo Light

Thank you, Cloud-IAM, for your support!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Changelog highlights

9.5

  • Post build hook: You can now apply custom transformation to your theme files. Learn more.
  • You can now specify your option in the Keycloakify's Vite plugin instead in the package.json. See example.

9.4

Vite Support! 🎉

9.0

Bring back support for account themes in Keycloak v23 and up! See issue.

Breaking changes

Very few. Check them out here.

8.0

  • Much smaller .jar size. 70.2 MB -> 7.8 MB.
    Keycloakify now detects which of the static resources from the default theme are actually used by your theme and only include those in the .jar.
  • Build time: The first build is slowed but the subsequent build are faster. Update your CI so that the cache is persisted across CI build.

Breaking changes

There are very few breaking changes in this major version. Check them out.

7.15

  • The i18n messages you defines in your theme are now also maid available to Keycloak. In practice this mean that you can now customize the kcContext.message.summary that display a general alert and the values returned by kcContext.messagesPerField.get() that are used to display specific error on some field of the form. See video

7.14

  • Deprecate the extraPages build option. Keycloakify is now able to analyze your code to detect extra pages.

7.13

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.

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. public/keycloak-assets shouldn't be tracked by GIT and is automatically ignored.

7.7

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
  • Remember me is fixed

6.13

  • Build work behind corporate proxies, see issue.

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.
  • 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.

6.10.0

  • Widows compat (thanks to @lordvlad, see PR). 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 <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.

6.7.0

  • Add support for webauthn-authenticate.ftl thanks to @mstrodl's hacktoberfest PR.

6.6.0

  • Add support for login-password.ftl thanks to @mstrodl's hacktoberfest PR.

6.5.0

  • Add support for login-username.ftl thanks to @mstrodl's hacktoberfest PR.

6.4.0

  • 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.

6.0.0

  • 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

5.8.0

5.7.0

  • Feat logout-confirm.ftl. PR

5.6.4

Fix login-verify-email.ftl page. Before - After

5.6.0

Add support for login-config-totp.ftl page #127.

5.3.0

Rename keycloak_theme_email to keycloak_email.
If you already had a keycloak_theme_email you should rename it keycloak_email.

5.0.0

Migration guide
New i18n system.
Import of terms and services have changed. See example.

4.10.0

Add login-idp-link-email.ftl page See PR.

4.8.0

Email template customization.

4.7.4

M1 Mac support (for testing locally with a dockerized Keycloak).

4.7.2

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.

4.7.0

Register with user profile enabled: Out of the box options validator support.
Example

4.6.0

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.

4.5.3

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.

4.3.0

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.

4

  • Out of the box frontend form validation 🥳
  • Improvements (and breaking changes in import { useKcMessage } from "keycloakify".

3

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.

2.5

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 in register.ftl).