Keycloak with Zuul and Angular App


Currently this is my implementation:

  1. Angular webapp hosted on a port (e.g 4200) - Angular app with keycloak-angular dependency.
    2.Microservices deployed on various ports
    3.Keycloak server configured and deployed (e.g 8180) - Standalone server configured
    4.Zuul proxy hosted on a port (e.g 4099) - Default zuul filters and routes configured in properties.

In the above scenario, all the backend microservices and angular webapp are sitting behind zuul that acts as a basic proxy.
Zuul routes are configured accordingly and everything works via the same port(4099).

However I want to add keycloak authentication and authorization. Hence I have configured keycloak with 2 clients, one for UI and one for backend services.
The requirement is that the url which is used should be the same as zuul, hence I have configured keycloak auth server url in zuul.
e.g zuul.routes.auth.url=http://{server_ip}:8180/auth/

Also in the angular app I have used keycloak-angular and configured accordingly-
await keycloak.init({
config: {
url: ‘/auth/’,
realm: ‘{realm_id}’,
clientId: ‘{client_id}’
initOptions: {
onLoad: ‘login-required’,
checkLoginIframe: false
enableBearerInterceptor: true,
bearerExcludedUrls: [],
bearerPrefix: ‘Bearer’
You will notice that in the url I have only mentioned the path and not the complete URL. This is because I want the angular app which is running in zuul to redirect to the keycloak login page using zuul.

Now onto the runtime observations.
When I access the angular app as localhost:4099/app , it redirects to localhost:4099/auth/… and shows me keycloak login screen. This is as expected. However when i submit my username and password, it redirects me to the original keycloak URL i.e http:{server_ip}/auth… and shows that login has failed.
When I observe the network calls, I see that keycloak is giving a Bad Request for the call /authenticate. After observing with non-zuul flow which works successfully, I see that /authenticate requires a cookie which is set in the request header. While using zuul this cookie is absent.

My question is am I missing something and does keycloak provide support with zuul.

Thanks in advance,