JWT Auth using React-Query and Next 14 for Frontend and Custom Django Backend: A Comprehensive Guide

Authentication is an essential aspect of any web application, and when it comes to building a modern web app with React, Next.js, and a custom Django backend, JWT (JSON Web Tokens) authentication is a popular choice. In this article, we’ll explore how to implement JWT auth using React-Query and Next 14 for the frontend and a custom Django backend. Buckle up, and let’s dive in!

What is JWT Auth?

JSON Web Tokens (JWT) is an open standard for securely transmitting information between parties as a JSON object. In the context of authentication, JWT is used to verify the identity of a user and ensure that they have the necessary permissions to access protected resources. Here’s a high-level overview of how JWT auth works:

• A user requests access to a protected resource
• The backend verifies the user’s credentials and generates a JWT token
• The JWT token is sent back to the frontend, where it’s stored locally
• For subsequent requests, the frontend includes the JWT token in the request headers
• The backend verifies the JWT token and grants access to the protected resource if valid

Why React-Query and Next 14?

React-Query is a popular library for managing data fetching and caching in React applications. It provides a simple and efficient way to handle server-side rendering, caching, and pagination. Next 14 is the latest version of Next.js, a popular React framework for building server-rendered, statically generated, and performance-optimized websites. Together, React-Query and Next 14 provide a powerful combination for building fast, scalable, and secure web applications.

Step 1: Setting up the Django Backend

For the backend, we’ll use Django, a high-level Python web framework that encourages rapid development and clean, pragmatic design. We’ll create a new Django project and app for our authentication system:

django-admin startproject jwt_auth
cd jwt_auth
python manage.py startapp authentication

In the `authentication` app, we’ll create a new model for users:

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=255)
    email = models.EmailField(unique=True)
    password = models.CharField(max_length=255)

    def __str__(self):
        return self.username

We’ll also create a serializer for the user model:

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'email']

Step 2: Implementing JWT Auth in Django

We’ll use the `django-rest-framework-simplejwt` library to implement JWT auth in our Django backend. Install it using pip:

pip install django-rest-framework-simplejwt

In `settings.py`, add the following configurations:

INSTALLED_APPS = [
    ...
    'rest_framework',
    'rest_framework_simplejwt',
    ...
]

SIMPLE_JWT = {
    'USER_ID_FIELD': 'id',
    'USER_ID_CLAIM': 'user_id',
}

In `urls.py`, we’ll define the authentication views:

from rest_framework import routers
from . import views

router = routers.DefaultRouter()
router.register(r'token', views.TokenObtainPairView, basename='token')
router.register(r'token/refresh', views.TokenRefreshView, basename='token_refresh')

urlpatterns = [
    ...
    path('', include(router.urls)),
]

The `TokenObtainPairView` and `TokenRefreshView` views are provided by `django-rest-framework-simplejwt`. They handle generating and refreshing JWT tokens for our users.

Step 3: Creating the Next 14 Frontend

Create a new Next 14 project using the following command:

npx create-next-app jwt-auth-frontend --use-npm

We’ll create a new component for the login page:

import { useState } from 'react';

function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await fetch('/api/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
      });
      const data = await response.json();
      localStorage.setItem('token', data.access_token);
      window.location.href = '/';
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    

      
      

        
          Username:
           setUsername(e.target.value)} />
        
        
          Password:
           setPassword(e.target.value)} />
        
        Login
      
      {error && 
{error}
}
    
  );
}

export default LoginPage;

Step 4: Implementing JWT Auth with React-Query

We’ll use React-Query to manage the JWT token and handle authentication. Create a new file `api.js`:

import { useQueryClient } from 'react-query';
import { fetchToken } from './api';

async function getAuthHeaders() {
  const token = localStorage.getItem('token');
  if (token) {
    return {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
  }
  return {};
}

export function useAuth() {
  const queryClient = useQueryClient();
  const { data, error, isLoading } = useQuery(
    'token',
    async () => {
      const response = await fetch('/api/token', getAuthHeaders());
      return response.json();
    },
    {
      enabled: !!localStorage.getItem('token'),
    }
  );

  if (isLoading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  return data;
}

The `useAuth` hook uses React-Query to fetch the JWT token and handle authentication. We’ll use this hook to protect our routes:

import { useAuth } from '../api';

function ProtectedPage() {
  const data = useAuth();

  if (!data) return 
You must be logged in to access this page
;
  return (
    

      
      
Welcome, {data.username}!
    
  );
}

export default ProtectedPage;

Conclusion

In this article, we’ve explored how to implement JWT auth using React-Query and Next 14 for the frontend and a custom Django backend. We’ve covered setting up the Django backend, implementing JWT auth, creating the Next 14 frontend, and using React-Query to manage the JWT token and handle authentication.

By following this comprehensive guide, you should now have a solid understanding of how to implement JWT auth in your own React and Django projects. Remember to always keep security in mind when building web applications, and consider using additional security measures such as encryption and secure password hashing.

Technology	Version
React	17.0.2
Next.js	14.0.2
Django	4.1.2
React-Query	3.39.1
django-rest-framework-simplejwt	5.2.1

Happy coding!

Note: This article is for educational purposes only and should not be used in production without further testing and security auditing.Here is the FAQ about JWT auth using React Query and Next 14 for frontend and custom Django backend:

Frequently Asked Questions

Get answers to your burning questions about JWT auth using React Query and Next 14 for frontend and custom Django backend!