Nextjs - The Request HTTP Origin header must be equal to or a subdomain of the requesting URL

YahiaElTai commented 1 year ago

[x] Review the documentation: https://clerk.com/docs
[x] Search for existing issues: https://github.com/clerkinc/javascript/issues
[x] Go through package changelog files.
[x] Provide the Frontend API key from your application dashboard.

Package + Version

[ ] @clerk/clerk-js
[ ] @clerk/clerk-react
[x] @clerk/nextjs
[ ] @clerk/remix
[ ] @clerk/types
[ ] @clerk/themes
[ ] @clerk/localizations
[ ] @clerk/clerk-expo
[ ] @clerk/backend
[ ] @clerk/clerk-sdk-node
[ ] @clerk/shared
[ ] @clerk/fastify
[ ] @clerk/chrome-extension
[ ] gatsby-plugin-clerk
[ ] build/tooling/chore
[ ] other:

Dependencies + versions

{  
    "@clerk/nextjs": "^4.23.2",
    "@prisma/client": "5.1.1",
    "@t3-oss/env-nextjs": "^0.6.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
}

Description

I'm deploying a Nextjs app to Vercel. On all preview URL, clerk is able to show the sign in pages correctly but on some and not all production URLs this doesn't work and I receive an error

{
code: "origin_invalid"
long_message: "The Request HTTP Origin header must be equal to or a subdomain of the requesting URL." 
message : "Invalid HTTP Origin header"
}

I have tried inspecting the request headers and all of them seem to be correct. What I don't really understand is that why this works fine on all preview URLs but it doesn't work for only some production URLs.

I'm using the production URLs to run Checkly tests in the Checks step in Vercel before assigning the final domain.

It works fine on the custom domain I have set for production but it doesn't work for the automatically assigned production domain by Vercel.

the screenshot below shows the request header from the network tab and this URL is exactly the URL of the production deployment.

LekoArts commented 11 months ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

YahiaElTai commented 11 months ago

Hello thank you for your message, I have already contacted Clerk support directly and I forgot to close this issue, apologizes for the oversight.

According to support this issue is known and solvable only by adding a static staging env which I decided to not to do. Thanks

bullypb23 commented 8 months ago

@YahiaElTai Which env you added to fix this issue? I am running on the same issue, I added NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY as env variables.

bullypb23 commented 7 months ago

@LekoArts Hello, can you help me solve this issue? I tried forking Clerk demo repo for next.js and I am getting same error.

jescalan commented 3 months ago

For anyone looking on, we have a guide here on how to configure preview environment with Clerk!

clerk / javascript