Wiki.js and KeyCloak with Docker

[GFreericks]

Hi everyone,

I have scrolled some pages about how to do the config, but I'm not even near to a solution.

Let's begin at the Start, so that everyone should be able to recreate this (hopefully):

1. I have installed "Docker Desktop" to run the Wiki.
2. I create a folder, where all the Docker-Related files should be D:\Docker\
3. I create a subfolder D:\Docker\Wiki and create the file "docker-compose.yaml".

version: "3"
services:

  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: wiki
      POSTGRES_PASSWORD: wikijsrocks
      POSTGRES_USER: wikijs
    logging:
      driver: "none"
    restart: unless-stopped
    volumes:
      - db-data:/var/lib/postgresql/data

  wiki:
    image: ghcr.io/requarks/wiki:2
    depends_on:
      - db
    environment:
      DB_TYPE: postgres
      DB_HOST: db
      DB_PORT: 5432
      DB_USER: wikijs
      DB_PASS: wikijsrocks
      DB_NAME: wiki
    restart: unless-stopped
    ports:
      - "80:3000"

volumes:
  db-data:
    driver: local

4. I create a subfolder in my Docker-Folder for D:\Docker\KeyCloak with the "docker-compose.yaml".

version: '3.7'

services:
  postgres:
    image: postgres:16.2
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: keycloak_db
      POSTGRES_USER: keycloak_db_user
      POSTGRES_PASSWORD: keycloak_db_user_password
    networks:
      - keycloak_network

  keycloak:
    image: quay.io/keycloak/keycloak:26.0.5
    command: start
    environment:
      KC_HOSTNAME: localhost
      KC_HOSTNAME_PORT: 8080
      KC_HOSTNAME_STRICT_BACKCHANNEL: false
      KC_HTTP_ENABLED: true
      KC_HOSTNAME_STRICT_HTTPS: false
      KC_HEALTH_ENABLED: true
      KEYCLOAK_ADMIN: admin
      KEYCLOAK_ADMIN_PASSWORD: password
      KC_DB: postgres
      KC_DB_URL: jdbc:postgresql://postgres/keycloak_db
      KC_DB_USERNAME: keycloak_db_user
      KC_DB_PASSWORD: keycloak_db_user_password
    ports:
      - 8080:8080
    restart: always
    depends_on:
      - postgres
    networks:
      - keycloak_network

volumes:
  postgres_data:
    driver: local

networks:
  keycloak_network:
    driver: bridge
    

Remarks: I tried to use an environment-file, but it does not work, so I put in the "password" as plaintext.
5) In Docker Desktop I start the KeyCloak and the Wiki.js from the Terminal with:
D:
cd D:\Docker\Wiki
docker compose up -d
cd D:\Docker\KeyCloak
docker compose up -d
6) Now I can login to KeyCloak on "http://localhost:8080/" with "admin" and "password".
7) Next I create a Realm and name it "MyRealm".
8) In this realm I create a Client "wikijs".
9) Now one more tab for Wiki.js. It is accessable from "http://localhost". I create a Admin-Account and change the site-url to "http://localhost".
10) I go back to KeyCloak and set "Client authentication" in the "Capability Config"-Page to "On". Also I uncheck "Direct access grant".
11) In the "Login settings"-page for the wikijs-Client in the KeyCloak-Administration I fill the Root-URL with "http://localhost/" for the Wiki.
12) Back in the Wiki.js I installed the German Language-Pack.
13) I go to the authentification-page and add the strategy "Keycloak".
14) In KeyCloak where I create the Client I fill in the "Callback URL / Redirect URI" from the Wiki.js-Config-Page in the "Valid redirect URIs".
15) I saved the Client in KeyCloak and copy the "Client Secret" from KeyCloak to fill it in Wiki.js.
16) In the Keycloak-strategy-page of Wiki.js I fill in the following:
Host: http://localhost:8080
Realm: MyRealm
Client ID: wikijs
Client Secret: <<The value I copy in step 15>>
17) In KeyCloak I go to "Realm settings" and click on the "OpenID Endpoint Configuration"-Link.
Here I found some values I have to copy to Wiki.js:
The strcuture is: Config-file -> Wiki.js-Field (value)
authorization_endpoint -> Authorization Endpoint URL (http://localhost:8080/realms/MyRealm/protocol/openid-connect/auth)
token_endpoint -> Token Endpoint URL (http://localhost:8080/realms/MyRealm/protocol/openid-connect/token)
userinfo_endpoint -> User Info Endpoint URL (http://localhost:8080/realms/MyRealm/protocol/openid-connect/userinfo)
18) In Wiki.js I fill in the values from step 17 and save it.
19) As the next step I create a user "wikiuser" in KeyCloak, fill in an E-Mail, "First name", "Last name" and check the "Email verified".
20) I set the password and set "Temporary" to false.
21) I add the group "WikiGroup" and add the user "wikiuser"
22) In KeyCloak I add the role "RoleWiki" to the Client and then to the user "wikiuser".

When I now logout from Wiki.js and try to login with KeyCloak (instead of "Local"), it shows the Login for KeyCloak, but when enter the login for "wikiuser" I got "Failed to obtain access token".

And there I got stuck. I tried some other comfigurations, but this is the best solution I got.

I hope there is someone out there who have done this thousend times and easily found a solution on this one.
Maybe the description of the problem is a bit long, but I hope someone is able to reproduce my problem this way.

Greetings from germany
Gerit

[GFreericks]

Solution: You have to use the IP-Address instead of "localhost".
First "localhost" refers to the same Comtainer, so there is no connection between KeyCloak and Wiki.js.
But when I use the hostname of my host-machine it doesn't work (maybe because of the "_" underscore, maybe mixing upper and lowercase is the problem).
Don't forget the docker-compose.yaml for keycloak. There is the value "KC_HOSTNAME" which should not be "localhost" but the IP-Address.

Maybe someone will find this helpful, someday.

Greetings from germany
Gerit