Role-Based Access Control in a Django + React Application

Introduction

Modern applications often serve different types of users — such as admins, event organizers, and attendees in an event management system. Not all users should have access to the same features or data. This is where Role-Based Access Control (RBAC) comes in.

RBAC ensures that permissions are tied to roles (e.g., Admin, Moderator, User) rather than assigned individually. This makes your app more secure and easier to maintain.

In this blog, we’ll walk through how to implement RBAC in a Django backend with a React frontend.

1. Understanding Role-Based Access Control (RBAC)

• Role: A collection of permissions (Admin, Editor, Viewer).
• Permission: An action a user can perform (create event, edit event, view event).
• User: Assigned one or more roles, which grant permissions.

Example:

• Admin → Can create, edit, delete events.
• Organizer → Can create and edit their own events.
• Attendee → Can only view and register for events.

2. Setting Up Roles and Permissions in Django

a) Using Django’s Built-in Groups and Permissions

Django provides an authentication system with groups and permissions.

from django.contrib.auth.models import Group, Permission

# Create roles
admin_group, _ = Group.objects.get_or_create(name='Admin')
organizer_group, _ = Group.objects.get_or_create(name='Organizer')
attendee_group, _ = Group.objects.get_or_create(name='Attendee')

# Assign permissions
from django.contrib.contenttypes.models import ContentType
from events.models import Event

content_type = ContentType.objects.get_for_model(Event)
permission = Permission.objects.create(
    codename='can_publish_event',
    name='Can Publish Event',
    content_type=content_type,
)

admin_group.permissions.add(permission)

b) Assigning Roles to Users

from django.contrib.auth.models import User

user = User.objects.get(username='john')
organizer_group = Group.objects.get(name='Organizer')
user.groups.add(organizer_group)

3. Protecting APIs with Django REST Framework (DRF)

a) Create a Custom Permission Class

from rest_framework import permissions

class IsAdminOrOrganizer(permissions.BasePermission):
    def has_permission(self, request, view):
        return (
            request.user and
            (request.user.groups.filter(name='Admin').exists() or
             request.user.groups.filter(name='Organizer').exists())
        )

b) Apply Permissions to Views

from rest_framework.views import APIView
from rest_framework.response import Response

class EventCreateView(APIView):
    permission_classes = [IsAdminOrOrganizer]

    def post(self, request):
        return Response({"message": "Event created!"})

4. Implementing RBAC in React Frontend

a) Store Role Information in JWT

When a user logs in, Django issues a JWT token containing role/permissions.

Example JWT Payload:

{
  "user_id": 1,
  "username": "john",
  "roles": ["Organizer"]
}

b) React Authentication Context

import { createContext, useContext, useState } from "react";

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (token) => {
    const payload = JSON.parse(atob(token.split(".")[1]));
    setUser({ username: payload.username, roles: payload.roles });
  };

  return (
    <AuthContext.Provider value={{ user, login }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

c) Restrict Components Based on Roles

import { useAuth } from "./AuthProvider";

function AdminPanel() {
  const { user } = useAuth();

  if (!user?.roles.includes("Admin")) {
    return <p>Access Denied</p>;
  }

  return <h1>Welcome to Admin Panel</h1>;
}

5. Best Practices for RBAC in Django + React

1. Always enforce security at the backend — frontend checks are only for UX.
2. Use JWT or OAuth2 for secure authentication.
3. Use Django’s built-in Groups & Permissions for maintainability.
4. For large apps, consider libraries like django-guardian (per-object permissions).
5. Cache role/permission checks for performance.

Conclusion

Implementing Role-Based Access Control (RBAC) in a Django + React application provides a scalable way to secure your system.

• Django backend manages roles, permissions, and secure APIs.
• React frontend ensures the right UI elements are visible to the right users.