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

💟pageContributing

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 the demo project.

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. example
(TS only) If you use Keycloak plugins that defines non standard .ftl values (Like for example this plugin that define authorizedMailDomains in register.ftl) you should declare theses value to get the type. example
You should provide sample data for all the non standard value if you want to be able to debug the page outside of keycloak. example

`process.env.PUBLIC_URL` not supported.

Using process.env.PUBLIC_URL is not directly supported (but it will be in the future). As a temporary workaround we you can do:

import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext";
import { kcContext as kcAccountThemeContext } from "keycloak-theme/login/kcContext";

const PUBLIC_URL = (()=>{

    const kcContext = (()=>{

        if( kcLoginThemeContext !== undefined ){
            return kcLoginThemeContext;
        }
        
        if( kcAccountThemeContext !== undefined ){
            return kcLoginThemeContext
        }

        return undefined;

    })();

    return (kcContext === undefined || process.env.NODE_ENV === "development")
        ? process.env.PUBLIC_URL
        : `${kcContext.url.resourcesPath}/build`;

})();

// Assuming you have my-image.png in your public directory 
// you can get an URL for it that will be correct regardless of the context with:  
const imageUrl = `${PUBLIC_URL}/my-image.png`;

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>

Example here (and the font are here).

Other workarounds

You can circumvent the problem by avoiding hosting your font yourself using Google Fonts, Font Awesome or any other font provider.
You can self host your font somewhere, you will need to enable Access-Control-Allow-Origin on the server serving your fonts.

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}`);

PreviousRealtime input validation and custom registration fields NextEnvironnement Variables

Last updated 6 months ago