Implementing Authentication in a Next.js App using Router, Sessions, Cookies, and JWTs

In this tutorial, we will be exploring how to implement router authentication in a Next.js app using sessions, cookies, and JSON Web Tokens (JWTs). Router authentication is essential for protecting sensitive pages or routes in your application and ensuring that only authenticated users can access them.

Here’s a step-by-step guide on how to set up router authentication in a Next.js app:

Step 1: Set up your Next.js app

Before we begin implementing router authentication, make sure you have a Next.js app set up and running. If you haven’t already created a Next.js app, you can do so by running the following command:

npx create-next-app your-app-name

Next, navigate to your app directory and start the development server by running:

npm run dev

Step 2: Install necessary packages

To implement router authentication, we’ll need to install a few packages. Run the following command to install dependencies:

npm install next-cookies cookie jwt-decode

Step 3: Create a custom hook for authentication

Next, we’ll create a custom hook that will handle authentication logic in our app. Create a new file called useAuth.js in your hooks directory and add the following code:

import { useState, useEffect } from 'react';
import cookies from 'next-cookies';
import jwtDecode from 'jwt-decode';

const useAuth = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const token = cookies.get(null).token;
    if (token) {
      const decodedToken = jwtDecode(token);
      setUser(decodedToken);
    } else {
      setUser(null);
    }
  }, []);

  const login = (token) => {
    cookies.set(null, 'token', token, { path: '/' });
    const decodedToken = jwtDecode(token);
    setUser(decodedToken);
  };

  const logout = () => {
    cookies.remove(null, 'token');
    setUser(null);
  };

  return { user, login, logout };
};

export default useAuth;

This custom hook will handle setting and removing the JWT token in cookies, as well as decoding the token to get user information. It will also provide login and logout functions.

Step 4: Protect routes with authentication

Now let’s protect the routes in our app with authentication. To do this, we’ll create a higher-order component (HOC) called withAuth that will check if the user is authenticated before rendering the page. Create a new file called withAuth.js in your hoc directory and add the following code:

import { useRouter } from 'next/router';
import useAuth from '../hooks/useAuth';

const withAuth = (Component) => {
  const Auth = (props) => {
    const { user } = useAuth();
    const router = useRouter();

    if (!user) {
      router.push('/login');
      return null;
    }

    return <Component {...props} />;
  };

  return Auth;
};

export default withAuth;

Step 5: Implement login and logout functionality

To enable users to log in and out of your app, create a new login page and implement login and logout functionality. Create a new page called login.js in your pages directory with the following code:

import { useState } from 'react';
import { useRouter } from 'next/router';
import useAuth from '../hooks/useAuth';

const Login = () => {
  const { login } = useAuth();
  const router = useRouter();
  const [credentials, setCredentials] = useState({ username: '', password: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    // Perform authentication logic here
    login('your_jwt_token_here');
    router.push('/');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={credentials.username}
        onChange={(e) => setCredentials({ ...credentials, username: e.target.value })}
      />
      <input
        type="password"
        value={credentials.password}
        onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
      />
      <button type="submit">Log In</button>
    </form>
  );
};

export default Login;

Step 6: Protect routes using the withAuth HOC

Finally, to protect a route in your app, use the withAuth HOC that we created earlier. For example, let’s protect a dashboard page. Create a new page called dashboard.js in your pages directory with the following code:

import withAuth from '../hoc/withAuth';

const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard</h1>
    </div>
  );
};

export default withAuth(Dashboard);

Now, the Dashboard page will only be accessible to authenticated users. If a user is not authenticated, they will be redirected to the login page to log in.

Congratulations! You have successfully implemented router authentication in your Next.js app using sessions, cookies, and JWTs. This will help protect sensitive routes and ensure that only authenticated users can access them. Feel free to customize the authentication logic and user experience to fit your app’s requirements.