Adding Basic Auth to a Static Cloudflare Page

1: Why Add Basic Auth to a Static Cloudflare Page?
As a remote software developer, I know how we frequently need to access and make tools to make our work easier, and how important it is to share this with our colleagues, however I also sometimes don’t want to share these with the entire world, and the dreaded AI scrapers. It’s also extremely convenient for sites like this, where it was created using a CI pipeline, but I don’t want it to be accessible until it was complete, hence the need for basic auth.

2: What You’ll Need Before Getting Started

• A git repository
• A cloudflare account, with workers enabled
• An IDE and Website

3: Creating the Functions Folder in Your Static Project
The way this script works is using a tool in Cloudflare called Cloudflare Functions which allows a serverless site to run with middleware. To set this up, in the root folder of your repository create a /functions folder, which will be automatically picked up by Cloudflare when deployed.

4: Adding Middleware to Protect Specific Routes
After making the functions folder, you can make an _middleware.js file, which basically applies the code to the entirety of the website (don’t worry we will add specifc paths later!)

5: Implementing Basic Auth in Cloudflare Pages
This code should then be added to your _middleware.js file.

export async function onRequest(context) {
  const USERNAME = context.env.AUTH_USER || "admin";
  const PASSWORD = context.env.AUTH_PASS || "secret";

  const url = new URL(context.request.url);
    if (!authHeader || !checkAuth(authHeader, USERNAME, PASSWORD)) {
      return new Response("Authentication required", {
        status: 401,
        headers: {
          "WWW-Authenticate": 'Basic realm="Protected Area"',
        },
      });
    }
  }

  return context.next();
}

function checkAuth(header, username, password) {
  const encoded = header.replace("Basic ", "");
  const decoded = atob(encoded);
  const [user, pass] = decoded.split(":");
  return user === username && pass === password;
}

In your Cloudflare Page you should then add in two env variables, one for the username with the name as AUTH_USER and the password should also be added in as AUTH_PASS.

6: Protect specific endpoints
To protect a specifc endpoint like /admin you must update your _middleware.js to contain this:

export async function onRequest(context) {
  const USERNAME = context.env.AUTH_USER || "admin";
  const PASSWORD = context.env.AUTH_PASS || "secret";

  const url = new URL(context.request.url);

  // Only protect /admin and subpaths
  if (url.pathname.startsWith("/admin")) {
    const authHeader = context.request.headers.get("Authorization");

    if (!authHeader || !checkAuth(authHeader, USERNAME, PASSWORD)) {
      return new Response("Authentication required", {
        status: 401,
        headers: {
          "WWW-Authenticate": 'Basic realm="Protected Area"',
        },
      });
    }
  }

  return context.next();
}

function checkAuth(header, username, password) {
  const encoded = header.replace("Basic ", "");
  const decoded = atob(encoded);
  const [user, pass] = decoded.split(":");
  return user === username && pass === password;
}

7: Final Thoughts
I hope this helped, and if you have any questions about it or need a hand don’t hesitate to email blog@bizbazboz.uk for assitance!