Public Reactjs site to access a secured nodeJS api

[skjit]

Hi,

Scenarios: We have a public web app built in Reactjs which is open to anybody. The reactapp has to access nodejs apis and the nodejs APIs needs to be secure.

We have secured the API but, how can we protect the client_id and client_secret which is required to make a call to the api from the react components; so that the API can only be accessed/invokes only by the react site hosted on -

Example
Site: myopenreact.com
Api resource : somesite.com/v2/someendpoint

[jmangelo]

You won’t be able to achieve that because as you said this is a public web application and since it’s built as a browser-based application any data included in the application logic will be available to end-users.

You can configure the API in a way that only authenticated users can access it, but ensuring that only your browser-based application can call the API will not be feasible. In other words client authentication through a client secret is meant only for what OAuth 2.0 designates as confidential client applications and a browser-based application is not a confidential client.