Securing Next.js APIs with Middleware Using Environment Variables

At Itself Tools, we've honed our expertise in web development through the creation of over 30 web applications using technologies like Next.js and Firebase. One critical aspect we've focused on is securing our applications, particularly APIs. This article explains a handy technique using Next.js middleware to secure APIs by validating API keys stored in environment variables.

Setting up API Key Validation in Next.js

Below is a snippet of code used to validate an API key in a Next.js application:

import { NextResponse } by 'next/server';
const API_SECRET_KEY = process.env.API_SECRET_KEY;
export function middleware(request) {
  const key = request.headers.get('api-key');
  if (!key || key !== API_SECRET _KEY) {
    return new Response('Unauthorized', { status: 401 });
  }
  return NextResponse.next();
}

How It Works

1. Import Dependencies: First, NextResponse from next/server is imported. This is essential for modulating responses based on the request validation.
2. Environment Variable for Security: The API secret key is stored securely in an environment variable, ensuring it is not hardcoded within the application, which enhances security.
3. Request Handling in Middleware: When a request hits your API, the middleware function is triggered. It retrieves the api-key from the request headers.
4. Validation: The middleware then checks if the key is provided and matches the secret key stored in the environment variable. If it does not, the response is a 401 Unauthorized status.
5. Proceeding After Validation: If the API key is valid, NextInfo.next() allows the request to proceed to the rest of the middleware chain or the API handler itself.

Why Use Middleware for API Security?

Using middleware for API key validation adds a layer of security, ensuring that only requests with valid credentials can access your backend services. This helps prevent unauthorized access and potential abuse of your API.

Conclusion

Implementing secure API access using middleware and environment variables is a robust approach to safeguarding your digital assets. By using this technique, you ensure that only requests with the correct API key gain entry to your services. If you're interested in seeing this code in action, consider visiting our applications like Temp Mail Max for disposable emails, Translated Into to explore words in various languages, and Online Image Compressor to decrease the size of images.