Next.js and Django JWT Authentication | Part 2 – Frontend

In part 1 of this series, we looked at setting up Django for JWT authentication. In this article, we will focus on the frontend implementation using Next.js.

Setting Up Next.js

First, make sure you have Node.js installed on your machine. You can then create a new Next.js application using the following command:

npx create-next-app@latest my-next-app

Once the application is created, navigate to the project directory and install the necessary packages:

cd my-next-app
npm install axios js-cookie

Implementing JWT Authentication

Next, we need to implement the JWT authentication in our Next.js application. We will use the axios library for making HTTP requests and the js-cookie library for managing cookies.

Create a new file called api.js in the pages/api directory. This file will contain the functions for handling the authentication requests. Here’s an example of how you can implement the login function:

import axios from 'axios';
import cookies from 'js-cookie';

export const login = async (username, password) => {
  try {
    const response = await axios.post('http://localhost:8000/api/token/', {
      username,
      password
    });
    cookies.set('access_token', response.data.access, {expires: 1});
    cookies.set('refresh_token', response.data.refresh, {expires: 7});
  } catch (error) {
    console.error('Error logging in', error);
  }
};

Protecting Routes

To protect certain routes in your Next.js application, you can create a higher-order component that checks if the user is authenticated. Here’s an example of how you can implement this:

import React from 'react';
import cookies from 'js-cookie';

export const withAuth = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => {
    const accessToken = cookies.get('access_token');
    if (!accessToken) {
      // Redirect to login page
      return 
Please log in to access this page
;
    }
    return ;
  };

  return hocComponent;
};

Conclusion

With the frontend authentication set up, you can now create a seamless user experience in your Next.js application. By using JWT authentication, you can ensure that your users’ data is secure and protected. In the next part of this series, we will look at how to integrate the backend and frontend for a complete authentication flow.