Authenticate website under Cloudflare Pages

Hi,

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 mypageapp.pages.dev.

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

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

Any idea why is this happening?

Thanks

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

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (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:

https://0b8e1c92.azure-boards-pbi-autorule-docs.pages.dev/

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

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

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