I want to create an online store using React and Snipcart. Seems the main security concern with this approach is storing my Snipcart secret api key. I want to know the most secure way to store this. I just found out that using a .env file in React to store this is not secure as it is embedded into the build and anyone could potentially view this. I am wondering if anyone has stored API keys using something like AWS Secrets Manager? I have been looking into this approach and wondering if I could store my secret key in secrets manager and then just invoke it with a Lambda function or something. If I were to have my React app make a request to receive the API key, could someone using the network tab in dev tools possibly intercept this request and view my API secret key?
Another way I have considered is building a backend that communicates with snipcart separately that my React app could just call, but I would prefer not to do this approach as this would add a considerable amount of cost.
Here is a link to basic installation on snipcart docs, seems the api key needs to go into a script tag - couldn't someone see this potentially?
Here is their reference to authentication in their docs as well.
You put the public API key in the script. It doesn't matter that others have access to it. The private keys are of other API requests, if you would create a dashboard or something to view your data other ways than the official dashboard. Those keys are needed to be kept secret.