Before going into any kind of explanation, we need to understand the difference between server side storage and client side storage when it comes t...
For further actions, you may consider blocking this person and/or reporting abuse
It seems like you have deleted the previous post and then re-created it.
Tnx for the post :)
Yes, true. To answer your question, I believe your usage of localStorage is safe, for development purposes. Unrelated to localStorge, what I would pay attention to would be not to expose your API key if the API you're using has provided you with a private key (that if tou chose to upload your project using Gihub Pages, Netlify etc).
I agree. For that reason, I use .env to protect api key
Even if you store your keys in an .env file, they will be exposed once the React project is built. For more details you can read this article
Indeed. A file with credentials should not be read by the client / frontend by JS because it means a user can access the value too.
An appropriate use for .env file credentials is if your frontend did not care about this details at all. But you have a server side REST API or Lambda which internally loads the .env file and obscures the values and then your frontend requests that service.
Also remember that a .env on GitHub can be read by other users. So typically you would use secret environment variables set in your CI so that only you and admin users can see the values and they get used in the app at build time, and when the app starts.
Do you have some resources on how to achieve this exactly? I've been dealing with this issue myself but I nevet got into details on how to obscure my API keys. Thank you!
If you have a simple app that does one thing then consider Netlify Functions, similar to Lambda but letting you run server side Node code and the frontend interfaces through API requests. And it is serveless so you don't need to set up a Node server! Add a file in the right directory and Netlify will deploy your serverless code. In your Function file, you would reference process.env.
And the value would be set in the env variables in your Netlify admin view.
For example if you want to search the Twitter API using your secret keys but allow users to input their own search terms and not have to do any auth themselves.
Here is an article I found
dev.to/irohitgaur/how-to-access-ap...
I have an example of a file and site for reference. I use frontend JS to query the Function and return the result on the frontend.
github.com/MichaelCurrin/netflix-a...
It doesn't use an API key because the external API doesn't need one. But for Twitter where you do need one, I would have set and used env variables as in my previous comment. Note I would not use a .env file because it would be stored in version control and maybe accidentally deployed as a public file on the site. Keep your secrets out of version control and in your CI tool env variables. Or say AWS secrets manager.
Drifting from the web app flow, here is how to use secret environment variables on GitHub Actions to post a tweet.
github.com/MichaelCurrin/tweet-gh-...
If you are making complex app handling say user profiles and photos then instead of Function you probably need to make a REST API with Express JS or Flask (Python) and maybe a database. And host that on Vercel or AWS. And your app would read the env variables on
process.envoros.envwhen the app starts but only send and receive precise info to the user so they cannot see the API key used behind the scenes.Thank you so much for all the resources, sounds very interesting (and tricky :D)!
Nie!!!
Sorry nice!!!
Not if the tabs share the same origin. It's only true if you use
sessionStorageTrue, I forgot to mention that. Thx!
Very useful... Thank you
Thanks for sharing!
Thx for pointing out the typos (bad copy paste :D). I mentioned you can access the storage both ways (with or without
window), but yes, I might as well remove thewindowkeyword in the examples.Thanks for this wonderful post :)
Thx for reading, I hope it was useful.
Nice post. Thanks for sharing.