Manifest file - 401 unauthorized

[bart-sofomo]

I'm running nextjs project with next-auth. Using https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest no matter what I'm trying I'm getting 401 unauthorized on vercel preview for manifest file.
It seems like there is no ability to add crossorigin="use-credentials" on manifest file.

This does not happen locally - only on vercel.

Any idea on how could I fix this?

[erobbt]

I am having the same issue. I think I am going to try and resolve it with a vercel.json in the root of my project. There is a good article about the 401 here -> https://medium.com/@aurelien.delogu/401-error-on-a-webmanifest-file-cb9e3678b9f3

It has to do with permissions set in the CORS

OR, this is what I am going to look at
//vercel.json
{
"headers": [
{
"source": "/manifest.webmanifest",
"headers": [
{ "key": "Access-Control-Allow-Origin", "value": "*" } // Adjust if needed
]
}
]
}

[zoolyka]

Adding these headers wont help, the authentication must happen before they could be retrieved.

[xgracias]

@bart-sofomo were you able to resolve the issue?

[erobbt]

I ran out of time trying to resolve using manifest.ts and CSP permissions, had to deploy. To work around the issue I removed the manifest.ts from the root. Created a regular (standard) manifest.webmanifest file and placed it in the root. Next.js 14 sees it in the root and adds metadata ( link rel="manifest" href="/manifest.webmanifest" ) to the pages. The permissions issue only comes up if I am trying to dynamically generate the manifest.webmanifest from manifest.ts. using:
export default function manifest(): MetadataRoute.Manifest{.

Its something I will need to revisit when I have more time.

[fzkhan19]

@bart-sofomo Did you resolve it? I'm facing the same issue on production

[zoolyka]

The error also exists with static files, not just the dynamic version.
Seems currently no way to test a PWA when the site is protected with HTTP authentication.
Great.

Edit: as for now I've solved it by extending the metadata object from the root layout.jsx and specifying the contents of the manifest.json as base64 encoded data:

export const metadata = {
...
  manifest: 'data:application/manifest+json;base64,...base64 encoded manifest.json...'
};

[rakurtz]

it happened to me behind a caddy reverse proxy with enabled basic-auth. I excluded the path /manifest.webmanifest and it worked just fine

[msinta]

I discovered the issue was due to Vercel Authentication in the project settings. When enabled on preview deployments, it blocks access to static files like your manifest and icons, causing 401 errors. Disabling authentication fixes it, and production isn’t affected.

[paulschuetz]

I went to hosting the manifest.json file on S3 or R2 because the only other way to test PWAs was to buy vercel advanced preview protection and excluding our preview domain from vercel authentication...