How to use a local UI DevServer with a remote BFF?

[oravecz]

By Developer mode, I mean I am developing a local web application, but my BFF server is running remotely as are the Keyvloak service and of course, the resource service.

My all works fine once it is deployed to the server, but local development has been a no-go so far. I have tried multiple ideas of running nginx locally to unify the host origin for nealry all services (besides Keycloak). Keycloak is configured to redirect to the BFF server using its hostname, so I lose cookie information on the last leg of the OIDC dance.

I'm wondering if there are methods of developing locally using BFF which some developers are successfully (and hopefully - painlessly) using to be able to develop and test without having to deploy client code to the server. I don't have the option of running all of the services I need locally in containers.

Is there a mechanism to generate a token client-side - programmatically? I realize this isn't secure, but I'm talking about a dev environment.

[oravecz]

Imagine you are running your Docker container behind a remote host URL (like baeldung.example.org) with your Keycloak service at keycloak.example.org.

Is there some means of running the React-UI locally in such a manner that it can use the remote host to perform its non-frontend functionality?

The problems I run into are related to cookie issues caused by origin mismatch between my localhost and the bff endpoints.

[ch4mpy]

The problems I run into are related to cookie issues caused by origin mismatch between my localhost and the bff endpoints

That's precisely the purpose of the reverse proxy. The BFF's session cookies are, and should remain, SameSite. Serving both the UI and the BFF with the same origin (a reverse proxy) ensures that requests satisfy SameSite policies.

From the section "3.1. System Overview":

there’s a single point of contact for at least the BFF and the SPA assets: a reverse-proxy

So, when "running the React-UI locally", you should either:

• configure the DevServer built-in proxy. Details depend on the React framework you're using. For instance, if using Next.js you could use the "rewrites" feature, with vanilla React, you'd probably configure a setupProxy.js file, etc.
• use a dedicated reverse proxy in front of the React DevServer and the BFF
• configure Spring Cloud Gateway with a route to the DevServer without the TokenRelay= filter: the BFF itself proxies requests to the UI DevServer. This requires this BFF to run locally, but nothing prevents it from routing requests to remote resource servers.

As shown in the illustration of the Baeldung article section linked above, the option used in the companion project is the 2nd one: an Nginx running on port 7080. Pointing the browser to it makes the requests to the React UI (port 4203) & the BFF (port 7081) have the same origin (localhost:7080). In the case of a remote BFF, only the configuration of this local Nginx proxy would change.