Gatsby Exposing Environment Variables on "Gatsby Build"

[jonolane]

Hi there,

New Gatsby user here. I am really struggling to understand why Gatsby seems to be hardcoding my access token secrets at build time. I specifically reference process.env._VAR_NAME during an API authentication, but when the build gets bundled it injects the .env secret value into a build file. This might be an easy fix but does anyone have any sort of inkling into why Gatsby is doing this??

Thanks a bunch

[808vita]

Attaching links to gatsby docs , hope this helps.
https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/

.env.development
Copy.env.development: copy code to clipboard
GATSBY_API_URL=https://dev.example.com/api
API_KEY=927349872349798

To load these into Node.js, add the following code snippet to the top of your gatsby-config.js file:

gatsby-config.js
Copygatsby-config.js: copy code to clipboard
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

This loads process.env.GATSBY_API_URL and process.env.API_KEY for use in gatsby-*.js files and functions.

For example, when configuring a plugin in gatsby-config.js:

gatsby-config.js
Copygatsby-config.js: copy code to clipboard
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-custom`,
      options: {
        apiKey: process.env.API_KEY,
      },
    },
  ],
}

You might want to access some Environment Variables in the browser , but remember these are loaded into script files & can be accessed & visible to client / browser ( caution).

By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret and not exposed to anyone visiting the site.

To expose a variable in the browser, you must preface its name with GATSBY_. So GATSBY_API_URL will be available in browser code but API_KEY will not.
Variables are set when JavaScript is compiled so when the development server is started or you build your site.

src/pages/index.js
Copysrc/pages/index.js: copy code to clipboard
import React, { useState, useEffect } from "react"

function App() {
  const [data, setData] = useState()

  useEffect(async () => {
    const result = await fetch(
      `${process.env.GATSBY_API_URL}/users`
    ).then(res => res.json())

    setData(result.data)
  })

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>
          <a href={user.url}>{user.name}</a>
        </li>
      ))}
    </ul>
  )
}

export default App