How do I store my private api key on Vue.js app?

Question

I read the documentation on Vue CLI and I wanted to make sure if I understand it correctly.

The documentation says,

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.

So does that mean I should store my private key without the prefix VUE_APP? For example,

VUE_APP_NOT_SECRET_KEY=not_secret_key
SECRET_KEY=secret_key

Is it correct way to store my secret key?

Answer 1

You can store your key either in VUE_APP_NOT_SECRET_KEY=not_secret_key or SECRET_KEY=secret_key, there is no difference from security point of view, any one with a minimal front end skill get read this values from the browser.

The only difference is that if you use the VUE_APP_* prefix your variable will be in the process.env, and will be replaced by Vue in compile time using the DefinePluing.

cli.vuejs.org/guide/mode-and-env.html#environment-variables –

NOTE WELL: Anything you store in the Vue app is not secret.

Answer 2

You can create a .env file in the root of the project, next to package.json

In that file, you can create your environment variables as VUE_APP_SOME_KEY="someValue"

Make sure the name starts with VUE_APP_

Then where ever you want to use it you can do process.env.VUE_APP_SOME_KEY

Also don't forget to add .env file to .gitignore