HTTP Proxy (http-proxy) ignores Authorization header

Question

I am trying to embed some pages using <object/> in our Next.js frontend. The pages are protected by Basic HTTP Authentication. I do not want the users to manually enter the credentials, so I was looking for ways to achieve seamless page loading. The credentials are universal and obtained via an API.

Since we cannot pass URLs with embedded credentials (like - user:[email protected]) inside iframe/object (see) we were left with two (2) options:

1. Whitelisting the IPs
2. Creating a proxy

Whitelisting IPs looked like a time-consuming approach, and whitelisting IPs would not have worked in the first place (because of client IP).

So, we created a proxy to the target using http-proxy and exposed it as a Next.js API endpoint.

Here is what myapp/pages/api/extern/status.js looks like:

...
const proxy = httpProxy.createProxyServer();

const ATProxy = (req, res) => {
    proxy.web(req, res, {
        // Proxy to page protected by Basic Auth
        target: 'http://target.tld/resource-page', 
        changeOrigin: true,
        ignorePath: true,
        followRedirects: true,
        auth: 'username:password', // does not work; is ignored.
        /* Also tried this, did not work
        headers: {
            Authorization: 'Basic username:password',
        }
        */
    });
};
...

The proxy seems to be working fine, as it loads the page, but it asks for the credentials (as it normally would) and therefore does not serve the purpose. Also, the console.log() seems to be ignored in the callbacks.

Moreover, I tried proxying to http://user:[email protected]/resource-page which also fails.

Am I missing something here? Is there a better way to do it?