Environment Variables

Environment variables defined on the Keycloak server can be transferred to the theme. This allows for a degree of theme customization without necessitating a rebuild. This approach is particularly useful if multiple parties are reusing your theme. As an example, you can distribute a single .jar file to multiple customers, enabling them to modify certain aspect of the login page by defining specific environment variables.

Let's define two environnement variable:

Vite

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({
            // ...
            environmentVariables: [
                { name: "MY_APP_API_URL", default: "" },
                { name: "MY_APP_PALETTE", default: "dracula" }
            ]
        })
    ]
});

Webpack

We can then access the runtime value of thoses variables under kcContext.properties:

Accessing the value of the environement variable defined.

Now let's see how you can set the value of thoses environement variable on the Keycloak side:

Docker

docker run \
    -e KEYCLOAK_ADMIN=admin \
    -e KEYCLOAK_ADMIN_PASSWORD=admin \
    --env MY_APP_API_URL='https://api.my-org.com' \
    --env MY_APP_PALETTE='solaris'
    -p 8080:8080 \
    start --optimized

Helm

Bare Metal

To test locally, you can pass the environement variable to the start-keycloak CLI command:

MY_APP_PALETTE="solaris" MY_APP_API_URL="..." npx keycloakify start-keycloak

You can also create stories with specific ENV values:

export const Solaris: Story = {
    render: () => (
        <KcPageStory
            kcContext={{
                properties: {
                    MY_APP_PALETTE: "solaris"
                },
            }}
        />
    )
};