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

user_12295975 0
Viewed 5648

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?

dotenv vue-cli vue.js environment-variables
4 Answers

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.

user_3548810

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

user_124218090

Keys should not be stored in environment variables as they will be accessible on the client

user_70942130

You should be using a product like Key Vault from Microsoft. Key Vault is part of Azure services.

Best practice in the industry is to store your secrets on another server.

Microsoft provides such a way through key vault and can be easily implemented.

There are other products out there. See the azure keyvault competitor's list

Edit : I also forgot to mention, you cannot at this time use KeyVault per example directly on frontend app (single page app). You need to split the backend and frontend for it to work, otherwise you will not be able to hit the keyvault client.

user_70482380
Related