my setup is as follows: we have a React App that uses keycloak dependencies

    "@react-keycloak/web": "^3.4.0",
    "keycloak-js": "^24.0.4",

with a NginX in front of it as a reverse proxy. The config to forward to the Keycloak via Nginx looks as follows:

      location /auth {
        proxy_pass https://my-keycloak.com;

        proxy_set_header    Host               $host;
        proxy_set_header    X-Real-IP          $remote_addr;
        proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Host   $host;
        proxy_set_header    X-Forwarded-Server $host;
        proxy_set_header    X-Forwarded-Port   $server_port;
        proxy_set_header    X-Forwarded-Proto  $scheme;
      }

The keycloak settings and more or less the default, “browser” for Browserflow, using a client with openid-connect protocol, accesstype public etc.

Problem

In the end it comes to the following scenario. When i open my react app at e.g. “https://example.com” i am required to login and will be forwarded to “https://my-keycloak.com/auth/realms…”

What i need is, that “my-keycloak.com” is masked to that if i enter my page, i’ll be forwarded to keycloak but the url in the browser still shows as “https://example.com/auth/realms…”

I tried different approachs like using “Frontend Url” in the Realm or a rewrite in the Nginx but nothing worked so far.

Thanks in advance,
Eric