Authenticate website under Cloudflare Pages


I’m trying to set up basic authentication on a website (A react application) hosted on Cloudflare pages.

I’ve set up a worker with the code from the Auth with headers example, and I’ve set up the worker to respond when calling

Now, each time I try to visit, a 522/523 error is shown.

This does not happen if I use the same worker to protect a self-hosted application running on

Any idea why is this happening?


An even simpler example not working with Cloudflare Pages is the following

addEventListener("fetch", (event) => {
      (err) => new Response(err.stack, { status: 500 })

async function handleRequest(request) {
  return fetch(request)

The above example works for a self-hosted app but not for Cloudflare pages.
The above example is now running on the following Cloudflare page url:

I stumbled on the same problem: Having a basic auth worker triggered by a Cloudflare Pages ( url result in all kinds of weird behaviour:

  • Once the worker is deployed, other pages in the give a 522 error
  • The 522-error can be solved by redeploying the, but then the worker is not triggered anymore.

Putting my behind a custom domain whose DNS is proxied by Cloudflare solves the problem.