Setting Up Your App for Efficiency and Security
This week, while working on my JavaScript plant care application, I ran into the question of how to best configure my app to ensure security while also maintaining performance and efficiency. Specifically, I needed a way to set up my application so that it could make requests to the Trefle REST API and retrieve and display data from the vast collection of plant information Trefle provides while also keeping my unique API key private on the client-side. Keeping important information such as API keys private is imperative because it ensures the security of your application and prevents other people from accessing the API using your credentials. Additionally, since some APIs require a paid subscription plan that limits the number of requests you make to the database, you might end up paying a hefty unexpected sum just for exposing the API key.
To get started, what you will want to do is create a config.js file in your application. In this file, we will set up a config object with the information we need to keep inaccessible from the client-side. In this case, I needed to keep my unique API key hidden, so here is how my config.js file ended up looking like:
Here we have a config object with a key of apiKey and a value that is your API key.
From here, you will want to make sure that you create a .gitignore file in your application’s root file and include your config.js file in the list of files for Git to ignore. This ensures that your config.js file is not pushed up to GitHub, which would then expose your API key. Once you have your .gitignore file set up and have included your config.js file, you are then free to push your code up to GitHub.
Now you will have to set up your application to be able to access your API key so that you are able to make requests and retrieve the data you need for your application. To do this, you can create an app.js file in which youmake our fetch request to the API. In this file, you will access your API key by referring to the config object created in the config.js file, like so:
const apiKey = config.apiKey
In your fetch request, you can now interpolate your API key by referencing the variable you just declared. This allows you to access your API key without ever actually hardcoding it into the access point URL.
Et voila!
