401 unauthorized on /nextimg calls from a password protected build

[kandizzy]

When using next/image images fail to load if password protection is on.

Steps to reproduce the behavior:

1. Deploy a site using next/image
2. View the site with password protection on, receive a 401 Unauthorized on the call
3. Turn password protection off, image will load

Expected behavior
Is there a way to pass the credentials through to functions?

Versions

• Next.js: 11.0.1
• plugin 3.7.1

If you're using file-based installation

• netlify.toml:

[build]
  command = "rm -rf out && yarn build"
  publish = "out"

[functions]
  directory = "functions"
  node_bundler = "esbuild"
  external_node_modules = ["@netlify/functions", "image-type", "is-svg", "sharp"]

[[plugins]]
  package = "@netlify/plugin-nextjs"

I am not sure if external_node_modules is necessary here, but using the CLI I had to add those modules to my package.json in order for netlify dev to load the images, this is on Mac OS 11.3, netlify-cli/4.4.2 darwin-arm64 node-v15.14.0

[MisterJimson]

Also running into this, didn't realize it was because of the password protection

[ascorbic]

Right now this is unfortunately impossible, because on-demand builders can't see headers. @lindsaylevine do you reckon we could do a non-ODB redirect for images with auth, and pass the right headers through?

[mcmxcdev]

Just encountered this issue, would be great to get it resolved since design QA can't work properly without visible images.

[kaganjd]

+1 from an enterprise customer, ticket (internal only)

[kaganjd]

@ascorbic Would a possible interim workaround for customers be to overwrite the _redirects file generated by this plugin and add their own redirects for image paths?

[ascorbic]

@kaganjd I don't think that would work. The problem is when the whole site is password-protected we currently don't have a way for the image function to request the source images without hitting the auth wall. We're looking into this as part of the new plugin version and ODB changes

[kaganjd]

Sharing another possible workaround: use Basic Auth (instead of site-wide password protection) to protect all paths except the directory that contains source images

[ascorbic]

Hi. This should be fixed in the alpha of the build plugin. It is not for production, but if you would like to check, install @netlify/plugin-nextjs-experimental, following the instructions on that page. This is alpha software, so will be unstable and should only be used to validate this fix. We will be release a beta soon, and most people should not use it til then.

[MisterJimson]

@ascorbic where can we provide feedback on the beta that was just released?

[lindsaylevine]

@MisterJimson head on over to here -> #706!

[ascorbic]

Fixed in v4