How to make a .env file in Vanilla js and hide tokens in them

Question

I have a vanilla js project. In app.js file I am calling a api that retrieves the desired values. I have initially called the api through postman, included all the headers in postman only and retrieved the code using javascript fetch. It works good too but it shows my token and session id in it.

var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Authorization", "Token <mytoken>");
    myHeaders.append("Cookie", "sessionid= <mysessionid>");
    myHeaders.append("User-Agent", "Mozilla/5.0");
   

How can i hide these values in .env file.

Thank you

Answer 1

First of all you should install the dotenv npm package

Do it by writing this in terminal:

npm install dotenv

But, since vanilla JavaScript doesn't support require, you can install the requirejs npm package

Do it by writing this in terminal:

npm install requirejs

Then you can write the following code to use require in vanilla JavaScript:

var requirejs = require('requirejs');

requirejs.config({
    //Pass the top-level main.js/index.js require
    //function to requirejs so that node modules
    //are loaded relative to the top-level JS file.
    nodeRequire: require
});

requirejs(['foo', 'bar'],
function   (foo,   bar) {
    //foo and bar are loaded according to requirejs
    //config, but if not found, then node's require
    //is used to load the module.
});

You can read the documentation of requirejs at https://requirejs.org/

Then you can use environment variables in vanilla JavaScript.

Read more about this at https://www.freecodecamp.org/news/how-to-use-environment-variables-in-vanillajs/

Answer 2

There is a good way to solve this without installing packages.

I wrote an answer here but I might as well share here too.

I was able to create a working solution using this article. You should modify the steps below with your own variables, and you can also check out the article to see the base example and also learn more.

Note: This solution is ideal for small personal projects where the information is not exactly sensitive but you just don't want them displayed so visibly in your code. Do not use for larger projects that require a reasonable level of security measures.

If your project is already deployed to Netlify, or a similar platform where you can add build/deploy commands:

1. Go to the build settings
2. If the script file you want to use the variables for is in a folder, set the build command to this: cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js
3. If the script is in your root folder, set the command to this echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js
4. In your index.html file where you import the script, set your script tag to include this attribute type="module" i.e <script src="./index.js" type="module"></script>
5. In your script file, import the variables by adding this line to the file: import {USERNAME, PASSWORD} from "./config.js"
6. Trigger a redeploy manually on Netlify, or it will be deployed automatically if you already set automatic deploys for the repo.
7. That's all!

This solved mine and I hope it helps anyone else?.