Unit 7 · Data that lasts
Why process.env doesn’t hide keys in the browser
There is no process.env in a browser. When a build tool fills it in for front-end code, it pastes the actual value into the JavaScript you ship. Environment variables keep keys secret only in code that runs on a server.
The mix-up
What people often think
“Reading the key from process.env keeps it out of the front end.”
What the tutor says
In the browser there is no process.env. Build tools that fill it in copy the key straight into the file you ship. Environment variables protect keys only on the server.
How it works
Many frameworks expose variables to the browser only when their name has a public prefix, precisely because anything exposed is readable by everyone. Treat any value the browser can see as public.
Close cousins of this mix-up
The tutor watches for these in the same lesson.
“Reading the key from process.env in this file hides it.”
This code runs in the visitor's browser, where process.env does not exist, and anything it reads ships to them. Send the request to your server and let it add the key.
Practise it with a tutor watching
APIs and auth basics
Keep secret keys on the server and explain how a site knows who you are after you log in.
Free with an account. The first two units need no account.