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:
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 \
start --optimized
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"
},
}}
/>
)
};
Last updated
Was this helpful?