API Keys

Some APIs require the use of so called API keys. In practice, API keys are strings that are sent to the API server on each request, so that the server can verify that the user of the API has been granted access to the API. As an example, the Carbon Interface API provides carbon emissions estimates, but using it requires an API key. As described at https://docs.carboninterface.com/#/?id=authentication, one needs to include a an API key to the header for each request. API keys are available for signed up users.

The way how API keys are included to the request depends on the application. Three most common ways include (1) including the API key in the path or the request parameters, (2) including the API key in the request headers, and (3) including the API key in the request body.

Implementing an application that requires an API key would be done so that the headers of each request would be analyzed for a specific API key. If that API key would be present, the request would be processed, while otherwise an error would be returned. This could be done, for example, using a middleware. The following outlines an example of an application that expects that each request has the API key Alohomora.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";
import { cors } from "https://deno.land/x/hono@v3.12.11/middleware.ts";

const app = new Hono();
app.use(cors());

const apiKeyVerification = async (c, next) => {
  console.log(c.req.header("API_KEY"));
  if (c.req.header("API_KEY") === "Alohomora") {
    await next();
  } else {
    return c.text("Invalid API key", 400);
  }
};

app.use("*", apiKeyVerification);

app.get("/", (c) => c.json({ pass: "You pass." }));

Deno.serve(app.fetch);

The above application expects that every request made to the server would contain a request header API_KEY, and that the value for the request header would be Alomohora. Only such requests would be considered by the application -- other requests would be rejected.

curl localhost:8000
Invalid API key
curl -H "API_KEY: Alomohora" localhost:8000
Invalid API key
curl -H "API_KEY: Alohomora" localhost:8000
{"pass":"You pass."}

The above application could be used from a client-side application with a fetch request. The following example outlines a component that provides a button. Clicking the button makes a request to the server, utilizing the API key in the process.

<script>
  const retrieveData = async () => {
    const response = await fetch("http://localhost:8000/", {
      headers: {
        API_KEY: "Alohomora",
      },
    });

    if (response.status !== 200) {
      alert("Something went wrong!");
      return;
    }

    const data = await response.json();
    alert(data.pass);
  };
</script>

<button class="btn btn-primary" on:click={retrieveData}>Go!</button>