This is the documentation for v8, checkout the latest version
Keycloakify
v8
  • Keycloakify
  • Release Notes & Upgrade Instructions
  • FAQ
v8
  • 👨‍💻Quick start
  • 🔩Keycloakify in my App
  • 📧Email customization
  • ✒️Terms and conditions
  • ✅Realtime input validation and custom registration fields
  • ⚠️Limitations
  • 🔧Environnement Variables
  • 🌎i18n: msg(...)
  • 📖Build options
  • 💂Email domain acceptlist
  • 🛑Keycloak error in log
  • 🌉Context persistence
  • 💟Contributing
  • 🤔How it works
  • ⬆️Migration guides
    • ⬆️v7 -> v8
    • ⬆️v6 -> v7
    • ⬆️v6.x -> v6.12
    • ⬆️v5 -> v6
Powered by GitBook
On this page
  • Some pages still have the default theme. Why?
  • process.env.PUBLIC_URL not supported.
  • Self hosted fonts
  • Admin Console Theme not supported
  • Wellcome page not customizable
  • Field Names can't be runtime generated

Was this helpful?

Limitations

PreviousRealtime input validation and custom registration fieldsNextEnvironnement Variables

Last updated 2 days ago

Was this helpful?

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.

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>

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

Example (and the font are ).

You can , you will need to enable on the server serving your fonts.

If you are missing this feature .

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

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 you don't have to worry about it).

⚠️
Video demo
Here
all the existing pages
Here
all the existing pages
💟Contributing
the demo project
example
this plugin
example
example
here
here
self host your font somewhere
Access-Control-Allow-Origin
open an issue about it
this issue
using user profile
Cloud IAM - Keycloak Identity and Access Management as a Service
Feeling overwhelmed? Check out our exclusive sponsor's Cloud IAM consulting services to simplify your experience.
Logo