First some context: Here's a typical authentication scenario:

1. An express.js server with signed cookies support
2. User logs in from the frontend and the backend sets the cookie in the response
3. This cookie will be set on the user's browser
4. From this point, whenever the user makes a request from the browser, the cookie will be attached to req.headers.cookie

Now that we've set the context, here's what I want to do: I want to build an API feature to the server, but instead of adding additional API key generation and management logic, I would like to use the existing cookie.

Basically I want to do this:

1. User goes to an "API key" page, which will send a request to the server, and the server will be able to get the cookie from this very request, through the req.headers.cookie attribute.
2. The server then renders the req.headers.cookie back to the user as a response
3. The user takes that cookie string from the API key page (which is technically also accessible inside their browser "application" tab but I'm just making it easier so the user doesn't need to open the browser console) and uses it as an "API key" alternative.

For example, here's a sample route handler for the API Key page:

app.get("/api_keys", authenticate, (req, res) => {
  res.render("api_keys", {
    cookie: req.headers.cookie
  })
})

This will display the cookie string on the /api_keys page.

Then the user may be able to copy and paste the full cookie string into the following code:

fetch(API_URL, {
  headers: { cookie: <PASTE_COOKIE_HERE> }
}).then((response) => {
  console.log(response)
})

and it should work. And it does (I just checked).

My question is: Is this OK to secure APIs this way?