Question 39132 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

How to protect secret keys in Vue3? – Ubuntu

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search