How to authenticate front end with backend in an anonymous user flow [closed]

Question

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

Answer 1

Put another way, how do we allow the ReactJs app to call our API but not someone hitting our API directly?

You can't. Not possible.

You can make it a bit difficult by having the app obfuscated and use some kind of challenge-response thing so that observing the traffic between the app and the API is not enough information to make independant requests.

But ultimately, the app has to contain everything needed to make requests, so everyone who has access the app can find out how to do it as well, if they're determined enough.

It might be more useful to think about what kind of "abuse" of the API you want to guard against. Maybe all you really need is some kind of rate limit.

Answer 2

I think you have to ask yourself the question what information you want to convey from your app to the backend and how you can use that to authenticate the user.

Now if you want to have a completely anonymous session, meaning no user data is logged or transmitted there are two ways you could authenticate the app:

1. Have the app and backend be in the same secured network. This is not necessarily a way to authenticate the app with the backend because everyone can access the backend from inside that network but it would work. This might not be useful in anyway because you would have to know every device beforehand and authenticate those through some way, or have the user log into a secure network which would negate the benefits of an anonymous session. (Microsofts AzureAD/Graph could do that for you)

2. Have the app contain a "secure" key or someway to generate that "secure" key at runtime (Or send your users this key via post, *1). I put secure in quotation marks because this essentially is security through obscurity. As long as no one looks for that key, only your app can access your backend, but this will not work forever. Especially if you provide some sort of sensitive information.

*1:

Back in the day many companies used these things:

You could technically revive those and sent them out to everyone of your users and go from there. There isn't really a benefit in using this above a regular login tho. The only part that kinda makes this anonymous is that you don't actually have to know, which user has which card, you only need to keep track off which combinations are allowed on which day in your backend. The benefit of using this, is that no one can reverse engineer the secret key(s) you are using from your application.