Authentication with JWT in Next.js: Securing Your Application

Authentication is a critical aspect of modern web applications, ensuring that only authorized users can access certain resources. JSON Web Tokens (JWT) are a popular method for implementing authentication, providing a secure and scalable way to manage user sessions. In this article, we’ll explore how to implement authentication with JWT in Next.js, including setup, usage, and best practices.

What is JWT?

JSON Web Tokens (JWT) are a compact, URL-safe means of representing claims between two parties. JWTs are commonly used for authentication, as they can securely transmit information between the client and server. A JWT consists of three parts: a header, a payload, and a signature.

How to Implement Authentication with JWT in Next.js

To implement authentication with JWT in Next.js, you need to generate a token when a user logs in, store the token securely, and verify the token on subsequent requests. Here’s how to do it:

1. Generate a JWT

When a user logs in, generate a JWT and send it to the client. Here’s an example of how to generate a JWT using the jsonwebtoken library:

import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    // Validate username and password
    if (username === 'admin' && password === 'password') {
      const token = jwt.sign({ username }, 'your-secret-key', { expiresIn: '1h' });
      res.status(200).json({ token });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

In this example, a JWT is generated and sent to the client when the user logs in.

2. Store the JWT Securely

Store the JWT securely on the client side, typically in an HTTP-only cookie or local storage. Here’s an example of how to store the JWT in an HTTP-only cookie:

import Cookies from 'js-cookie';

export default function Login() {
  const handleLogin = async () => {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: 'admin', password: 'password' }),
    });

    const data = await response.json();
    Cookies.set('token', data.token, { httpOnly: true });
  };

  return (
    <div>
      <h1>Login</h1>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

In this example, the JWT is stored in an HTTP-only cookie after the user logs in.

3. Verify the JWT

On subsequent requests, verify the JWT to ensure that the user is authenticated. Here’s an example of how to verify a JWT in an API route:

import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  const token = req.cookies.token;

  if (!token) {
    res.status(401).json({ message: 'Unauthorized' });
    return;
  }

  try {
    const decoded = jwt.verify(token, 'your-secret-key');
    res.status(200).json({ message: 'Welcome, ' + decoded.username });
  } catch (error) {
    res.status(401).json({ message: 'Invalid token' });
  }
}

In this example, the JWT is verified before allowing access to the protected route.

Best Practices for Authentication with JWT

• Use HTTPS: Always use HTTPS to ensure that JWTs are transmitted securely.
• Set Expiration: Set an expiration time for JWTs to reduce the risk of token theft.
• Secure Storage: Store JWTs securely, preferably in HTTP-only cookies.

Secrets and Hidden Facts

• Refresh Tokens: Use refresh tokens to issue new JWTs without requiring the user to log in again.
• Token Revocation: Implement token revocation to invalidate JWTs when necessary.
• Custom Claims: Use custom claims in JWTs to store additional user information.

Conclusion

Authentication with JWT is a powerful and scalable way to secure your Next.js application. By following best practices and leveraging advanced techniques, you can ensure that your application is secure and provides a seamless user experience.