Force Basic Auth for your Next.JS site

_middleware.ts

import { NextRequest, NextResponse } from "next/server";

// eslint-disable-next-line import/prefer-default-export
export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get("authorization");
  // if the SITE_USERNAME and SITE_PASSWORD env values exist
  // then we will require authentication for all requests
  if (process.env.SITE_USERNAME && process.env.SITE_PASSWORD) {
    if (basicAuth) {
      const auth = basicAuth.split(" ")[1];
      const [user, pwd] = Buffer.from(auth, "base64").toString().split(":");

      if (
        user === process.env.SITE_USERNAME &&
        pwd === process.env.SITE_PASSWORD
      ) {
        return NextResponse.next();
      }
    }

    return new Response("Auth required", {
      status: 401,
      headers: {
        "WWW-Authenticate": 'Basic realm="Secure Area"',
      },
    });
  }
}

Demo for GA version of middleware available at: https://github.com/jordanmaslyn/middleware-basic-auth-demo