I have an API that will be exposed on the internet publicly, the primary use of this API will be initially by a ReactJs front end but in the future we'd be looking to open this up to other clients that exist externally and require access to be able to call our API endpoints.
The ReactJs frontend will support a logged in experience but also must allow anonymous sessions.
My concern is around locking down the API so that it cannot be called by unintended users - anyone other than the users we have given access to.
So, we could have multiple authentication schemes to support, say a Bearer token authentication which would be useful for a backend service somewhere and encrypted cookie authentication for logged in users of our ReactJs front end, but I'm unclear on how we could support an anonymous user who is using our ReactJs front end.
How might we allow our ReactJs app to call our API whilst serving an unauthenticated user, at the same time securing the API so it cannot be abused?
Put another way, how do we allow the ReactJs app to call our API but not someone hitting our API directly?
P.S. our API is written in .net 6.0