How to protect API routes in NextJS?

Next.js offers multiple mechanisms to secure API routes, ensuring that sensitive data and features are accessible only to authorized users. Here are some common strategies:

1. Built-in API Middleware

In Next.js, you can implement middleware within API routes to inspect requests and authorize or deny access based on requirements. For example:

javascript
// pages/api/protected.js

export default function handler(req, res) {
  if (!req.headers.authorization || req.headers.authorization !== "Secret-Token") {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  // If verification passes, continue processing the request
  res.status(200).json({ data: 'Protected content' });
}

2. JWT (JSON Web Tokens)

You can require clients to provide a JWT when requesting API endpoints and verify its validity. For example, using the jsonwebtoken library:

javascript
import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  try {
    const token = req.headers.authorization.split(' ')[1]; // Bearer <token>
    jwt.verify(token, process.env.JWT_SECRET);

    // If verification passes
    res.status(200).json({ data: 'Protected content' });
  } catch (error) {
    res.status(401).json({ error: 'Unauthorized' });
  }
}

3. Third-Party Authentication Services

Integrate services like Auth0 or Firebase Authentication, leveraging their SDKs to manage user login states and access permissions.

4. Sessions and Cookies

During login, create a session and set a cookie, then check this cookie in API routes to determine if the user is authenticated:

javascript
import { getSession } from 'next-auth/react';

export default async function handler(req, res) {
  const session = await getSession({ req });
  if (!session) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  // User is authenticated, process API request
  res.status(200).json({ data: 'Protected content' });
}

5. Environment Variables

For secrets that should only be known by the server (such as API keys), use environment variables to protect them, ensuring they are not exposed in client-side code.

6. Permission Checks

For finer-grained permission control, add role or permission check logic within API routes to determine if users have access to specific data or can perform certain actions.

7. Restrict Cross-Origin Requests

Set appropriate CORS (Cross-Origin Resource Sharing) policies to restrict which external domains can access your API.

By implementing one or more of these methods, you can secure Next.js API routes against unauthorized access. When implementing security measures, ensure you follow best practices and adjust based on your specific requirements and security needs.