Separating UI and BFF

[teate]

I've been trying to implement the BFF like so that it is not tightly coupled with the UI. So in a sense those could be running separately without BFF serving the UI from the same domain/port.

There is quite a little of information about how to achieve this, but I have found out that it is technically possible to do with some sort of reverse proxy configuring. So if I have understood correctly, the proxy is basically making it so that it seems like that the UI and BFF are on same domain, but really isn't.

My question is that how could this be done and is it something that is even worth doing? I just want to keep my UI (for example React) project away from the BFF (.NET). So what would be my optimal use case for example locally would be that I can

1. Run separate React project with npm start (localhost:5000)
2. Run separate .NET BFF with dotnet run (localhost:5001)
3. Run separate .NET REST API with dotnet run (localhost:5002)
4. Run separate YARP reverse proxy (if needed?) (localhost:5003)

Here is some documentation regarding this

• https://wrapt.dev/blog/standalone-duende-bff-for-any-spa
• https://swimburger.net/blog/dotnet/use-yarp-to-host-client-and-api-server-on-a-single-origin

I would be delighted if someone could advice me how to achieve this. And of course, the separate domain/port requirement is not absolute, but I just want that the UI and the BFF are separately running or that the UI is not run with the dotnet run.

[JeepNL]

I think 2 and 4 are the same. A BFF is, in my understanding, not a 'real' back end, but just a reverse proxy.

[JeepNL]

Running YARP on a back end server has many advantages, you can host 2 or more websites on one server so you can access all the websites on port 80/443. Without YARP (or any other reverse proxy) this isn't possible. I like YARP very much, it's simple to configure, there's great documentation available, it's very fast and has a lot of options. Microsoft itself is using YARP (I think they are their no.1 customer for YARP 😉).

I use (static) Blazor WASM (SPA) front ends, and they are using .NET Web API on the back end. You can host a static front end (for free) on GitHub Pages / Cloudflare Pages and I think on Azure Static Pages too. In these cases all front ends are accessible on port 80/443 (servers from GitHub, Cloudflare or Azure) and I don't need YARP on the back end.

The only thing I still have difficulties with is using AUTH. You can use Cookie Auth or JWT Auth. Cookie Auth only works with 'same origin', so I can't use that (without using a Reverse Proxy). I want to use JWT Auth with a local (back end) database and Microsoft Identity. I've seen the JWT stored in a Cookie by using a BFF/Reverse Proxy, but I really don't understand why. Why don't use JWT alone.

So, if I'm being honest, I still have difficulties understanding this TodoApi example. For me, it's already too complicated.

[teate]

For me this TodoApi example authentication wise is not too difficult, @davidfowl explained it quite well here. Of course there could be other good alternatives to implement the BFF pattern, like this video goes through.

However, I feel like in order to actually use this BFF pattern, I'm trying to figure out how to separate the SPA and BFF. That is the only thing that is blocking me from using this architectural pattern. I just want that the BFF does not "start" the SPA, but that the SPA is independent.

[JeepNL]

Thank you, I'll take another look at it and watch those videos!

[JeepNL]

With Blazor WASM the SPA is static. Nothing starts it. (Well, in development mode DevServer does, but not when you publish it) As I said you can host it, for example on GitHub pages. I don't have any experience with React, but I thinks it works probably the same. The BFF is just a (separate project) reverse proxy. With .NET it's actually just another Kestrel instance. It runs by itself.

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0-preview.1.23112.2" PrivateAssets="all" />

[Stahhl]

Any luck on this? I have created a Bff server with most code copied from TodoApi and a separate svelte spa. Frontend calls the Bff which goes through the whole login / signin dance and redirects back to the frontend. The cookie is created successfully (domain=localhost). But when the frontend tries to fetch the current users claims it fails to authenticate.
https://github.com/Stahhl/bfflab/blob/main/Bff/Program.cs#L31
https://github.com/Stahhl/bfflab/blob/main/Client/src/App.svelte#L11
EDIT: Fixed it i had to modify the fetch call from the frontend to pass along the cookie. And also modify the corsPolicy for the backend.