Image processing with wordpress-source-plugin and basic auth causes 401 Unauthorized error

[ptessier]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

We currently use the latest version of Gatsby 4 and Wordpress as a source. We use a wordpress instance with a basic authentication on it.

We keep our Gatsby instance updated every week except for wordpress-source-plugin which is on version 6.9.1. We've been trying to update it every week but we keep getting error when building on Gatsby Cloud.

On the latest version we can run the project locally but it errors on Gatsby Cloud. We get a response code 401 (Unauthorized).

Our config works on version 6.9.1, we use a config like this to set the base auth.

{
  resolve: `gatsby-source-wordpress`,
  options: {
    auth: {
      htaccess: {
        username: ****,
        password: ****,
      },
    },
  },
}

The error we get is the following:

ERROR Unable to fetch:
---
https://production-url/wp-content/uploads/image-name.png
Reason: Response code 401 (Unauthorized)
---
Fetch details:
{
  "attempt": 3,
  "method": "GET",
  "errorCode": "ERR_NON_2XX_3XX_RESPONSE",
  "responseStatusCode": 401,
  "responseStatusMessage": "Unauthorized",
  "requestHeaders": {
    "user-agent": "got (https://github.com/sindresorhus/got)",
    "accept-encoding": "gzip, deflate, br"
  },
  "responseHeaders": {
    "date": "Fri, 28 Oct 2022 15:30:56 GMT",
    "content-type": "text/html; charset=iso-8859-1",
    "content-length": "381",
    "connection": "close",
    "server": "Apache/2.4.38 (Debian)",
    "www-authenticate": "Basic realm="Restricted Content""
  }
}
---

Using basic auth, we can access that url and like I said before, the same thing on version 6.9.1 works.

Reproduction Link

Since this reproduction would require a Wordpress instance, I am not including a repository. I can provide any details that would help

Steps to Reproduce

1. Install latest plugins for Gatsby and Wordpress
2. Add basic auth on the Wordpress instance
3. Deploy site on Gatsby Cloud
4. Run a build using image processing

Expected Result

No error, site builds and processes images from Wordpress.

Actual Result

Once it gets to the processing of images from Wordpress we get this error.

Environment

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Safari: 15.6.1
  npmPackages:
    gatsby: ^4.24.5 => 4.24.4 
    gatsby-plugin-advanced-sitemap: ^2.1.0 => 2.1.0 
    gatsby-plugin-axe-core-react: ^1.0.3 => 1.0.3 
    gatsby-plugin-canonical-urls: ^4.24.0 => 4.24.0 
    gatsby-plugin-eslint: ^4.0.2 => 4.0.2 
    gatsby-plugin-feed: ^4.24.0 => 4.24.0 
    gatsby-plugin-gatsby-cloud: ^4.24.1 => 4.24.1 
    gatsby-plugin-google-tagmanager: ^4.24.0 => 4.24.0 
    gatsby-plugin-image: ^2.24.0 => 2.24.0 
    gatsby-plugin-layout: ^3.24.0 => 3.24.0 
    gatsby-plugin-loadable-components-ssr: ^4.3.2 => 4.2.1 
    gatsby-plugin-manifest: ^4.24.0 => 4.24.0 
    gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1 
    gatsby-plugin-react-helmet: ^5.24.0 => 5.24.0 
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0 
    gatsby-plugin-sass: ^5.24.0 => 5.24.0 
    gatsby-plugin-sharp: ^4.24.0 => 4.24.0 
    gatsby-plugin-styled-components: ^5.24.0 => 5.24.0 
    gatsby-plugin-typescript: ^4.24.0 => 4.24.0 
    gatsby-source-contentful: ^7.22.0 => 7.22.0 
    gatsby-source-filesystem: ^4.24.0 => 4.24.0 
    gatsby-source-wordpress: ^6.24.0 => 6.9.1 
    gatsby-transformer-sharp: ^4.24.0 => 4.24.0

Config Flags

No response

[hazuremon]

#35151

[ptessier]

@hazuremon Currently, we don't have Image CDN enabled. Not sure if that's what you are referring to.

[ptessier]

I did try the following code and it didn't fix the unauthorized error

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: process.env.WPGRAPHQL_URL,
        type: {
          MediaItem: {
            createFileNodes: false,
          },
        },
      },
    },
  ],
};

[LekoArts]

Should be fixed with #37006