Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11 (Legacy)
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11 (Legacy)
  • 👨‍💻Quick start
  • 🧪Testing your Theme
    • In Storybook
    • In a Keycloak Docker Container
    • With Vite or Webpack in dev mode
  • 🔩Integrating Keycloakify in your Codebase
    • In your React Project
      • In your Vite Project
      • In your Webpack Project
    • As a Subproject of your Monorepo
      • Turborepo
      • Nx Integrated Monorepo
      • Package Manager Workspaces
  • 🎨Customization Strategies
    • CSS Level Customization
      • Basic example
      • Removing the default styles
      • Applying your own classes
      • Page specific styles
      • Using Tailwind
      • Using custom assets
        • .css, .sass or .less
        • CSS-in-JS
    • Component Level Customization
      • Using custom assets
  • 🖋️Custom Fonts
  • 🌎Internationalization and Translations
    • Base principles
    • Adding Support for Extra Languages
    • Previewing you Pages In Different Languages
    • Adding New Translation Messages Or Changing The Default Ones
  • 🎭Theme Variants
  • 📝Customizing the Register Page
  • 👤Account Theme
    • Single-Page
    • Multi-Page
  • 📄Terms and conditions
  • 🖇️Styling a Custom Page Not Included In Base Keycloak
  • 🔧Accessing the Server Environment Variables
  • 🎯Targetting Specific Keycloak Versions
  • 📧Email Customization
  • 🚛Passing URL Parameters to your Theme
  • 🤵Admin theme
  • 📥Importing the JAR of Your Theme Into Keycloak
  • 🔛Enabling your Theme in the Keycloak Admin Console
  • 🤓Taking ownership of the kcContext
  • 📖Configuration Options
    • --project
    • keycloakVersionTargets
    • environmentVariables
    • themeName
    • startKeycloakOptions
    • themeVersion
    • postBuild
    • XDG_CACHE_HOME
    • kcContextExclusionsFtl
    • keycloakifyBuildDirPath
    • groupId
    • artifactId
    • Webpack specific options
      • projectBuildDirPath
      • staticDirPathInProjectBuildDirPath
      • publicDirPath
  • FAQ & HELP
    • 🤝Comunity resources
    • ⬆️Migration Guides
      • ⬆️v10->v11
      • ⬆️v9 -> v10
      • ⬆️CRA -> Vite
      • ⬆️v8 -> v9
      • ⬆️v7 -> v8
      • ⬆️v6 -> v7
      • ⬆️v6.x -> v6.12
      • ⬆️v5 -> v6
    • 😞Can't identify the page to customize?
    • 🤔How it Works
    • 😖Some values you need are missing from in kcContext type definitions?
    • ❓Can I use it with Vue or Angular
      • Angular
    • ⚠️Limitations
    • 🛑Errors Keycloak in Logs
    • 🙋How do I add extra pages?
    • 🤓Can I use react-hooks-form?
    • 🚀Redirecting your users to the login/register pages
    • 💟Contributing
    • 🍪Google reCaptcha and End of third-party Cookies
    • 🔖Accessing the Realm Attributes
  • ⭐Sponsors
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Configuration Options

kcContextExclusionsFtl

Was this helpful?

. To achieve this, Keycloakify creates a global kcContext object, which holds the necessary information for generating HTML pages.

This object contains no sensitive data—only the information that the Keycloak team considers essential for rendering the various login pages. Additionally, if you have custom plugins, such as , they may introduce additional values into this object.

If you'd like to prevent some values of the FreeMarker context from being forwarded to the client you can do it with the kcContextExclusionsFtl option.

Let's say in this example that we would like to exclude:

  • kcContext.keycloakifyVersion

  • kcContext.realm.actionTokenGeneratedByUserLifespanMinutes in the register.ftl page

  • kcContext.realm.idpVerifyAccountLinkActionTokenLifespanMinutes in the register.ftl page

This is how you would do it:

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { keycloakify } from "keycloakify/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        keycloakify({
            // ...
            kcContextExclusionsFtl: `
                <#if (
                    key == "keycloakifyVersion" &&
                    areSamePath(path, []) 
                )>
                    <#continue>
                </#if>
                <#if (
                    xKeycloakify.pageId == "register.ftl" &&
                    [
                        "actionTokenGeneratedByUserLifespanMinutes", 
                        "idpVerifyAccountLinkActionTokenLifespanMinutes"
                    ]?seq_contains(key) &&
                    areSamePath(path, ["realm"]
                )>
                    <#continue>
                </#if>
            `
        })
    ]
});

You can also provide a path to a .ftl file instead of inlining the ftl code in your vite.config.ts file.

kcContextExclusions.ftl
<#if (
    key == "keycloakifyVersion" &&
    areSamePath(path, []) 
)>
    <#continue>
</#if>
<#if (
    xKeycloakify.pageId == "register.ftl" &&
    [
        "actionTokenGeneratedByUserLifespanMinutes", 
        "idpVerifyAccountLinkActionTokenLifespanMinutes"
    ]?seq_contains(key) &&
    areSamePath(path, ["realm"]
)>
    <#continue>
</#if>
package.json
{
    "keycloakify": {
        // ...
        "kcContextExclusionsFtl": "./kcContextExclusions.ftl"
    }
}

For more detailed example you can refer to this section of the code that defines the the default exclusions:

More advanced modification of the kcContext

yarn add --dev patch-package

And edit the FreeMarker template that generates the KcContext in:

node_modules/keycloakify/src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl

You can then create a diff for your changes by running:

npx patch-package keycloakify

Then add a postinstall script to your package.json:

package.json
{
    "name": "keycloakify-starter",
    "scripts": {
        "postinstall": "patch-package",
        "dev": "vite",

The code that you provide will be injected .

If you feel limited by this option you can take ownership of the FreeMarker template that generates the kcContext. Do do this using the wonderfull .

📖
here
patch-package
Keycloakify shifts page generation from the backend to the client
keycloak-email-whitelisting
keycloakify/src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl at 0879ddba7c3e12ea5ffd0cbefd97fa9b8cf63f7e · keycloakify/keycloakifyGitHub
Logo
A typical kcContext for the register.ftl page