Gatsby/Wordpress - .env credentials not working

Question

I am working with the gatsby-source-wordpress plugin

If I hard code my API keys/secret into my Gatsby.config, everything works fine, but I want to add these as .env variables so that I can .gitignore for deployment, and this is where things are breaking.

At the root of my directory, I have a .env file which looks like this

CLIENT_SECRET=10987654321
CLIENT_ID=123456
[email protected]
PASS=mypassword1

I'm then try to access these in gatsby.config, like this

require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
  });

    module.exports = {
      siteMetadata: {
        title: 'Gatsby Default Starter',
       },
      plugins: [
        {
          resolve: 'gatsby-source-wordpress',
           options: {
            baseUrl: 'myurl.com',
            protocol: 'http',
            hostingWPCOM: true,
            useACF: false,
            auth: {
              wpcom_app_clientSecret: `${process.env.CLIENT_SECRET}`,
              wpcom_app_clientId: `${process.env.CLIENT_ID}`,
              wpcom_user: `${process.env.USER}`,
              wpcom_pass: `${process.env.PASS}`,
           },
          },
         },
        {
         resolve: `gatsby-plugin-emotion`,
        },
        'gatsby-plugin-react-helmet',
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: 'gatsby-starter-default',
            short_name: 'starter',
            start_url: '/',
            background_color: '#663399',
            theme_color: '#663399',
            display: 'minimal-ui',
            icon: 'src/images/gatsby-icon.png', // This path is 
    relative to the root of the site.
        },
       },
        'gatsby-plugin-offline',
      ],
    }

which is returning the following errors when I run either gatsby develop or gatsby build

source and transform nodesThe server response was "400 Bad Request"
source and transform nodesThe server response was "403 Forbidden" Inner exception message : "User cannot access this private blog." No routes to fetch. Ending.

So, the issue is the .env variables don't seem to be pulling through properly, but I can't see a reason why they wouldn't be? Is there anything I've missed in setting this up?

LekoArts LekoArts · Accepted Answer · 2018-10-08T09:01:24

Gatsby doesn't know which plugin you mean (see How to use) and your overall syntax is wrong. The plugins is an array for example.

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        auth: {
          wpcom_app_clientSecret: process.env.CLIENT_SECRET,
          wpcom_app_clientId: process.env.CLIENT_ID,
          wpcom_user: process.env.USER,
          wpcom_pass: process.env.PASS,
        }
      }
    }
  ]
}

This should work assuming that you also define the other necessary fields mentioned in the README.

Gatsby/Wordpress - .env credentials not working

1 Answers