Securing and Observing Your Task Manager API with Codex
Welcome: Locking the Door and Turning on the Lights
Welcome back. At this point, your Task Manager API can:
- Represent tasks with a shared
Taskmodel and in-memory store - Manipulate them through a clean service layer
- Validate incoming payloads and surface clear errors through HTTP
That’s a solid backend—but right now it’s wide open to anyone who can hit your endpoints, and you have very little visibility into who’s calling what.
In this lesson, you’ll use Codex to:
- Configure a secret API key in environment variables
- Add a middleware that enforces that key on
/api/tasksand logs every request - Build a Task Manager API testing panel in
src/app/page.tsxthat sends the right headers and lets you exercise all CRUD endpoints from the browser
By the end, you’ll have a Task Manager backend with a simple but real security gate and a handy UI “cockpit” for manual testing.
What We’re Building and Why It Matters
This lesson introduces two important backend concepts:
-
Configuration via environment variables
- Secrets (like API keys) never belong in source code.
- Using
.env.locallets you swap configuration per environment without changing code.
-
Cross-cutting middleware for security and logging
- Instead of securing each route individually, you add a single gate that runs before all
/api/taskshandlers. - The same middleware can also log the who/what/when of every request.
- Instead of securing each route individually, you add a single gate that runs before all
On top of that, you’ll wire a simple UI panel that:
- Lets you type an API key
- Sends that key in the
x-api-keyheader on all requests - Provides controls to call every task endpoint
- Shows a live log of responses and client-side errors
This combination gives you both a lock on the API and a dashboard to test it.
How We’ll Use Codex in This Lesson
Codex will help you in three small, focused bursts:
-
Environment setup
- Edit
.env.localto defineSECRET_API_KEY=...
- Edit
-
Middleware implementation
- Fill in
src/middleware.tswith:- Path matching for
/api/tasks - API key checks
- Structured console logging
- Path matching for
- Fill in
-
UI testing panel
- Extend
src/app/page.tsxinto a control panel that:- Manages state for API key and task fields
- Sends
x-api-keyin everyfetch - Logs results in a “Logs” section
- Extend
Your prompts should continue to follow the pattern you’ve been practicing:
- “Modify only
<file>.” - Describe the exact behavior in detail.
- Explain any important security or logging rules.
- “Do not modify any other files. Show the full updated contents of
<file>.”
