๐Ÿ”งAccessing the Server 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.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" }
            ]
        })
    ]
});

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

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

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 \
    docker-keycloak-with-theme

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"
                },
            }}
        />
    )
};