External page with http basic auth doesn't ask for credentials (401 Unauthorized)

[c1tru55]

Hi all. I have external page (which is not handled by Next.js, but lives under same domain) with http basic auth. When I open it in incognito - everything works, but when I open it in normal way - it just returns 401 Unauthorized without asking for credentials. How to resolve this?

[c1tru55]

@DuCanhGH could you advice?

[DuCanhGH]

@c1tru55

with http basic auth

What do you mean by this? How do you set the Authorization header for this navigation request? Also, unless you set fetchOptions for the matching strategy, your request options are passed as-is.

which is not handled by Next.js, but lives under same domain

I'd consider adding a subdomain or moving the whole thing to your Next.js project.

could you advice?

Please. I don't really have so much time for Serwist right now. You may notice that the progress of the project has even stagnated for quite some time.

[c1tru55]

@DuCanhGH hey

What do you mean by this? How do you set the Authorization header for this navigation request? Also, unless you set fetchOptions for the matching strategy, your request options are passed as-is.

http basic auth is enabled in web server config just for this page. user has to enter credentials manually in browser.

I'd consider adding a subdomain or moving the whole thing to your Next.js project.

well, I'm using API Platform (which is Symfony as backend + Next.js as frontend), here is demo: https://demo.api-platform.com/ and I want to protect single page for api documentation, which is generated and handled by backend: https://demo.api-platform.com/docs

[c1tru55]

found similar issue in another library: nuxt-community/pwa-module#94

[DuCanhGH]

@c1tru55

http basic auth is enabled in web server config just for this page. user has to enter credentials manually in browser.

Seems that you use WWW-Authenticate to trigger the browser to ask for credentials.

Normally, I'd use NetworkOnly for this type of pages. I'd also add Vary: Authorization, <other-header-name>, ... to the response's headers. I'd also not precache pages like this, but your page shouldn't be precached by default anyway.

Seems that you'd also need to pass credentials: "include" or credentials: "same-origin" (?) to the matching strategy's fetchOptions as well.

Hmm, if you are already doing this, I'm not sure how the error would be triggered. There's way too little detail. You don't even provide the request/response headers!

Edit: seems to be some browser-related issues. Not too sure.