How to protect secret keys in Vue3?-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

For those who are interested, I solved this by decoupling the authentication process.

For the backend: I used jwt.io to protect my api routes. The problem I was having is that I was protecting my api routes with .htpasswd. This is why I was passing the auth: {} in my requests from the front end.

By changing to jwt, I am now able to communicate by secure token.

Note - I also use bycrypt to hash my passwords too.