Unlocking Secure User Authentication: A Step-by-Step Guide to Authenticating Users on React Frontend against Django Backend User Groups using JWT

As the world of web development continues to evolve, securing user data and preventing unauthorized access has become a top priority. In this article, we’ll delve into the world of user authentication, exploring how to authenticate users on a React frontend against Django backend user groups using JSON Web Tokens (JWT). Buckle up, folks!

Why JWT and Django?

Before we dive into the nitty-gritty, let’s discuss why JWT and Django are an excellent combination for user authentication.

• JSON Web Tokens (JWT): JWT provides a lightweight, secure, and flexible way to authenticate users. It’s widely adopted and easily integrable with most frameworks.
• Django: Django is a high-level Python web framework that provides a robust and scalable architecture for building web applications. Its built-in authentication and permission system makes it an ideal choice for managing user groups.

Setup and Configuration

Before we start implementing authentication, let’s set up our React frontend and Django backend.

React Frontend Setup

Create a new React app using create-react-app:

npx create-react-app react-auth-example

Install the required dependencies:

npm install axios jwt-decode react-query

Django Backend Setup

Create a new Django project:

django-admin startproject django_auth_example

Create a new Django app for authentication:

python manage.py startapp authentication

Install the required dependencies:

pip install djangorestframework-simplejwt

Implementing User Authentication on Django Backend

Let’s configure Django to use JWT for authentication. In your settings.py file, add the following:

INSTALLED_APPS = [
    # ...
    'rest_framework',
    'rest_framework_simplejwt',
    'authentication.apps.AuthenticationConfig',
]

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

In your views.py file, add the following:

from rest_framework.response import Response
from rest_framework_simplejwt.views import TokenObtainPairView
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer

class MyTokenObtainPairView(TokenObtainPairView):
    serializer_class = TokenObtainPairSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        data = serializer.validated_data
        user = serializer.user
        token = serializer.get_token(user)
        response_data = {
            'refresh': str(token),
            'access': str(token.access_token),
        }
        return Response(response_data, status=200)

In your urls.py file, add the following:

from django.urls import path
from .views import MyTokenObtainPairView

urlpatterns = [
    path('api/token/', MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
]

Implementing User Authentication on React Frontend

Let’s create a login form and authenticate users using JWT. In your App.js file, add the following:

import React, { useState } from 'react';
import axios from 'axios';
import jwtDecode from 'jwt-decode';

function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [token, setToken] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post('http://localhost:8000/api/token/', {
        username,
        password,
      });
      const token = response.data.access;
      setToken(token);
      localStorage.setItem('token', token);
    } catch (error) {
      console.error(error);
    }
  };

  if (token) {
    const user = jwtDecode(token);
    return (
      

        
        
Your user ID is {user.user_id}
      
    );
  }

  return (
    

      
        Username:
         setUsername(event.target.value)} />
      
      

      
        Password:
         setPassword(event.target.value)} />
      
      

      Login
    
  );
}

export default App;

Authenticating Users using JWT and Django User Groups

Now that we have implemented user authentication, let’s add an extra layer of security by authenticating users against Django user groups.

In your Django backend, create a new view to authenticate users against user groups:

from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.authentication import TokenAuthentication
from rest_framework.permissions import IsAuthenticated
from django.contrib.auth.models import Group

class GroupCheckView(APIView):
    authentication_classes = [TokenAuthentication]
    permission_classes = [IsAuthenticated]

    def get(self, request):
        user_groups = Group.objects.filter(user=request.user)
        if user_groups.exists():
            return Response({'groups': [group.name for group in user_groups]}, status=200)
        return Response({'error': 'User is not part of any group'}, status=403)

In your Django backend, add the following URL pattern:

from django.urls import path
from .views import GroupCheckView

urlpatterns = [
    # ...
    path('api/group/check/', GroupCheckView.as_view(), name='group_check'),
]

In your React frontend, update the App.js file to authenticate users against user groups:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import jwtDecode from 'jwt-decode';

function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [token, setToken] = useState(null);
  const [groups, setGroups] = useState([]);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post('http://localhost:8000/api/token/', {
        username,
        password,
      });
      const token = response.data.access;
      setToken(token);
      localStorage.setItem('token', token);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (token) {
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
      axios.get('http://localhost:8000/api/group/check/')
        .then(response => {
          setGroups(response.data.groups);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }, [token]);

  if (token) {
    const user = jwtDecode(token);
    return (
      

        
        
Your user ID is {user.user_id}
        {groups.length > 0 ? (
          

            {groups.map(group => (
              
{group}
            ))}
          
        ) : (
          
You are not part of any group
        )}
      
    );
  }

  return (
    

      
        Username:
         setUsername(event.target.value)} />
      
      

      
        Password:
         setPassword(event.target.value)} />
      
      

      Login
    
  );
}

export default App;

Conclusion

In this article, we’ve successfully implemented user authentication on a React frontend against Django backend user groups using JWT. By following these steps, you can ensure the security and integrity of your application by authenticating users against Django’s robust permission system.

Remember to always keep your JWT secret key secure and never expose it to the public. Also, make sure to handle errors and exceptions properly to avoid any security vulnerabilities.

With this knowledge, you’re now equipped to build robust and secure web applications that protect user data and prevent unauthorized access. Happy coding!