reactjsvariablesbuildviteenvironment

Env variable visible in Vite build production environement


I have only a simple frontend React/Vite application (used for AWS Cognito login), no backend.

All my environment variables are in an .env file prefixed with "VITE_".

How can I keep them secrets when I build the application (vite build) ?

Right now, they appear into the dist/assets files and thus become readable into the browser, which makes sense but certainly not what I want. (some of them are credentials & password by example to access to AWS Cognito pool).

Thanks


Solution

  • When building a frontend application with Vite, any environment variables prefixed with VITE_ are exposed to the client-side code. This is by design, as these variables need to be available at build time to configure your application. However, this means sensitive information, such as credentials and passwords, should never be stored in these environment variables because they will be exposed in the final build.

    you may set up a simple backend server to handle sensitive operations. This way, you can keep secrets on the server and never expose them to the client.