I am trying to set up an Angular SPA with a public ASP.NET Core Web API (backend), and that back-end then calls out to a separate ASP.NET Core Web API (data API) for various CRUD operations.
I'm trying to implement some authorization on the data API, such that the signed in user can see some things in a list, but not others, based on permissions that are ideally set by way of either App Roles or Delegated Permissions, but I'm struggling to work out how to get shared authentication through those layers.
I've so far managed to get the authentication in place on the front-end Angular app using the documentation on the MS Learn site (https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-single-page-app-angular-sign-in), and can see that there's an interceptor that's used in the sample code, but this appears to work on the basis that I request a scope from the Angular app, and depending on the scope I request, it decides whether or not to intercept. When I removed the stuff about scopes, I then got circular dependency issues, presumably because it was trying to intercept calls to authenticate the calls.
What I'm looking for is a means to authenticate the user at the front-end, and for the furthest Web API to know that I've authenticated user X, and to have that user associated with permission Y to know whether to filter out certain results from a database query.
Ideally, there should be no requests made from the Angular app to the back-end API without a user having been authenticated, and no requests made from the backend API to the data API for a user that hasn't been authenticated.
What I definitely don't want to do is just authenticate the user on the Angular app or the back-end API, have just all or nothing authentication between the back-end API and the data API and just pass the names of the allowed scopes through etc. as that seems like it's asking to be tampered with.
Can anyone point me in the right direction? I'm struggling to even work out what to google to put this together.