⚠️Limitations

Some pages still have the default theme. Why?

This project only support out of the box the most common user facing pages of Keycloak login.

To see the complete list of pages that Keycloak provide you can download the base theme with the following command

npx -p keycloakify download-builtin-keycloak-theme

Most Keycloakify component are based on the base theme of Keycloak v11.0.3 (Video demo).

Here are the pages currently implemented by this module.

I have established that a page that I need isn't supported out of the box by Keycloakify, now what?

I submit a PR to Keycloakify

💟Contributing

I do it only for my project

process.env.PUBLIC_URL not supported.

You won't be able to import things from your public directory in your JavaScript code (it's supported in public/index.html). (This isn't recommended anyway).

Self hosted fonts

If you are building the theme with --external-assets this limitation doesn't apply, you can import fonts however you see fit.

This scenario won't work

fonts.css

@font-face {
  font-family: Marianne;
  src: url("./fonts/Marianne-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

index.html

<link rel="stylesheet" href="%PUBLIC_URL%/font.css" />

This will:

index.html

-<link rel="stylesheet" href="%PUBLIC_URL%/font.css" />
+<style>
+ @font-face {
+   font-family: Marianne;
+   src: url("%PUBLIC_URL%/fonts/Marianne-Light.woff2") format("woff2");
+   font-weight: 300;
+   font-style: normal;
+   font-display: swap;
+ }
+</style>

Make sure %PUBLIC_URL%/fonts/Marianne-Light.woff2 actually point to the font file.

Example here (and the font are here).

Other workarounds

• Use --external-assets.

• If it is possible, use Google Fonts or any other font provider.

• You can use non relative url, you will need to enable Access-Control-Allow-Origin for your font files, even on the same domain.

login and email only

As of now Keycloakify only enable you to create a theme that covers the Login pages and the emails. Acount and Admin Console aren't supported yet.

If you are missing this feature open an issue about it.