[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}
        />

[samfrank]

This is awesome, thank you!!

How did you find this out?

[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?

[timneutkens]

If there's more interest in this we can probably solve it, please make sure to 👍 the initial message so that we can prioritize accordingly.

[mephysto]

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

I am imagining an addition to next.config.js, something like:

module.exports = {
  images: {
    domains: [
      "source.unsplash.com",
      {
        domain: "wpengine.com",
        authorization: {
          type: "basic",
          token: process.env.MYCOOLTOKEN,
        },
      },
    ],
  },
};

And then you could use that when retrieving the image and passing along the auth setup. But like Tim said, best if there's enough interest. 👍

[adhorodyski]

Would love to see this, looks pretty straightforward.

[royjosefsson]

Me to!

[eagor]

This solution won't work with displaying the image stored on Notion. Notion API provides authenticated url to the image, that expires very soon, so I don't know the token to be able to add it to config file. It comes every time new with the url fetched from Notion API.

[dasblitz]

This would be nice to have for my team too. We need to have two projects from the same repository, one connects with a test env behind basic auth and the other one connects to the production env. It would help to be able to measure the loading speed of the page on test.

[lauriskuznecovs]

Same here.
This is great feature.

[yelnyafacee]

hi, I am encountereing "url" parameter is valid but upstream response is invalid too, but I am developing on localhost:3000 and pulling the images from the path: http://localhost/bookstore/public/storage/uploads/images/avatars/1/WTlvNXKdTJAIYLzEnGySAj0ZltV9UHFRspPCEskB.jpg
there is no Basic Authorization, anyone knows why?

[kirso]

Did you manage to resolve this? Just had the same error pulling images from an API :(

[zachrickards]

Any update here? Need this as well

Basic auth on images to be exact

[Alii-isk]

i was facing the same issue although i am hosting my images on cloudinary and it does work if i use the normal <img/> tag
so i changed the nextjs version as bellow and it worked just fine:
hope it woud work for u as well

 "dependencies": {
       ...
      "next": "11.0.1",
       ...

}

[asader]

As workaround, you can pass credentials in the url of image

https://login:[email protected]/image.jpeg

[vijaykumar1710]

Any update here? I need to fetch images with authorisation where image url expects bearer token to be passed.

Basic auth on images to be exact.