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

are the login pages currently implemented vs .

are the acount pages currently implemented vs .

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

Keycloakify also enables you to declare custom ftl pages.

Check out how my-extra-page-1.ftl and my-extra-page-2.ftl where added to .

Main takeaways are:

(TS only) You must declare theses page in the type argument of the getter function for the kcContext in order to have the correct typings.
(TS only) If you use Keycloak plugins that defines non standard .ftl values (Like for example that define authorizedMailDomains in register.ftl) you should declare theses value to get the type.
You should provide sample data for all the non standard value if you want to be able to debug the page outside of keycloak.

`process.env.PUBLIC_URL` not supported.

You won't be able to . (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.

Other workarounds

You can circumvent the problem by avoiding hosting your font yourself using Google Fonts, Font Awesome or any other font provider.

Admin Console Theme not supported

Wellcome page not customizable

The following page isn't customizable yet.

Field Names can't be runtime generated

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

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

PreviousRealtime input validation and custom registration fields NextEnvironnement Variables

Last updated 1 year ago

Was this helpful?

Some pages still have the default theme. Why?

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.

Self hosted fonts

Other workarounds

Admin Console Theme not supported

Wellcome page not customizable

Field Names can't be runtime generated

Some pages still have the default theme. Why?

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.

Self hosted fonts

Other workarounds

Admin Console Theme not supported

Wellcome page not customizable

Field Names can't be runtime generated

`process.env.PUBLIC_URL` not supported.

`process.env.PUBLIC_URL` not supported.