Blank page after clicking Admin Console

Configuring the server
1

Clicking on the admin console link on the main page successfully redirects to the /admin/master/console/ path, but only displays a blank white page.

I have the server running in production mode on a custom Docker container based in Debian. I am not behind a proxy and I am using port 8443 with a self-signed SSL cert.

I have tried adding the environment variables suggested here: https://groups.google.com/g/keycloak-user/c/vmBRKYmvFnM and it changed nothing.

Hoping someone can help.

2

Same issue for me but running keycloak 17.01 & java jdk 18 in edge mode behind apache reverse proxy with external SSL and localhost:8080 hosted on win 2019 server VM. From either localhost or external https link keycloak initially loads start page but shows a blank page, not an error, when clicking on admin console - page appears to refresh every 10 seconds (blank webpage code below). Admin user previously created in dev mode. Same behaviour if I remove reverse proxy and apply ssl certs directly to keycloak. Also tried jdk 17 and using IIS as reverse proxy. Tested in multiple browsers. Can’t see any errors in logs but blank web page code below as it is serving some html.

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/resources/c747z/admin/keycloak/img/favicon.ico">
<link href="/resources/c747z/common/keycloak/node_modules/patternfly/dist/css/patternfly.min.css" rel="stylesheet" />
<link href="/resources/c747z/common/keycloak/node_modules/patternfly/dist/css/patternfly-additions.min.css" rel="stylesheet" />
<link href="/resources/c747z/common/keycloak/node_modules/select2/select2.css" rel="stylesheet" />
<link href="/resources/c747z/common/keycloak/lib/angular/treeview/css/angular.treeview.css" rel="stylesheet" />
<link href="/resources/c747z/common/keycloak/node_modules/text-security/text-security.css" rel="stylesheet" />
<link href="/resources/c747z/admin/keycloak/css/styles.css" rel="stylesheet" />

<script type="text/javascript">
    var authServerUrl = 'https://localhost';
    var authUrl = 'http://localhost:8080';
    var consoleBaseUrl = '/admin/master/console/';
    var resourceUrl = '/resources/c747z/admin/keycloak';
    var masterRealm = 'master';
    var resourceVersion = 'c747z';
</script>

<!-- Minimized versions (for those that have one) -->
<script src="/resources/c747z/common/keycloak/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/resources/c747z/common/keycloak/node_modules/select2/select2.js" type="text/javascript"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular/angular.min.js"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular-resource/angular-resource.min.js"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular-route/angular-route.min.js"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular-cookies/angular-cookies.min.js"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular-translate/dist/angular-translate.min.js"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular-translate-loader-url/angular-translate-loader-url.min.js"></script>
<script src="/resources/c747z/common/keycloak/node_modules/angular-ui-select2/src/select2.js" type="text/javascript"></script>
<script src="/resources/c747z/common/keycloak/node_modules/autofill-event/autofill-event.js"></script>

<!-- Libraries not managed by yarn -->
<script src="/resources/c747z/common/keycloak/lib/angular/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="/resources/c747z/common/keycloak/lib/angular/treeview/angular.treeview.js"></script>
<script src="/resources/c747z/common/keycloak/lib/fileupload/angular-file-upload.min.js"></script>
<script src="/resources/c747z/common/keycloak/lib/filesaver/FileSaver.js"></script>
<script src="/resources/c747z/common/keycloak/lib/ui-ace/min/ace.js"></script>
<script src="/resources/c747z/common/keycloak/lib/ui-ace/ui-ace.min.js"></script>

<script src="http://localhost:8080/js/keycloak.js?version=c747z" type="text/javascript"></script>

<script src="/resources/c747z/admin/keycloak/js/app.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/controllers/realm.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/controllers/clients.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/controllers/users.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/controllers/groups.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/controllers/roles.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/loaders.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/services.js" type="text/javascript"></script>

<!-- Authorization -->
<script src="/resources/c747z/admin/keycloak/js/authz/authz-app.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/authz/authz-controller.js" type="text/javascript"></script>
<script src="/resources/c747z/admin/keycloak/js/authz/authz-services.js" type="text/javascript"></script>

    <span class="pficon pficon-ok" ng-show="notification.type == 'success'"></span>
    <span class="pficon pficon-info" ng-show="notification.type == 'info'"></span>
    <span class="pficon pficon-warning-triangle-o" ng-show="notification.type == 'warning'"></span>
    <span class="pficon pficon-error-circle-o" ng-show="notification.type == 'danger'"></span>
    <strong>{{notification.header}}</strong> {{notification.message}}
</div>
Loading...
3

I should mention, I am also using the newest version, 17.01

4

Hi
I had a similar problem with keycloak 17.0.1 running on docker.
My Dockerfile was similar to the one suggested in the docker documentation, having:
ENV KC_HOSTNAME=localhost:8443
Using the browser debug tools i saw that every 10 seconds or so, keycloak was trying to get https://localhost:8443:8443. I changed to:
ENV KC_HOSTNAME=localhost
And it worked

5

Sadly that’s not my issue here, hostname is set to only localhost and page being called is localhost:8080. Aside from hostname, only other conf settings are for the postgres db.

6

My config file has the hostname variable set without the port as well. Don’t think that’s the issue.

7

Oddly enough, I just fixed the issue by adding the port number to the hostname variable in the config file. It doesn’t work without adding the port

2 Likes
8

Just FYI, I was having the same issue with keycloak 18 in production mode using the official image, I had to add the port to the KC_HOSTNAME variable too. That solved it for me

9

I m facing the same issue , can you share your configurations. I’m Deploying keycloak18 in kubernetes. @luismr19

10

One can debug the issue relatively easy with F12 - debug console of the browser. One probably will see and request to something like https://127.0.0.1/something (given you are trying to bring it up on the local machine). There are 2 or 3 things to pay attention to: proper external hostname (including custom port) used to access keycloak from outside of the container and starting keycloak in dev mode. Dev mode will disable requirement for TLS (which you don’t have and need on local host). Here is my docker-compose.yaml, to start keycloak locally:

version: "3.8"
services:
  kc:
    build: "./"
    #image: quay.io/keycloak/keycloak:19.0.1
    #volumes:
    #  - "./package/build/target/providers:/opt/keycloak/providers:ro"
    ports:
      - "127.0.0.1:8780:8080"
      - "127.0.0.1:5105:5105"
    environment:
      KC_HOSTNAME:             "127.0.0.1"
      KC_HOSTNAME_PORT:        "8780"
      KEYCLOAK_ADMIN:          "admin"
      KEYCLOAK_ADMIN_PASSWORD: "admin"
      KC_DB_URL_HOST:          "db"
      KC_DB_URL_PORT:          "3306"
      KC_DB_URL_DATABASE:      "keycloak"
      KC_DB_USERNAME:          "keycloak"
      KC_DB_PASSWORD:          "keycloak"
      KC_LOG_LEVEL:            "info"
      KC_PROXY:                "edge"
      KC_FEATURES:             "token-exchange"
      KC_FEATURES_DISABLED:    "admin2"
      EXTERNAL_IP:             ""
      INITIAL_HOSTS:           ""
      JAVA_OPTS: "-Xms2048m -Xmx8192m -XX:MetaspaceSize=128M -XX:MaxMetaspaceSize=512M -Djgroups.bind.port=7800 -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:5105"
    depends_on:
      - "db"
    entrypoint: ["/opt/keycloak/bin/kc.sh", "start-dev"]

  db:
    image: "docker.io/mariadb:10.6"
    ports:
      - "127.0.0.1:3306:3306"
    environment:
      MARIADB_DATABASE: sso
      MARIADB_ALLOW_EMPTY_ROOT_PASSWORD: true
    volumes:
      - "./testing/db/:/docker-entrypoint-initdb.d:ro"
11

Hi,
I am facing the same issue while running keycloak:latest (19.0.1) docker container with external postgres database. Able to browse keycloak landing page on public_ip:8080 and recieving blank page for Adminstration Console URL: public_ip:8080/admin/master/console/

Accessing keycloak using VM’s public ip, host and docker port are mapped to 8080:8080

Command: docker run --name optimized_keycloak -p 8080:8080 -e KC_HOSTNAME=localhost -e KC_HOSTNAME_PORT=8080 -e KEYCLOAK_ADMIN=username -e KEYCLOAK_ADMIN_PASSWORD=password -e PROXY_ADDRESS_FORWARDING=false keycloak start-dev --hostname-strict-https=false

Anyone was able to resolve this issue?

12

I’ve same issue using KC 19.0.3.

13

it should be true but still blank

14

I am using the Quarkus operator. After trying a lot of things, including the port number in hostname solved it for me: Blank page after clicking Admin Console - #7 by dcrouchelli

Now I can see the admin console login page:

Screenshot 2022-10-08 at 22-02-39 Sign in to Keycloak
Screenshot 2022-10-08 at 22-02-39 Sign in to Keycloak1032Ă—706 28.8 KB

Using the Keycloak application manifest provided here example-kc.yaml Basic Keycloak Deployment - Keycloak, I had to change
hostname: test.keycloak.org
to
hostname: localhost:8443.

It was not necessary to set PROXY_ADDRESS_FORWARDING=true, KC_PROXY=edge, or other environment variables. I have failed to find the way to set these environment variables in the Keycloak application container when using the Quarkus operator. Have asked a question here about this: Quarkus Kubernetes operator: how to set environment variables in application container (not operator container)? - Stack Overflow

15

No luck adding localhost:port, keycloak is taking the port from variable KC_HOSTNAME_PORT=8080
Getting this error message while loading step1.html file:

Request URL: http://localhost:8080/realms/master/protocol/openid-connect/3p-cookies/step1.html?version=f5656
Referrer Policy: no-referrer
Provisional headers are shown
Learn more
sec-ch-ua: “Chromium”;v=“106”, “Google Chrome”;v=“106”, “Not;A=Brand”;v=“99”
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: “Windows”
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

16

changing the hostname in keycloak.conf from hostname=server to hostname=server.company.com worked for me