Secrets Management and Environment Variables
Distinguish between server-side and client-side env vars, prevent secret leakage in bundles, and use runtime injection.
Two Classes of Environment Variables
In a React application, environment variables fall into two classes: server-side (never sent to the browser) and client-side (embedded in the JavaScript bundle). Understanding which class your variables belong to is the first step in secrets management, because client-side variables are effectively public once the bundle is deployed.
Vite Prefix Convention
In Vite projects, only variables prefixed with VITE_ are included in the client bundle. VITE_PUBLIC_API_URL=https://api.example.com is accessible in browser code via import.meta.env.VITE_PUBLIC_API_URL. All other variables are stripped from the bundle at build time and remain server-only.
All lessons in this course
- XSS in React: dangerouslySetInnerHTML and Third-Party Scripts
- CSRF Protection in React and API Setups
- Content Security Policy for React Apps
- Secrets Management and Environment Variables