state is interstitial, reason: cross-origin-referrer

[gerald-lbn]

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

  pk_test_cHJlY2lvdXMtaG9va3dvcm0tNTUuY2xlcmsuYWNjb3VudHMuZGV2JA

Package + Version

• @clerk/nextjs (4.23.2)

Dependencies + versions

{  
  "dependencies": {
    "@clerk/nextjs": "^4.23.2",
    "@prisma/client": "^5.0.0",
    "@t3-oss/env-nextjs": "^0.3.1",
    "@tanstack/react-query": "^4.29.7",
    "@trpc/client": "^10.26.0",
    "@trpc/next": "^10.26.0",
    "@trpc/react-query": "^10.26.0",
    "@trpc/server": "^10.26.0",
    "next": "^13.4.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "superjson": "1.12.2",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@types/eslint": "^8.37.0",
    "@types/node": "^18.16.0",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "@typescript-eslint/eslint-plugin": "6.0.0",
    "@typescript-eslint/parser": "6.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.40.0",
    "eslint-config-next": "^13.4.2",
    "postcss": "^8.4.21",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.2.8",
    "prisma": "^5.0.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.0.4"
  }
}

Browser/OS

• Firefox 115.0.02 (64 bits)
• Node 18.17.0

Description

I am deploying an app with docker, a proxy and nextjs (standalone) using create-t3-app. Once I logged in, the page keeps refreshing indefinitely.
Here are the logs when I set debug to true in the middleware.ts file

le-qcm  | Clerk debug start :: authMiddleware
le-qcm  | -- URL debug, {
le-qcm  |   "url": "http://36f2bef4ae24:3000/app",
le-qcm  |   "method": "GET",
le-qcm  |   "headers": "{\"accept\":\"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8\",\"accept-language\":\"en-US,en;q=0.5\",\"connection\":\"close\",\"cookie\":\"__clerk_db_jwt=SECRET; __client_uat=1691507470; __session=SECRET\",\"dnt\":\"1\",\"host\":\"192.168.X.X:3000\",\"referer\":\"https://quizz.insat.fr/app\",\"sec-fetch-dest\":\"document\",\"sec-fetch-mode\":\"navigate\",\"sec-fetch-site\":\"same-origin\",\"upgrade-insecure-requests\":\"1\",\"user-agent\":\"Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0\",\"x-forwarded-for\":\"X.X.X.X,::ffff:192.168.X.X\",\"x-forwarded-host\":\"quizz.insat.fr\",\"x-forwarded-port\":\"3000\",\"x-forwarded-proto\":\"http\",\"x-forwarded-server\":\"quizz.insat.fr\",\"x-invoke-path\":\"\",\"x-invoke-query\":\"\",\"x-middleware-invoke\":\"1\"}",
le-qcm  |   "nextUrl": "http://36f2bef4ae24:3000/app",
le-qcm  |   "clerkUrl": "http://quizz.insat.fr:3000/app"
le-qcm  | }
le-qcm  | -- Options debug, {
le-qcm  |   "debug": true,
le-qcm  |   "beforeAuth": false,
le-qcm  |   "afterAuth": true
le-qcm  | }
le-qcm  | -- authenticateRequest state is interstitial, {
le-qcm  |   "status": "interstitial",
le-qcm  |   "reason": "cross-origin-referrer",
le-qcm  |   "message": "",
le-qcm  |   "frontendApi": "precious-hookworm-55.clerk.accounts.dev",
le-qcm  |   "publishableKey": "pk_test_SECRET",
le-qcm  |   "isSatellite": false,
le-qcm  |   "domain": "",
le-qcm  |   "proxyUrl": "",
le-qcm  |   "signInUrl": "",
le-qcm  |   "isSignedIn": false,
le-qcm  |   "isInterstitial": true,
le-qcm  |   "isUnknown": false
le-qcm  | }

I was redirected to http://36f2bef4ae24:3000/app but I set CLERK_TRUST_HOST to true and the problem was fixed

If I close the tab and reopen it:

• the app does not refresh indefinitely but all requests to my db have 401 Unauthorized.
• I can see my profile picture, username and email with <UserButton />

At first glance, this might be related to #1436, but I synced the server's clock.

Note: I don't have this issue when I run it in my computer

Replicate the issue

• Clone Shinyhero36/minimal-t3-clerk (a minimal repo to replicate the issue)
• Copy .env.example to .env and set the env vars
• Run docker compose -f docker-compose.prod.yml build
• Run docker compose -f docker-compose.prod.yml up
• Open http://localhost:3000, click on View app and log in

[YourAverageTechBro]

I just started getting this issue too.

In my instance I have a chrome extension (built using the Clerk chrome extension starter kit here) that I am using to request data from my separate NextJS endpoint (which also uses Clerk) and it is failing due to this error.

It worked 12 hours ago and then out of nowhere it stopped working.

[dimkl]

Hello @Shinyhero36 and thank you for reporting this issue.
Based on the debug logs it seems that the x-forwarded-port is incorrectly populated with the port of the internal application.
If you are using a @clerk/nextjs@^4.23.0 the CLERK_TRUST_HOST environment variable should NOT make any difference since we enabled the functionality by default, so there is no need for an env.
I will try to clone and run the reproduction repo and come back to you with more information. Until then, could you provide information about your deployment?

• Provider (eg AWS)
• Service(s) of the provider used (eg AWS Amplify)
• Setup of the service(s) (eg Browser -> CDN -> Load balancer -> Server)

[gerald-lbn]

The project is running on a self-hosted VMWare ESXI with apache2 and a reverse proxy on the gateway. The docker image is running on a Debian 12 VM

[fanckush]

any update or workaround for this bug?

[dimkl]

Hello everyone,
by using the following setup and steps, i managed to run the application in https://quizz.insat.fr and successfully redirect back without getting the cross-origin-referer error:

• edit the /etc/hosts to quizz.insat.fr in localhost
• serve the https://quizz.insat.fr from nginx

 #
    server {
        listen        443 ssl http2;
        server_name   quizz.insat.fr;

        location      / {
            proxy_pass http://host.docker.internal:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Original-Host $host;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Port $server_port;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_redirect off;

            proxy_http_version 1.1;
        }
    }

• run application (using the README)
• navigate to https://quizz.insat.fr
• Click View app & login though hosted pages

Based on the above, the issue

Based on the debug logs it seems that the x-forwarded-port is incorrectly populated with the port of the internal application.

is related to the infrastructure setup, probably a service (eg apache2) that handles the request before reaching your application is changing the headers.
Since it takes a lot of time to replicate and deploy a test application with the same setup, i cannot repeat the exact same behavior. Also it's probably out of the @clerk/nextjs scope.

One last thing I could suggest is checking the configuration of the x-forwarded-* headers being passed to your application to match the right origin and protocol based on the URL accessed from the browser.

[gerald-lbn]

probably a service (eg apache2) that handles the request before reaching your application is changing the headers.
It was indeed related to apache2. Had to play with the headers to resolve the issue.

I still needed to sync the clock with a NTP server to fix the interstitial state issue.

Thank you for the time you dedicated to this issue 🙏

You can mark this issue as resolved