⚠️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

Video demo

Here are the login pages currently implemented vs all the existing pages.

Here are the acount pages currently implemented vs all the existing pages.

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

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

This scenario won't work

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

As a workaround you can have your @font-face import directly in a style tage of your index.html <head />.

public/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

Admin Console Theme not supported

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

Wellcome page not customizable

The following page isn't customizable yet.

It's however planned to enable this. Follow the progress in this issue.

Field Names can't be runtime generated

Keycloakify analyze your code to see what field name are used. As a result your field names should be hard coded in your code (If you are using user profile you don't have to worry about it).

// OK ✅
messagesPerField.exists("foo-bar")

// Not OK 🛑
const bar= "bar";
messagesPerField.exists(`foo-${bar}`);

Last updated