How to protect secret keys in Vue3?

Vinn 0
Viewed 30

I recently read the vueJS website that says:

WARNING Do not store any secrets (such as private API keys) in your app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

Current Situation

I have an API that I created with node js. Which serves data from my postgres database.

The api is hosted on an ubuntu server which is protected by NGINX basic auth. I use a username and password (via .htpasswd) to access the api.

My Vue App sends a fetch request to my API like this:

async getStuff() {
            await axios({
                method: 'GET',
                url: MyAPIUrl,
                auth: {
                    username: this.authAdmin, 
                    password: this.authPassword,
                },

            })
                .then((data) => {
                    //do stuff
                })
...

As you can see, inside that fetch request I have Basic Auth username and password. So this means the username and password is inside VUE, and therefore it is visible to the browser.

I did a lot of research and I cannot understand how to provide my Vue App with access to my api (which requires authentication) without exposing private keys.

Is there another way?

I read online that I need to "handle this on the back end". But I do not understand how I can do that and still give my Vue app access to the data from the DB?

vuejs3 security node.js
1 Answers

You should not store sensitive information like API keys inside your application.

The API keys and other sensitive info can be passed in from the environment in which the deployment is done. You can configure it while creating the pipelines.

Another way of handling it in the backend

One possible solution is to remove the authentication and add the front-end URL to the list of accessible endpoints under CORS.

BRS0
Related