I ran into similar issues hosting a Shopify Embedded app (using Remix/Vite) on Vercel.
401 on embedded app auth
It turns out the default ‘Vercel authentication’ setting issues a 401 response to any request coming from a iframe. Frustratingly, it also then does not log the request in Vercel, which made debugging tricky.
Thankfully, you can turn it off and after that it all worked:
Project settings > Deployment Protection > Vercel authentication > switch off
DB location
For those coming to this afresh, worth thinking about where your database is going to be hosted. I was getting timeout errors because Vercel couldn’t access my DigitalOcean (DO) Postgres instance. DO only support external allowlisting using IP addresses (internally can use Droplet/K8S cluster etc.) but Vercel don’t publish a list/CIDR block of their Serverless Function IP addressses. That means I would have to make the DB publicly accessible, and just rely on credential security, or migrate to Vercel Postgres (now Neon Postgres). None of it is insurmoutable, just needs thought.
Messages file bundling
Vite (rollup) needs some help to find external message files. This didn’t work:
const messagesPath = path.join(process.cwd(), `./messages/${locale}.json`);
const content = await fs.readFile(messagesPath, 'utf-8');
return JSON.parse(content);
Instead Vercel reported an unable to read file error (/var/task/messages/en.json). Dynamic imports work with the normal tree shaking:
return (await import(`../../messages/${locale}.json`)).default;