SPA (Vue), BFF and IdentityServer on IIS setup?

Question

I'm trying to build a SPA (Vue-Based) secured with the BFF pattern and publish everything to a IIS. I follow the Duende BFF Security Framework sample but I'm struggling with getting the whole picture. Can someone explain me in the plain English how does it work?

Specifically, I have those questions:

1. SPA's BFF adaptor is a proxy that makes a heavy lifting for communication with IdentityServer, while the SPA itself communicates with BFF adaptor via its plain, unsecured HTTP interface. SPA is secure because it's inaccessible directly. Is this correct?
2. My frontend SPA is a separate project does nothing with ASP.NET. Can it continue to be so or I should move it into single ASP.NET project together with BFF adapator as in the IdentityServer sample?
3. If SPA and BFF must be in the single project, should I also bring something like VueCliMiddleware which is also a proxy, or the BFF will serve the same purpose? If I need both, how those two proxies will work together?
4. If I can keep my SPA as a separate project/site on IIS, how should I make it work with BFF adaptor? If my understanding (1) is correct, how to make a SPA be only accessible via BFF? Should I bring something like IIS ARR (reverse proxy) for this purpose? Is it feasible setup?

Answer 1

I've been playing recently with IS4 and SPA (Angular in my case) and I got "almost" the same questions you have. I will try to answer you with my findings until now.

1. Your BFF and your SPA should work together. I think you could follow this quickstart and replace the JS side with your entire SPA. I mean, you could create and AspNet Core web site to host your SPA and to serve as your BFF. The communication between your SPA and your BFF will not be "insecure", in fact, if you create aspnet controllers in your BFF they can be be fully protected by the IS4 mechanisms.
2. If you use separate projects for your SPA and your BFF, then you aren't using the BFF architecture, in fact this seems more like an SPA calling an "arbitrary" remote API. Your SPA and your BFF should work together. I suggest you to follow the QuickStart I pointed, just to "see" what is the whole idea.
3. Unfortunately, I know nothing about VUE, can't suggest anything here. But, as IS4 is very .Net oriented, I see only benefits in use AspNet website as your BFF technology.
4. As I said in the item 1 and 2. I think you shouldn't separate the SPA and the BFF projects.