JSON Web Token (JWT) authentication is a popular method for securing web applications by issuing tokens for user authentication. Integrating JWT authentication within a Next.js application ensures secure access to protected routes. Let’s explore how to implement JWT authentication in a Next.js project.

Setting Up JWT Authentication

1. Install Required Packages

Use packages like jsonwebtoken and cookie to handle JWT creation, verification, and cookie storage:

npm install jsonwebtoken cookie

2. Create JWT Functions

Set up functions to create, verify, and manage JWT tokens:

// Example functions for JWT token creation and verification

const jwt = require('jsonwebtoken');
const { serialize, parse } = require('cookie');

const secret = 'Your_Secret_Key'; // Replace with your secret key

export function createToken(payload) {
  return jwt.sign(payload, secret, { expiresIn: '1h' }); // Set token expiry as needed
}

export function verifyToken(token) {
  try {
    return jwt.verify(token, secret);
  } catch (error) {
    return null;
  }
}

export function setTokenCookie(res, token) {
  const cookie = serialize('token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV !== 'development',
    maxAge: 60 * 60, // Set cookie expiry time
    sameSite: 'strict',
    path: '/',
  });
  res.setHeader('Set-Cookie', cookie);
}

3. Integrate with Next.js API Routes

Utilize Next.js API routes to handle authentication logic:

// Example Next.js API route for authentication

import { createToken, setTokenCookie, verifyToken } from 'path/to/jwt-functions';

export default (req, res) => {
  if (req.method === 'POST') {
    // Perform authentication logic
    // Example: Check user credentials and generate token
    const token = createToken({ userId: 'user_id_here' });

    // Set token in a cookie
    setTokenCookie(res, token);
    res.status(200).json({ success: true });
  } else if (req.method === 'GET') {
    // Retrieve and verify token from cookie
    const token = parse(req.headers.cookie).token;
    const verifiedToken = verifyToken(token);

    // Example: Verify user access based on the token
    if (verifiedToken) {
      res.status(200).json({ authenticated: true });
    } else {
      res.status(401).json({ authenticated: false });
    }
  }
};

Securing Routes with JWT

4. Protecting Routes

Secure specific routes by verifying JWT tokens in the API routes:

// Example: Next.js API route to protect access to a specific route

export default (req, res) => {
  const token = parse(req.headers.cookie).token;
  const verifiedToken = verifyToken(token);

  if (verifiedToken) {
    // Allow access to protected content
    res.status(200).json({ message: 'Access granted' });
  } else {
    // Redirect or deny access
    res.status(401).json({ message: 'Unauthorized' });
  }
};

Conclusion

Integrating JWT authentication in Next.js applications involves managing JWT tokens, verifying user access, and securing routes to control user authentication and authorization. By leveraging JWT tokens and Next.js API routes, developers can ensure secure access to protected routes within their applications.

You Might Also Like