Next.js JWT Authentication with Protected Routes

Next.js is a popular framework for building React applications. It provides great support for server-side rendering, static site generation, and API routes. In this article, we will learn how to implement JWT authentication and protect routes in a Next.js app.

Setting up JWT Authentication

First, we need to install the necessary packages for JWT authentication. We can use the `jsonwebtoken` package to generate and verify JWT tokens. Additionally, we can use the `cookie` package to handle HTTP-only cookies for secure storage of the JWT token.

    
      npm install jsonwebtoken cookie
    
  

Next, we need to create a utility function to generate JWT tokens and set them in HTTP-only cookies. We can create a function called `setAuthCookies` that takes a user object and returns a signed JWT token and an HTTP-only cookie.

    
      const jwt = require('jsonwebtoken');
      const cookie = require('cookie');

      function setAuthCookies(user) {
        const token = jwt.sign({ id: user.id, email: user.email }, process.env.JWT_SECRET);
        const cookieHeader = cookie.serialize('token', token, {
          httpOnly: true,
          secure: process.env.NODE_ENV === 'production',
          sameSite: 'strict',
          path: '/'
        });
        return cookieHeader;
      }
    
  

Protecting Routes

Now that we have set up JWT authentication, we can protect certain routes in our Next.js app. We can create a Higher Order Component (HOC) called `withAuth` that checks for the presence of a valid JWT token in the cookie and redirects the user if they are not authenticated.

    
      import { useRouter } from 'next/router';

      function withAuth(Component) {
        return function(props) {
          const router = useRouter();
          // logic to check for JWT token in cookie
          if (!hasToken) {
            router.push('/login');
            return null;
          }
          return ;
        }
      }
    
  

Conclusion

In this article, we learned how to implement JWT authentication and protect routes in a Next.js app. By using JWT tokens and HTTP-only cookies, we can ensure a secure and reliable authentication system for our application.