How to Store Credentials as Environment Variables and Read in JavaScript
Published: 2022-11-12 01:07:21

> Article was orginally posted on https://realjavascriptproject.com/how-to-store-credentials-as-environment-variables-and-read-in-javascript/

<!-- wp:paragraph -->
<p>Secrets are called secrets for a reason. We do not want others to know about them, be it in real life or in JavaScript. In this tutorial, you will learn how to store your credentials as environment variables and learn how to read them in JavaScript. We will discuss 3 different ways to store credentials and read them using JavaScript.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Storing them as Global Environment Variables</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Providing them as a Command Line Argument</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Storing them in a&nbsp;.env file</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Which is the best way to Read Credentials Locally in Javascript?</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If you are interested in a similar tutorial for python, you can <a href="https://www.realpythonproject.com/3-ways-to-store-and-read-credentials-locally-in-python/" target="_blank" rel="noreferrer noopener">check out this article</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Storing Credentials as Global Environment Variables</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If the credentials are stored as Global Environment Variables, they can be accessed by any script running on your PC.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To Create a Global Environment Variable, run this in your terminal</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">export varName=varValue</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Ensure there are no spaces between the ‘=’. If you get an error&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="JavaScript" class="language-JavaScript"><code>“zsh: Bad Assignment”</code></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>or</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="JavaScript" class="language-JavaScript">bash: export: `=': not a valid identifier</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>it is probably caused because of space between the ‘=’.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let’s create a couple of global environment variables</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">export globalUser=secretUser<br>export globalKey=secretKey</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In Windows, you might have to use “set” instead of “export”.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Below is how you would access the variables in Node</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="javascript" class="language-javascript">const USER= process.env.globalUser
const KEY = process.env.globalKey

console.log(USER) // secretUser
console.log(KEY) // secretKey</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>process.env</code> returns an object with all your Global Environment Variable.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You do not need to install any npm library since process is a built-in library in Node. The biggest con of Global Environment Variables is that you risk overwritting previously existing variables. As time goes by, it will be hard to keep track of previously created variables and avoid overwriting.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to remove the environment variable you created earlier</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">unset globalUser<br>unset globalKey</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Providing Credentials as Command Line Arguments</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you want to pass your credentials in the command line</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted"><code>globalUser=secretUser</code> <code>globalKey=secretKey</code> node app.js</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>You could access them in Node the same you way you accessed the global environment variables</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="javascript" class="language-javascript">const USER= process.env.globalUser
const KEY = process.env.globalKey

console.log(USER) // secretUser
console.log(KEY) // secretKey</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>A caveat to doing something like this is that you will have to remember to pass the credentials as command-line arguments each time you run your script.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Storing Credentials in a&nbsp;.env&nbsp;file</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":240,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://realjavascriptproject.com/wp-content/uploads/2022/11/image-1-1024x276.png" alt="Code Snippet showing how to read environment variables from a .env file " class="wp-image-240"/><figcaption class="wp-element-caption">Code Snippet showing how to read environment variables from a .env file</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You can create a file named&nbsp;<code>.env</code> and store your credentials over there. Although you can store your credentials in any file and <a href="https://realjavascriptproject.com/how-to-read-and-write-into-files-in-javascript/" target="_blank" rel="noreferrer noopener">read them from your file</a>, conventionally credentials are stored in .env files.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="JavaScript" class="language-JavaScript">globalUser=secretUser<br>globalKey=secretKey</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>.env files are usually used to store secrets and credentials. Make sure to add it to your&nbsp;<code>.gitignore</code> file so that you don’t commit it by mistake.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To read variables from an&nbsp;.env file you will have to install <code>dotenv</code> which is a npm package.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="bash" class="language-bash">npm install dotenv --save</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>dotenv</code> can be installed as a dev dependency since it will only be used during development to load variables from&nbsp;<code>.env</code> files.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Below is the code to read the variables from the env file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code lang="javascript" class="language-javascript">require('dotenv').config()

const USER= process.env.globalUser
const KEY = process.env.globalKey

console.log(USER) // globalUser
console.log(KEY) // globalKey</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>As you can see most of the code is same as before. The only addition being the <code>require</code> statement at top.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Which is the best way to Read Credentials Locally in Javascript?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In my opinion, the best way is to store them inside a&nbsp;.env file.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>They are local to your project</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You do not need to worry about ‘unsetting’ them.&nbsp;</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>If you add them to your&nbsp;.gitignore file, it is safe from the outside world</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>The only con is that if there is a Global Environment Variable with the same name as a variable in the&nbsp;<code>.env</code> file, <code>process.env</code> will return the Global Environment Variable.</p>
<!-- /wp:paragraph -->