White Screen after login with Azure

[Alexander-ac]

Issue submitter TODO list

• I've looked up my issue in FAQ
• I've searched for an already existing issues here
• I've tried running main-labeled docker image and the issue still persists there
• I'm running a supported version of the application which is listed here

Describe the bug (actual behavior)

Dear team, we are currently trying to get kafka-ui running in kubernetes.
We want to perform authentication via Azure.
This works so far, we see the following log lines:

2024-05-02 15:02:37,811 DEBUG [reactor-http-epoll-4] i.k.u.s.r.e.OauthAuthorityExtractor: Token's groups: [admin,veib]
2024-05-02 15:02:37,813 DEBUG [reactor-http-epoll-4] i.k.u.s.r.e.OauthAuthorityExtractor: Matched roles: [admin]
2024-05-02 15:02:55,303 DEBUG [parallel-1] i.k.u.s.ClustersStatisticsScheduler: Start getting metrics for kafkaCluster: test
2024-05-02 15:02:55,953 DEBUG [parallel-1] i.k.u.s.ClustersStatisticsScheduler: Metrics updated for cluster: test

To us, it looks like azure response is being evaluated by Kafka-UI, but the page doesn't display afterwards. So you only see a white background.

Can you help us.

With kind regards

Alex

Expected behavior

No response

Your installation details

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: nginx
  name: kafka-ui
  namespace: monitoring
spec:
  rules:
    - host: xxxxxxxxxxxxx
      http:
        paths:
          - backend:
              service:
                name: kafka-ui
                port:
                  number: 80
            path: /kafka-ui
            pathType: Prefix
---
apiVersion: v1
data:
  roles.yaml: |
    rbac:
      roles:
        - name: "admin"
          clusters:
            - test
          subjects:
            - provider: oauth
              type: role
              value: "admin"
          permissions:
            - resource: applicationconfig
              actions: all
            - resource: clusterconfig
              actions: all
            - resource: topic
              value: ".*"
              actions: all
kind: ConfigMap
metadata:
  name: kafka-ui-configmap
  namespace: monitoring
---
  replicas: 1
  selector:
    matchLabels:
      app.kubernetes.io/name: kafka-ui
  template:
    metadata:
      name: kafka-ui
      labels:
        app.kubernetes.io/name: kafka-ui
    spec:
      serviceAccountName: kafka-ui
      securityContext:
        runAsGroup: 65534
        runAsNonRoot: true
        runAsUser: 65534
      imagePullSecrets:
        - name: artifactory-docker-cred
      volumes:
      - configMap:
          name: kafka-ui-configmap
        name: roles-volume
      containers:
        - name: kafka-ui
          image: xxxxxxx/kafbat/kafka-ui:latest
          imagePullPolicy: IfNotPresent
          env:
            - name: LOGGING_LEVEL_COM.PROVECTUS.KAFKA.UI.SERVICE.RBAC.EXTRACTOR
              value: trace
            - name: LOGGING_LEVEL_ORG.SPRINGFRAMEWORK.SECURITY
              value: debug
            - name: KAFKA_CLUSTERS_0_NAME
              value: test
            - name: KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS
              value: kafka-test.xxxxxxx:9096
            - name: KAFKA_CLUSTERS_0_PROPERTIES_SECURITY_PROTOCOL
              value: SASL_SSL
            - name: KAFKA_CLUSTERS_0_PROPERTIES_SASL_MECHANISM
              value: SCRAM-SHA-512
            - name: KAFKA_CLUSTERS_0_PROPERTIES_SASL_JAAS_CONFIG
              valueFrom:
                secretKeyRef:
                  key: kafka_ui_jaas_config
                  name: kafka-ui-secret
            - name: SERVER_SERVLET_CONTEXT_PATH
              value: /kafka-ui
            - name: AUTH_TYPE
              value: OAUTH2
            - name: AUTH_OAUTH2_CLIENT_AZURE_PROVIDER
              value: azure
            - name: AUTH_OAUTH2_CLIENT_AZURE_CLIENTID
              value: xxxxxxxxxxxxxxxxxxxxx
            - name: AUTH_OAUTH2_CLIENT_AZURE_CLIENTSECRET
              value: xxxxxxxxxxxxxxxxxxxxx
            - name: AUTH_OAUTH2_CLIENT_AZURE_SCOPE
              value: openid
            - name: AUTH_OAUTH2_CLIENT_AZURE_USER-NAME-ATTRIBUTE
              value: name
            - name: AUTH_OAUTH2_CLIENT_AZURE_ISSUERURI
              value: https://login.microsoftonline.com/xxxxxxxxxxxxx/v2.0
            - name: AUTH_OAUTH2_CLIENT_AZURE_CUSTOM-PARAMS_TYPE
              value: oauth
            - name: AUTH_OAUTH2_CLIENT_AZURE_CUSTOM-PARAMS_ROLES-FIELD
              value: roles
            - name: SPRING_CONFIG_ADDITIONAL-LOCATION
              value: /etc/kafkaui/roles.yaml 
          ports:
            - name: http
              containerPort: 8080
              protocol: TCP
          livenessProbe:
            httpGet:
              path: /kafka-ui/actuator/health
              port: http
            initialDelaySeconds: 60
            periodSeconds: 30
            timeoutSeconds: 10
          readinessProbe:
            httpGet:
              path: /kafka-ui/actuator/health
              port: http
            initialDelaySeconds: 60
            periodSeconds: 30
            timeoutSeconds: 10
          resources:
            limits:
              cpu: 0.6
              memory: 1500Mi
            requests:
              cpu: 100m
              memory: 1024Mi
          securityContext:
            allowPrivilegeEscalation: false
            capabilities:
              drop:
              - ALL
            readOnlyRootFilesystem: false
            runAsGroup: 65534
            runAsNonRoot: true
            runAsUser: 65534
          volumeMounts:
            - mountPath: /etc/kafkaui
              name: roles-volume
              readOnly: true
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: nginx
  name: kafka-ui
  namespace: monitoring
spec:
  rules:
    - host: xxxxxxxxxxxxx
      http:
        paths:
          - backend:
              service:
                name: kafka-ui
                port:
                  number: 80
            path: /kafka-ui
            pathType: Prefix
---
apiVersion: v1
data:
  roles.yaml: |
    rbac:
      roles:
        - name: "admin"
          clusters:
            - test
          subjects:
            - provider: oauth
              type: role
              value: "admin"
          permissions:
            - resource: applicationconfig
              actions: all
            - resource: clusterconfig
              actions: all
            - resource: topic
              value: ".*"
              actions: all
kind: ConfigMap
metadata:
  name: kafka-ui-configmap
  namespace: monitoring
---

Steps to reproduce

Start application
Start login process with azure

Screenshots

No response

Logs

No response

Additional context

No response

[github-actions]

Hi Alexander-ac! 👋

Welcome, and thank you for opening your first issue in the repo!

Please wait for triaging by our maintainers.

As development is carried out in our spare time, you can support us by sponsoring our activities or even funding the development of specific issues.
Sponsorship link

If you plan to raise a PR for this issue, please take a look at our contributing guide.

[Haarolean]

Hi can you take a look at your browser's dev console for the errors?

[Alexander-ac]

Unfortunately, nothing can be seen under the Dev Console.
All you can see is the URL in the browser:

https://test.xxxxxx/kafka-ui/login/oauth2/code/azure?code=0.ASEAnC2noeZJbU-a9lqvoRg7_cCi9itqla9FiCgZcPdRUwQhAPY.AgABBAIAA.....

As if the browser was stuck in the load loop.

[Alexander-ac]

Yesterday I experimented with Keycloak and WebUI locally on my computer. I built the whole thing using Docker and simulated it without using reverse proxy. And look, it works! So I strongly suspect that the cause of the problem is the reverse proxy settings.

Can someone tell me what I'm doing wrong with the Ingress settings?

[Alexander-ac]

I think I have now found the real reason for the problem. If I remove the SERVER_SERVLET_CONTEXT_PATH variable, the forwarding works properly. And the WEB-UI interface appears.

[Haarolean]

So is it solved? Please comment here if there's anything else

[Alexander-ac]

I have found the workaround for the problem.
Of course it's not a real solution to the problem. I would like to use the prefix. But it doesn't work! Namely if you want to use AzureAd or Outh as authentication together with the prefix.
In my opinion the problem still exists and needs to be fixed. The whole thing can be recreated with Docker and Keycloak.

[Haarolean]

@Alexander-ac can you provide a minimal reproducible example then? As you mentioned, a docker compose with keycloak would work. Feel free to attach even the volume contents for the keycloak setup.

[kapybro]

Further user feedback is requested. Please reply within 7 days or we might close the issue.

[Alexander-ac]

version: '2'
services:
  kafbat-ui:
    container_name: kafkaui
    image: ghcr.io/kafbat/kafka-ui:latest
    ports:
      - 8099:8080
    environment:
      KAFKA_CLUSTERS_0_NAME: test
      KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS: 192.168.1.12:19092
      AUTH_TYPE: "OAUTH2"
      AUTH_OAUTH2_CLIENT_KEYCLOCK_CLIENTID: kafkaui
      AUTH_OAUTH2_CLIENT_KEYCLOCK_SCOPE: "openid"
      AUTH_OAUTH2_CLIENT_KEYCLOCK_ISSUER-URI: "http://192.168.1.12:8089/auth/realms/Cinnamon"
      AUTH_OAUTH2_CLIENT_KEYCLOCK_USER-NAME-ATTRIBUTE: "preferred_username"
      AUTH_OAUTH2_CLIENT_KEYCLOCK_CLIENT-NAME: "keycloak"
      AUTH_OAUTH2_CLIENT_KEYCLOCK_PROVIDER: "keycloak"
      SERVER_SERVLET_CONTEXT_PATH: "/ui"
      #AUTH_OAUTH2_CLIENT_KEYCLOAK_CLIENTSECRET: AZ8QVYRmNRaJMNE8UijQCWMWUEkPNgtQ
      AUTH_OAUTH2_CLIENT_KEYCLOCK_CUSTOM-PARAMS_TYPE: "oauth"
      AUTH_OAUTH2_CLIENT_KEYCLOCK_CUSTOM-PARAMS_ROLES-FIELD: "realm_roles"
      LOGGING_LEVEL_COM.PROVECTUS.KAFKA.UI.SERVICE.RBAC.EXTRACTOR: "trace"
      LOGGING_LEVEL_ORG.SPRINGFRAMEWORK.SECURITY: "debug"
      SPRING_CONFIG_ADDITIONAL-LOCATION: "/roles.yaml"
    volumes:
      - /home/alex/kafkaui/roles.yaml:/roles.yaml

  Keycloak:
    image: quay.io/keycloak/keycloak:22.0.5
    command: ['start-dev']
    environment:
      KC_DB: postgres
      KC_DB_URL_DATABASE: keycloak
      KC_DB_SCHEMA: public
      KC_DB_URL: jdbc:postgresql://postgres/keycloak

      KC_DB_USERNAME: keycloak
      KC_DB_PASSWORD: password

      KEYCLOAK_ADMIN: admin
      KEYCLOAK_ADMIN_PASSWORD: password

      KC_HTTP_RELATIVE_PATH: /auth
    ports:
      - "8089:8080" # Externe-Portnummer:Interne-Portnummer

  postgres:
    image: postgres
    container_name: postgres
    environment:
      POSTGRES_DB: keycloak
      POSTGRES_USER: keycloak
      POSTGRES_PASSWORD: password

    zookeeper:
    image: confluentinc/cp-zookeeper:7.3.0
    container_name: zookeeper
    environment:
      ZOOKEEPER_CLIENT_PORT: 2181
      ZOOKEEPER_TICK_TIME: 2000
    ports:
      - 2181:2181

  broker:
    image: confluentinc/cp-kafka:7.3.0
    container_name: kafka
    ports:
    # To learn about configuring Kafka for access across networks see
    # https://www.confluent.io/blog/kafka-client-cannot-connect-to-broker-on-aws-on-docker-etc/
      - "19092:19092"
    depends_on:
      - zookeeper
    environment:
      KAFKA_BROKER_ID: 1
      KAFKA_ZOOKEEPER_CONNECT: 'zookeeper:2181'
      KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: PLAINTEXT:PLAINTEXT,PLAINTEXT_INTERNAL:PLAINTEXT,CONNECTIONS_FROM_HOST:PLAINTEXT
      KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://localhost:9092,PLAINTEXT_INTERNAL://broker:29092,CONNECTIONS_FROM_HOST://192.168.1.12:19092
      KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
      KAFKA_TRANSACTION_STATE_LOG_MIN_ISR: 1
      KAFKA_TRANSACTION_STATE_LOG_REPLICATION_FACTOR: 1

Roles:

rbac:
      roles:
        - name: "admin"
          clusters:
            - test
          subjects:
            - provider: oauth
              type: role
              value: "admin"
          permissions:
            - resource: applicationconfig
              actions: all

            - resource: clusterconfig
              actions: all

            - resource: topic
              value: ".*"
              actions: all

            - resource: consumer
              value: ".*"
              actions: all

            - resource: schema
              value: ".*"
              actions: all

            - resource: connect
              value: ".*"
              actions: all

            - resource: ksql
              actions: all

            - resource: acl
              actions: [ view ]

Is it enough?

[kapybro]

Thanks for the additional feedback! We'll get back to your issue soon.

[Haarolean]

Unable to resolve Configuration with the provided Issuer of "http://keycloak:8080/auth/realms/Cinnamon"
Can you please provide a dump of keycloak volume contents?

[kapybro]

Further user feedback is requested. Please reply within 7 days or we might close the issue.

[kapybro]

No feedback received within 7 days. Auto closing.

[Haarolean]

A docker-compose example with RBAC and keycloak: https://github.com/kafbat/ui-config-examples/tree/main/rbac-keycloak

[levanvunam]

I have same problem and my url is sth like: https://abc.com/kafka
If I go to the url with / at the end like https://abc.com/kafka/ the login will forward correctly and work

[nnellanspdl]

Adding my name to the list.

If I go to https://myurl/mypath (without trailing slash):

• I get prompted for Azure login
• After signing in, I get redirected to https://myurl/mypath/login/oauth2/azure?code=
• It's frozen at this point

If I go to https://myurl/mypath/ (with trailing slash):

• I get prompted for Azure login
• After signing in, I get redirected to https://myurl/mypath/
• The UI loads

[Haarolean]

We can reopen this if a minimal reproducible example will be provided, in a form of a docker compose with a simple reverse proxy like nginx.

[nnellanspdl]

I was able to get it to work by using the following values for the Helm chart. This is for Nginx Ingress controller setups.

Basically, I'm taking the path and rewriting it to always have a trailing slash /

I feel this is more of a workaround than an actual solution. But, it appears to work okay, nonetheless.

ingress:
  enabled: true
  annotations:
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /kafka-ui/$2
  host: 'myHostName'
  path: '/kafka-ui(/|$)(.*)'