Next.js: [Next 10][Next/Image] Image doesn't load when behind Basic Authorization

[mephysto]

Bug report

Describe the bug

Images loaded using the new <Image /> comp are not loading when source is behind a Basic Auth. i.e. a Development Site on WPEngine.

To Reproduce

My setup is that I am developing a Next.js site locally. And I'm pulling in site content from a Wordpress site (using WPGraphQL) which is running on WPEngine.

The site is a Development environment, meaning I have to access with Basic Authorization.

Images loaded in a normal <img /> tag load fine. (localhost:3000 is already authorised).

The response I get from Network panel says:
"url" parameter is valid but upstream response is invalid

Expected behavior

A way to pass in Basic Authorization to the header for loading and showing images using next/Image

Screenshots

Response Header:

HTTP/1.1 401 Unauthorized
Date: Thu, 05 Nov 2020 02:15:23 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS
• Browser: any
• Version of Next.js: 10.0
• Version of Node.js: 15.1
• CMS: Wordpress
• Host: WPEngine

Additional context

WPEngine is on a Development Environment, traffic allowed with Basic Authorization.
Images are loading fine with old school img tag e.g. <img src="http://mywebsite.wpengine.com/wp-content/uploads/2020/10/star-wars-cockpit-51-960.jpg" />

[mephysto]

To anyone potentially dealing with this (it's very likely just me, lol). This is a workaround I have atm:

I have added a env variable to VERCEL's environments which basically only leverages the optimisation feature on PRODUCTION (when my WPEngine CMS will be live and not behind an authentication wall anyway).

        <Image
          unoptimized={process.env.ENVIRONMENT !== "PRODUCTION"}
          src={content.profile.sourceUrl}
          width={150}
          height={150}
        />

[tewarig]

I was also facing the same error while using ghost cms as backend. but adding an environment variable works.

[lachlanjc]

What kind of solution would you envision? Maybe you could set env variables like NEXT_IMAGE_AUTH_USERNAME & password?