The problem with keys
For my current project, → www.viking-hiking.com, I've used Nuxt, which is a fantastic wrapper for VueJS. It's very fast and has a ton of useful features. In combination with Netlify, creating a site on the Jamstack is relatively straight forward: download and run Nuxt locally, then publish to your Github account. Connect Netlify to your Github repository. Now, every commit to master will trigger an automatic deploy on Netlify, keeping your page fresh and up-to-date with almost no admin effort from your side!
When working with databases, such as Google Firebase Firestore, you open need to set credentials within the framework that you are using (Nuxt in my case). But when the credentials, such as API keys, are set in a .js file and then published to a public Github account, everyone could access those keys and use them for their purposes. Especially on Firebase, this can be a problem since the service charges by reads and writes to the database. If a third party was to use the API keys to access the database with many reads, it will be billed directly to you!
So, how to tackle the problem? The solution lies with using environment variables. These are pieces of information, such as an API key, which live in a local document that will be used during development, but not send to Github (and remaining "invisible" for others). On the production system, such as Netlify, you can specify the very same variables, but this time they are "hidden" in your Netlify deploy settings (although they might still be visible to others on your Netlify team).
Step 1: Setting up local environment variables
Make a local file at the root of your Nuxt folder, called .env (that is a dot followed by "env"). In this file, write your secret keys or information like this:
FIREBASE_AUTH_DOMAIN = 'fire-test.firebaseapp.com'
The uppercase name is convention, as far as I know, and not required.
To use the content of this file in Nuxt, add the following package: → nuxt/dotenv
Now, in your nuxt.config.js, add this to the very top of the file (before export default )
require('dotenv').config()...and also add the module in buildModules inside of nuxt.config.js:
buildModules: [
['@nuxtjs/dotenv']
]
The contents from the .env-file are now available globally, including inside nuxt.config.js! To access them, use
process.env.NAME
// in this case
authDomain: process.env.FIREBASE_AUTH_DOMAIN
Dotenv reads the content of the .env file and make the variables available in your app.
The .env-File shouldn't be uploaded to Github. This is enabled by default, but you can check if it works for you by taking a look inside the file .gitignore, which should be located at the base directory as well (the same level as .env!). So .gitignore should contain this line:
# dotenv environment variables file
.env
That's it for keeping your data secure on your local machine!
Step 2: Making environment variables available for the build
I'm not going to go into detail on how to set up Nuxt for a Netlify deploy, but I'm assuming you have connected your Github repository to Netlify and the page is being deployed.
In Netlify, go to your project page and look for "Settings", then "Build & Deploy" and "Environment". Here, you find the option "Environment variables", which provides exactly what you need: a way to set the very same keys for production!
Go to "Edit variables" and enter each variable in a separate key-value field. Be sure to a) use the exact same names as used locally (i.e. FIREBASE_AUTH_DOMAIN) and b) leave out any starting or ending quotes (like " and ') or the variable cannot be read correctly. Click "Save" and run a deploy! This should now take the info you set in Netlify and apply it to your page.
Step 3: Open a beer 🍺
Horray, you have successfully hidden your sensitive information from Github and made it available for the app anyway!