๐ง Accessing the Server Environment VariablesEnvironment 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 Webpack
Copy 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" }
]
})
]
});
Copy {
"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 Helm Bare Metal
Copy 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
Copy keycloak:
initContainers: |
- name: realm-ext-provider
image: curlimages/curl
imagePullPolicy: IfNotPresent
command :
- sh
args:
- -c
- |
# Replace USER and PROJECT.
curl -L -f -S -o /extensions/keycloak-theme.jar https://github.com/USER/PROJECT/releases/latest/download/keycloak-theme-for-kc-24.jar
volumeMounts:
- name: extensions
mountPath: /extensions
extraVolumeMounts: |
- name: extensions
mountPath: /opt/bitnami/keycloak/providers
extraVolumes: |
- name: extensions
emptyDir: {}
extraEnv: |
- name: MY_APP_API_URL
value: 'https://api.my-org.com'
- name: MY_APP_PALETTE
value: 'solaris'
To test locally, you can pass the environement variable to the start-keycloak CLI command:
Copy MY_APP_PALETTE = "solaris" MY_APP_API_URL = "..." npx keycloakify start-keycloak
You can also create stories with specific ENV values:
Copy export const Solaris : Story = {
render : () => (
< KcPageStory
kcContext = {{
properties : {
MY_APP_PALETTE : "solaris"
} ,
}}
/>
)
};
Last updated 4 months ago