Now that you have your theme as a .jar file, let's see how you can import it in Keycloak so that it appears in the dropdown list for selecting theme in the Keycloak Admin console.
.png)
Custom login and account theme selected in the Keycloak Admin console
{% hint style="info" %}
Attention: Many people miss this but Keycloakify provides a way to test your theme in a local container just by running a single command.
You just have to follow the instruction printed in the console after running running the build-keycloak-theme command!
Video tutorial.
{% endhint %}
{% tabs %} {% tab title="Docker" %} Let's see how you would go about creating a Keycloak Docker image with your theme available.\
{% embed url="https://willwill96.github.io/the-ui-dawg-static-site/en/keycloakify/#integrating-keycloak-and-keycloakify-jar" %} Checkout this great tutorial that explains it in great details {% endembed %}
cd ~/github
mkdir docker-keycloak-with-theme
cd docker-keycloak-with-theme
git clone https://github.com/keycloakify/keycloakify-starter
cd keycloakify-starter
# Just to make sure these instructions remain relevant in the future
# We pin the version of the starter we are using.
git checkout 620525fed69b37f8790570594c0b19ec03ce962a
cd ..
cat << EOF > ./Dockerfile
FROM node:18 as keycloakify_jar_builder
RUN apt-get update && \
apt-get install -y openjdk-17-jdk && \
apt-get install -y maven;
COPY ./keycloakify-starter/package.json ./keycloakify-starter/yarn.lock /opt/app/
WORKDIR /opt/app
RUN yarn install --frozen-lockfile
COPY ./keycloakify-starter/ /opt/app/
RUN yarn build-keycloak-theme
FROM quay.io/keycloak/keycloak:latest as builder
WORKDIR /opt/keycloak
# NOTE: If you are using a version of Keycloak prior to 23 you must use
# the retrocompat-*.jar. Look inside your target directory there is two jars file
# one *.jar and the other retrocompat-*.jar
COPY --from=keycloakify_jar_builder /opt/app/dist_keycloak/target/keycloakify-starter-keycloak-theme-6.0.2.jar /opt/keycloak/providers/
RUN /opt/keycloak/bin/kc.sh build
FROM quay.io/keycloak/keycloak:latest
COPY --from=builder /opt/keycloak/ /opt/keycloak/
ENV KC_HOSTNAME=localhost
ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start-dev"]
EOF
docker build -t docker-keycloak-with-theme .
docker run \
-e KEYCLOAK_ADMIN=admin \
-e KEYCLOAK_ADMIN_PASSWORD=admin \
--env MY_ENV_VARIABLE='Value of my env variable' \
-p 8080:8080 \
docker-keycloak-with-theme
{% endtab %}
{% tab title="Helm" %} If you use Bitnami's Keycloak Helm chart you can leverage the initContainers parameter to load your theme.
{% code title="Chart.yaml" %}
apiVersion: v2
name: keycloak
version: 1.0.0
dependencies:
- name: keycloak
version: 18.3.4
repository: oci://registry-1.docker.io/bitnamicharts{% endcode %}
global:
postgresql:
auth:
postgresPassword: "$CHANGEME1"
username: "keycloak"
password: "$CHANGEME2"
database: "keycloak"
keycloak:
auth:
adminUser: keycloak
adminPassword: $CHANGEME3
production: true
tls:
enabled: false
autoGenerated: false
proxy: edge
httpRelativePath: "/auth/"
#postgresql:
# primary:
# nodeSelector:
# infra: "true"
# tolerations:
# - key: "infra"
# operator: "Exists"
replicaCount: 1
#nodeSelector:
# infra: "true"
#tolerations:
# - key: "infra"
# operator: "Exists"
#resources:
# requests:
# cpu: "200m"
# memory: "512Mi"
# limits:
# cpu: "4"
# memory: "16Gi"
ingress:
# If `true`, an Ingress is created
enabled: true
#ingressClassName: nginx
# Ingress annotations
annotations:
## Resolve HTTP 502 error using ingress-nginx:
## See https://www.ibm.com/support/pages/502-error-ingress-keycloak-response
nginx.ingress.kubernetes.io/proxy-buffer-size: 128k
# List of rules for the Ingress
hostname: "auth.lab.$DOMAIN"
# TLS configuration
extraTls:
- hosts:
- auth.lab.$DOMAIN
extraStartupArgs: "--features=preview --log-level=org.keycloak.events:debug"
extraEnvVars:
# See: https://docs.keycloakify.dev/build-options#extrathemeproperties
- name: MY_ENV_VARIABLE
value: "value of MY_ENV_VARIABLE"
initContainers: |
- name: realm-ext-provider
image: curlimages/curl
imagePullPolicy: IfNotPresent
command:
- sh
args:
- -c
- |
# NOTE: If you are using a version of Keycloak prior to 23 you must
# use the retrocompat-*.jar.
# Look in your target directory there should be two .jar files
# *.jar and retrocompat-*.jar
# Replace USER and PROJECT.
curl -L -f -S -o /extensions/keycloakify-starter.jar https://github.com/USER/PROJECT/releases/latest/download/keycloak-theme.jar
volumeMounts:
- name: extensions
mountPath: /extensions
extraVolumeMounts: |
- name: extensions
mountPath: /opt/bitnami/keycloak/providers
extraVolumes: |
- name: extensions
emptyDir: {}
externalDatabase:
host: keycloakv3-postgresql
port: 5432
user: keycloak
password: $CHANGEME2
database: keycloak
Read this section of the starter project readme to learn how to get GitHub Action to publish your theme's JAR as assets of your GitHub release.
{% endtab %}
{% tab title="Bare metal" %}
What you need to know is that your keycloak-theme.jar should be placed in the provider directory of your Keycloak (e.g: /opt/keycloak/providers)
After that you should run bin/kc.sh build (e.g: bash /opt/keycloak/bin/kc.sh build)
Then you can start your Keycloak server, your theme should be available in it!
If you are using a version of Keycloak prior to 23 you must use the retrocompat-*.jar1.
{% endtab %}
{% tab title="Cloud-IAM" %} If you are utilizing a Keycloak instance managed by Cloud-IAM, importing themes and extensions is quite straightforward.
{% hint style="info" %} Uploading custom JAR files is only available with paid plans.
If you decide to subscribe, please consider using the code keycloakify5.
This code will provide you with a 5% discount, and we will also receive 5%, which greatly supports our project! {% endhint %}
{% embed url="https://app.tango.us/app/embed/e22aec8f-d7cf-44a7-bfe7-9f92630aa7eb" %} {% endtab %} {% endtabs %}
Footnotes
-
When you run yarn build-keycloak-theme in the dist_keycloak/build directory two jar files are create. *.jar and retrocompat-*.jar. ↩