How to keep secret your Font Awesome Pro token in public GitHub actions

Photo by Serkan Turk on Unsplash

Yesterday Julien Renaux published a series of interesting new blog posts. In one of these he notably displayed, step by step, how to deploy StencilJS apps with GitHub actions and Firebase hosting.

This tutorial really caught my eye because all applications of our web open source project DeckDeckGo are developed with StencilJS and hosted on Firebase 😁

Of course I couldn’t wait that much and I had to give it a try. Because I’ll have to make changes to obfuscate production tokens differently if I use a CI to build our editor for presentations, I thought I could first try out his recipe in the current Ionic React demo application I’m developing for our Meetup next week.

As a result, it just worked seamlessly 🎉 It worked so well and the setup was so easy, that I thought I could quickly setup another CI deployment for my website too.

Unfortunately it didn’t worked out 😕 Even if the technology and stack of my website, build with Gatsby, is somehow really similar to the small app, the build performed by the CI failed:

At first, I didn’t understood the error. Of course I noticed that some artifacts couldn’t be downloaded but I didn’t knew what where these and what was the root cause. After a bit I finally remembered that I used to face a similar problem with another CI.

For my website I’m using Font Awesome and notably the @fortawesome/pro-light-svg-icons icons which could only be used if my related Font Awesome Pro NPM token is configured. While the documentation explains clearly how to configure the token locally, they don’t (or at least I didn’t found out at first) provide an example which displays how to hide it from a public repository. Therefore, the purpose of this blog post.

Configure the NPM registry

The Font Awesome NPM token could either be set up globally or per project. The method we need to build our project with a CI is the last one, “per project”. For that purpose, we create a new file .npmrc in the root of your project . To the contrary of the documentation, we only add one line in the file respectively we only add the reference to the Font Awesome packet manager. We deliberately ignore to specify anything regarding our token.

Set up a new secret in GitHub

As we didn’t provided the token in the previous file, we will have to provide it to the GitHub action in a different way otherwise it will still not be able to download the dependency. Fortunately GitHub already provide an option to keep environment variables secret. Therefore we make the most of this option and we create a new secret for our Font Awesome NPM token. For example let’s call it FONTAWESOME_NPM_AUTH_TOKEN.

Set up a GitHub secret for the Font Awesome NPM token

Use the secret in our CI

If you already followed the tutorial of Julien, your CI workflow probably already contains the following to install the dependencies from NPM of your application:

This is the root of our problem, as NPM is not aware of the specific registry and token it has to use to download the specific artifact. Therefore we finally are going to resolve the issue by running a command-line, before the installation one, to configure NPM with our secret token.

The pipe (| ) let us specify multiple commands all run in the in the same shell (see documentation).

And voilà, our CI should now be able to download the required dependency and therefore build and deploy our project 🎉

Successful CI, happy CI 😺

Cherry on the cake 🍒🎂

My website is open source and available on GitHub, check it out to validate the solution with your own eyes 😉

To infinity and beyond 🚀

David