A developer puts a third-party API key in VITE_MAPS_KEY and says it's safe because .env isn't in Git. Is it? How should a frontend app handle API keys?

No. Vite replaces import.meta.env.VITE_MAPS_KEY with the real value at build time. Anyone can find it in the JS files, in DevTools or in the network tab. The same is true for NEXT_PUBLIC_ in Next.js and REACT_APP_ in Create React App. Keeping .env out of Git protects the repository, not the bundle.

The rule: everything sent to the browser is public. Minifying or hiding the key doesn't change that.

There are two kinds of keys:

• Publishable keys are made to be public. Examples are Stripe's publishable key, a Firebase web config and a Maps browser key. Restrict them in the provider's console: allowed websites (HTTP referrers), allowed APIs and usage limits.
• Secret keys must never reach the browser. Examples are Stripe secret keys, AI provider keys and database passwords. Call the service from your own backend instead. The backend adds the key, checks who the user is and applies rate limits.

Also:

• Scan the build output in CI with a secret scanner such as gitleaks.
• If a secret key leaks, rotate it at once. Deleting it from the code isn't enough.