How to Protect an API with Basic Authentication in Effect Typescript

const AuthLive = Layer.effect(
  Authorization,
  Effect.gen(function* () {
    const adminUsername = yield* Config.string("ADMIN_USERNAME");
    const adminPassword = yield* Config.string("ADMIN_PASSWORD");

    return {
      basic: Effect.fnUntraced(function* ({ username, password }) {
        if (username !== adminUsername) {
          yield* HttpApp.appendPreResponseHandler((_, response) =>
            HttpServerResponse.setHeader(
              response,
              "WWW-Authenticate",
              'Basic realm="Restricted Area"'
            )
          );
        }

        return yield* username === adminUsername &&
        Redacted.value(password) === adminPassword
          ? Effect.void
          : new Unauthorized();
      }),
    };
  })
);
// usage
const api = HttpApi.make("api").add(reportsGroup).middleware(Authorization);

const AuthLive = Layer.effect(
  Authorization,
  Effect.gen(function* () {
    const adminUsername = yield* Config.string("ADMIN_USERNAME");
    const adminPassword = yield* Config.string("ADMIN_PASSWORD");

    return {
      basic: Effect.fnUntraced(function* ({ username, password }) {
        if (username !== adminUsername) {
          yield* HttpApp.appendPreResponseHandler((_, response) =>
            HttpServerResponse.setHeader(
              response,
              "WWW-Authenticate",
              'Basic realm="Restricted Area"'
            )
          );
        }

        return yield* username === adminUsername &&
        Redacted.value(password) === adminPassword
          ? Effect.void
          : new Unauthorized();
      }),
    };
  })
);
// usage
const api = HttpApi.make("api").add(reportsGroup).middleware(Authorization);