📥Importing your theme in Keycloak

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.

Custom login and account theme selected in the Keycloak Admin console

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.

Docker

Let's see how you would go about creating a Keycloak Docker image with your theme available.\

Extending Keycloak Themes with Keycloakify 🚀 The UI DawgThe UI Dawg

Checkout this great tutorial that explains it in great details

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

Helm

If you use Bitnami's Keycloak Helm chart you can leverage the initContainers parameter to load your theme.

Chart.yaml

apiVersion: v2
name: keycloak
version: 1.0.0
dependencies:
  - name: keycloak
    version: 18.3.4
    repository: oci://registry-1.docker.io/bitnamicharts

values.yaml

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.

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-*.jar.

Cloud-IAM

If you are utilizing a Keycloak instance managed by Cloud-IAM, importing themes and extensions is quite straightforward.

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!