Gatsby: How to manage secrets with Gatsby?

[ptrhck]

After reading this blog post about Gatsby, I am considering to use it for a Mapbox app, which is outlined here. I would like to pick this up to ask the following questions: How do you manage secrets within a Gatsby app?

I know that there are client only routes which will be rendered, e.g. after a user is logged in. However, how do I manage secrets of third party services such as Mapbox as my site is completely static? With the provided Mapbox article, is any user capable of seeing my Mapbox secret key? What is the best way to manage such things with gatsby?

[NotMoni]

@ptrhck you can use .env files to define your api token

[madalynrose]

Yes, @NotMoni is correct! You can see more about using .env variables in Gatsby in this doc that goes through a couple different use cases.

[wardpeet]

Thank you for opening this, @ptrhck

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[ptrhck]

I do understand how to use API keys for example at build time. However, as far as I understand, mapbox needs the access token at runtime. In that case, someone could grab the key from the client side js and use it somewhere else. Am I missing something here how to handle this use case with gatsby?

[NotMoni]

Hey, @ptrhck Those ( .env )files are declared at the root of the project using some naming such as .env. In this file, you can store any desired variable to use it in your Gatsby configurations. When dealing with delicate variables (API keys, tokens, passwords, etc) it's recommended to use that way and ignore all .env files in your .gitignore.

When you trigger a command in Gatsby, you can pass it some variables, for example:

"develop": "GATSBY_ACTIVE_ENV=mapbox_api gatsby develop"

In this case, GATSBY_ACTIVE_ENV var will have mapbox_api as a value. Then, in you gataby-config.js, when you can use environment variables (above module.exports):

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

Then, you can create an environment file such as .env.mapbox in your root project and store any desired variable:

MAPBOX: 12345

Taking into account the code you've provided if you run develop (with all I've explained) command it will take MAPBOX as 12345.

So, answering your question, you won't have access to that tokens. You need to store them in your local machine and in your deploy server, not in your repository.
From Gatsby docs:

Please note that you shouldn’t commit .env.* files to your source

[LekoArts]

In that case, someone could grab the key from the client side js and use it somewhere else. Am I missing something here how to handle this use case with gatsby?

This isn't a specific problem to Gatsby or even React. You'll always have this problem when needing to make request with a key you don't want to expose.
You'll need to create a little Node/Express backend where you can send the requests to and which then will make the actual API call with the token and send the data back. Using Google will give you plenty of results, e.g. https://github.com/react-boilerplate/react-boilerplate/issues/1744#issuecomment-303112505

[ptrhck]

@NotMoni
I absolutely understand, thanks for your detailed answer! In this case, however, there is some backend server involved, e.g. gatsby develop server.

@LekoArts
That is excatcly what I was looking for, many thanks! Do you know of any example Gatsby/Node repo that has an example implementation?

[NotMoni]

Try this: https://www.gatsbyjs.org/packages/gatsby-source-apiserver/