I'm a self-taught dev focused on websites and Python development.
My friends call me the "Data Genie".
When I get bored, I find tech to read about, write about and build things with.
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.
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.
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!
I'm a self-taught dev focused on websites and Python development.
My friends call me the "Data Genie".
When I get bored, I find tech to read about, write about and build things with.
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.
I'm a self-taught dev focused on websites and Python development.
My friends call me the "Data Genie".
When I get bored, I find tech to read about, write about and build things with.
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.
I'm a self-taught dev focused on websites and Python development.
My friends call me the "Data Genie".
When I get bored, I find tech to read about, write about and build things with.
I'm a self-taught dev focused on websites and Python development.
My friends call me the "Data Genie".
When I get bored, I find tech to read about, write about and build things with.
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.env or os.env when the app starts but only send and receive precise info to the user so they cannot see the API key used behind the scenes.
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)!