Forem: Forhad Khan

WordPress React Plugin: Sync Admin Menu Active State with React Router

Forhad Khan — Tue, 27 Jan 2026 18:39:53 +0000

When building a React-based WordPress admin plugin using client-side routing (like React Router), you'll quickly notice a UX problem: the WordPress admin menu doesn't stay in sync with your React routes. As users navigate your React app, the wrong menu item remains highlighted, confusing the experience.

This guide shows you how to solve this by dynamically syncing the WordPress admin sidebar menu's active state with your React Router navigation.

The Problem
How It Works
Prerequisites
Step 1: Register WordPress Admin Menus
Step 2: Define React Routes
Step 3: Create the Sync Hook
Step 4: Use the Hook
Complete Code Examples
How It Works Under the Hood
Troubleshooting
Summary
Further Reading

The Problem

In a typical React-based WordPress plugin:

You register multiple WordPress admin submenus (e.g., Dashboard, Settings, Tables)
Each submenu renders the same container div where your React app mounts
React Router handles navigation internally using hash-based routing (#/settings, #/tables)
WordPress doesn't know about these route changes, so the active menu item never updates

The result: clicking "Settings" in your React app leaves "Dashboard" highlighted in the WordPress sidebar.

How It Works

Our solution:

Monitor React Router's location changes using a custom hook
Map each React route to its corresponding WordPress menu slug
Update the browser's URL query parameter (?page=plugin-slug) without page reload
Manipulate the DOM to toggle WordPress's .current class on menu items

Prerequisites

Before implementing this solution, ensure you have:

WordPress 5.0+
React 18+ in your plugin
React Router v6 (using HashRouter)
Basic knowledge of WordPress admin menu registration
TypeScript (optional, examples use TypeScript)

Required Dependencies

# Bun
bun add react-router-dom

# npm
npm install react-router-dom

Step 1: Register WordPress Admin Menus

First, register your admin menus in PHP. Each submenu must have a unique slug that we'll reference later. (Note: our code is class-based or in OOP structure).

<?php

namespace YourPlugin\Admin;

class Admin {
    /** Plugin menu slug constant */
    const MENU_SLUG = 'your-plugin';
    const CAPABILITY = 'manage_options';
    const TEXT_DOMAIN = 'your-plugin';

    /**
     * Register admin menu pages.
     * Hook this to 'admin_menu' action.
     */
    public function register_menu(): void {
        // Top-level menu
        add_menu_page(
            __('Your Plugin', self::TEXT_DOMAIN),
            __('Your Plugin', self::TEXT_DOMAIN),
            self::CAPABILITY,
            self::MENU_SLUG,
            [$this, 'render_app'],
            'dashicons-admin-generic',
            58
        );

        // Dashboard submenu (same slug as parent hides duplicate)
        add_submenu_page(
            self::MENU_SLUG,
            __('Dashboard', self::TEXT_DOMAIN),
            __('Dashboard', self::TEXT_DOMAIN),
            self::CAPABILITY,
            self::MENU_SLUG, // Same as parent = "Dashboard"
            [$this, 'render_app']
        );

        // Settings submenu
        add_submenu_page(
            self::MENU_SLUG,
            __('Settings', self::TEXT_DOMAIN),
            __('Settings', self::TEXT_DOMAIN),
            self::CAPABILITY,
            self::MENU_SLUG . '-settings', // Unique slug
            [$this, 'render_app']
        );

        // Tables submenu
        add_submenu_page(
            self::MENU_SLUG,
            __('Tables', self::TEXT_DOMAIN),
            __('Tables', self::TEXT_DOMAIN),
            self::CAPABILITY,
            self::MENU_SLUG . '-tables',
            [$this, 'render_app']
        );
    }

    /**
     * Render the React app container.
     * All submenus point here; React Router handles routing.
     */
    public function render_app(): void {
        echo '<div id="your-plugin-root"></div>';
    }
}

Key Points:

All submenus call the same callback (render_app) — React handles routing
Each submenu has a unique slug pattern: plugin-slug, plugin-slug-settings, etc.
These slugs appear in the URL: ?page=your-plugin-settings

Step 2: Define React Routes

Set up your React Router with centralized path constants:

// src/utils/routes.ts
import { ComponentType } from 'react';
import Dashboard from '@/pages/Dashboard';
import Settings from '@/pages/Settings';
import Tables from '@/pages/Tables';
import EditItem from '@/pages/EditItem';

/**
 * Centralized path constants for routing.
 * Makes mapping to WordPress slugs easier.
 */
export const PATHS = {
    DASHBOARD: '/',
    SETTINGS: '/settings',
    TABLES: '/tables',
    EDIT: '/edit/:id',
} as const;

export interface RouteConfig {
    path: string;
    element: ComponentType;
    label?: string;
}

export const routes: RouteConfig[] = [
    { path: PATHS.DASHBOARD, element: Dashboard },
    { path: PATHS.SETTINGS, element: Settings },
    { path: PATHS.TABLES, element: Tables },
    { path: PATHS.EDIT, element: EditItem },
];

Step 3: Create the Sync Hook

This is the core of our solution - a custom hook that syncs WordPress menu state with React Router:

// src/hooks/useWpMenuSync.ts
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { PATHS } from '@/utils/routes';

/**
 * Custom hook to sync WordPress admin menu active state with React Router.
 * 
 * Solves the UX issue where WordPress sidebar menu items don't highlight
 * correctly when navigating within a React SPA that uses client-side routing.
 * 
 * How it works:
 * 1. Listens to React Router location changes
 * 2. Maps the current React route to the corresponding WP admin menu slug
 * 3. Updates the browser URL's ?page= query parameter (without reload)
 * 4. Manipulates the DOM to toggle WordPress's .current class on menu items
 */
export const useWpMenuSync = (): void => {
    const location = useLocation();

    useEffect(() => {
        const path = location.pathname;

        // Default to main plugin slug (Dashboard)
        let slug = 'your-plugin';

        // Map React routes to WordPress menu slugs
        if (path === PATHS.DASHBOARD) {
            slug = 'your-plugin';
        } else if (path === PATHS.SETTINGS) {
            slug = 'your-plugin-settings';
        } else if (path === PATHS.TABLES || path.startsWith('/edit')) {
            // Group related routes under same menu item
            slug = 'your-plugin-tables';
        }

        // --- 1. Update URL query parameter without page reload ---
        const currentUrl = new URL(window.location.href);
        const searchParams = currentUrl.searchParams;

        // Only update if the slug has changed to avoid redundant history entries
        if (searchParams.get('page') !== slug) {
            searchParams.set('page', slug);

            // Use replaceState to avoid cluttering browser history
            // Preserve the hash for React Router's HashRouter
            const newUrl = `${currentUrl.pathname}?${searchParams.toString()}${window.location.hash}`;
            window.history.replaceState(null, '', newUrl);
        }

        // --- 2. Update WordPress Admin Menu DOM ---
        // Find the menu link matching our target slug
        // IMPORTANT: Use URL parsing for exact match to avoid matching:
        // - External links from third-party plugins  
        // - Partial slug matches (e.g., 'plugin' matching 'plugin-settings')
        const allSubMenuLinks = document.querySelectorAll('ul.wp-submenu a');

        const menuLink = Array.from(allSubMenuLinks).find((link) => {
            const href = link.getAttribute('href');
            if (!href) return false;

            // Only match relative admin.php links or absolute links on same origin
            // This filters out external links that may contain page= in their params
            const isRelativeAdminLink = href.startsWith('admin.php');
            const isAbsoluteAdminLink = href.startsWith(window.location.origin) && href.includes('admin.php');

            if (!isRelativeAdminLink && !isAbsoluteAdminLink) {
                return false;
            }

            try {
                // Parse the href to extract the 'page' parameter exactly
                const url = new URL(href, window.location.origin);
                return url.searchParams.get('page') === slug;
            } catch {
                // Fallback: if URL parsing fails, check for exact match with boundaries
                return href.includes(`page=${slug}&`) || href.endsWith(`page=${slug}`);
            }
        });

        if (menuLink) {
            // Get the parent submenu container
            const submenu = menuLink.closest('ul.wp-submenu');

            if (submenu) {
                // Remove 'current' class from all sibling items
                submenu.querySelectorAll('li').forEach((li) => {
                    li.classList.remove('current');
                });
                submenu.querySelectorAll('a').forEach((a) => {
                    a.classList.remove('current');
                });

                // Add 'current' class to the active item
                const parentLi = menuLink.closest('li');
                if (parentLi) {
                    parentLi.classList.add('current');
                }
                menuLink.classList.add('current');
            }
        }
    }, [location]);
};

Step 4: Use the Hook

Call the hook in your app's root component (or anywhere within the Router context):

// src/App.tsx
import { HashRouter, Routes, Route } from 'react-router-dom';
import { routes } from '@/utils/routes';
import { useWpMenuSync } from '@/hooks/useWpMenuSync';
import Layout from '@/components/Layout';

/**
 * Component that activates the menu sync.
 * Must be rendered inside Router context.
 */
const MenuSyncProvider = ({ children }: { children: React.ReactNode }) => {
    useWpMenuSync();
    return <>{children}</>;
};

const App = () => {
    return (
        <HashRouter>
            <MenuSyncProvider>
                <Layout>
                    <Routes>
                        {routes.map((route) => (
                            <Route
                                key={route.path}
                                path={route.path}
                                element={<route.element />}
                            />
                        ))}
                    </Routes>
                </Layout>
            </MenuSyncProvider>
        </HashRouter>
    );
};

export default App;

Complete Code Examples

File Structure

your-plugin/
├── app/
│   └── Admin/
│       └── Admin.php       # WordPress menu registration
├── src/
│   ├── App.tsx             # Main React app
│   ├── hooks/
│   │   └── useWpMenuSync.ts
│   └── utils/
│       └── routes.ts

Route-to-Slug Mapping Table

React Route	WordPress Menu Slug	Menu Item
`/`	`your-plugin`	Dashboard
`/settings`	`your-plugin-settings`	Settings
`/tables`	`your-plugin-tables`	Tables
`/edit/:id`	`your-plugin-tables`	Tables (grouped)

How It Works Under the Hood

WordPress Admin Menu Structure

WordPress renders admin submenus with this HTML structure:

<ul class="wp-submenu">
    <li class="current">
        <a href="admin.php?page=your-plugin" class="current">Dashboard</a>
    </li>
    <li>
        <a href="admin.php?page=your-plugin-settings">Settings</a>
    </li>
</ul>

The .current class is what visually highlights the active menu item.

Our Hook's DOM Manipulation

Iterates all submenu links in ul.wp-submenu a
Filters to internal admin.php links (excludes external URLs from third-party plugins)
Parses URL and matches page parameter exactly using URL.searchParams.get('page')
Clears all .current classes from sibling <li> and <a> elements
Adds .current to the matching <li> and <a>

URL Update with `replaceState`

We use window.history.replaceState() instead of pushState() to:

Update the ?page= parameter without page reload
Avoid polluting browser history with every route change
Preserve React Router's hash-based navigation (#/settings)

Troubleshooting

Menu Not Updating

Check slug matching: Ensure your React route-to-slug mapping matches exactly what you registered in PHP
Verify selector: Use browser DevTools to confirm the submenu structure matches ul.wp-submenu a[href*="page=..."]

URL Not Syncing

Confirm you're using HashRouter (not BrowserRouter)
Check that the hash is being preserved: ${window.location.hash}

Multiple Submenus Highlighted

Ensure you're removing .current from all siblings before adding to the active item
Check for CSS specificity issues in your theme

Dynamic Routes (e.g., `/edit/:id`)

Group them with their parent route:

if (path === PATHS.TABLES || path.startsWith('/edit')) {
    slug = 'your-plugin-tables';
}

External Plugin Link Conflicts (Production Issue)

Some third-party plugins may inject external links into the WordPress admin menu that contain page= parameters:

<a href="https://external-service.com/contact/?page=your-plugin&site_url=...">

Problem: A simple CSS contains selector a[href*="page=your-plugin"] will match these external links, potentially highlighting the wrong menu item.

Solution: The hook uses URL parsing to:

Only match admin.php links (relative or absolute on same origin)
Parse the URL and match the page parameter exactly

// Filter to internal admin links only
const isRelativeAdminLink = href.startsWith('admin.php');
const isAbsoluteAdminLink = href.startsWith(window.location.origin) && href.includes('admin.php');

if (!isRelativeAdminLink && !isAbsoluteAdminLink) {
    return false;
}

Summary

By creating a custom React hook that:

Listens to route changes via useLocation()
Maps routes to WordPress menu slugs
Updates the URL with history.replaceState()
Toggles the .current class on DOM elements

You can achieve seamless synchronization between your React Router navigation and the WordPress admin sidebar, providing a polished, native-feeling admin experience.

Integrating i18n into a Modern WordPress & React Plugin

Forhad Khan — Tue, 27 Jan 2026 14:30:14 +0000

This guide outlines the step-by-step approach to implementing internationalization (i18n) using a modern stack (Bun/npm/yarn/pnpm), Composer, React (via @wordpress/scripts), and a local WP-CLI bundle.

1. Tooling & Dependencies

PHP (Local WP-CLI)

Instead of requiring a global system installation, bundle WP-CLI's translation tools directly in your project:

composer require --dev wp-cli/i18n-command

JavaScript

Install the WordPress i18n utility using your preferred package manager:

# Bun
bun add @wordpress/i18n

# npm
npm install @wordpress/i18n --save

# pnpm
pnpm add @wordpress/i18n

# yarn
yarn add @wordpress/i18n

2. String Wrapping

In React (TSX/JS)

Import the __ function and use your plugin's text domain.

import { __ } from '@wordpress/i18n';

export const MyComponent = () => (
    <h1>{__('Hello from React', 'my-plugin-domain')}</h1>
);

In PHP

Use standard WordPress functions.

echo __('Settings', 'my-plugin-domain');

3. Automation Scripts

Add these to your package.json. We use the PHP bootstrapper to ensure the local WP-CLI bundle runs on any environment (Windows, Mac, Linux) without assuming a global binary.

{
  "scripts": {
    "i18n:make-pot": "php vendor/wp-cli/wp-cli/php/boot-fs.php i18n make-pot . languages/plugin-domain.pot --domain=plugin-domain --exclude=node_modules,vendor,dist",
    "i18n:make-json": "php vendor/wp-cli/wp-cli/php/boot-fs.php i18n make-json languages --no-purge"
  }
}

4. Runtime Integration

Tell WordPress where to find the JSON translation files for your React application. This is typically done in your Admin or Main plugin class:

add_action('admin_enqueue_scripts', function() {
    // ... your script registration ...

    wp_set_script_translations(
        'my-script-handle', // The handle used in wp_enqueue_script
        'my-plugin-domain',
        plugin_dir_path( __FILE__ ) . 'languages'
    );
});

5. The Production Workflow

Follow these steps whenever strings change:

Build:

bun run build (or npm/yarn/pnpm)
Why? WP-CLI extracts React strings from the compiled JavaScript in assets/, not the raw .tsx source.

Extract:

bun run i18n:make-pot (or npm run ...)
Scan PHP and compiled JS to update the template.

Translate:

Open languages/plugin-domain.pot in Poedit and save as plugin-domain-{locale}.po (e.g., productbay-es_ES.po).

Convert:

bun run i18n:make-json (or npm run ...)
Generate the .json files that WordPress loads for the React frontend.

Summary of the Approach

Source of Truth: The built assets (for React) and PHP source.
Portability: Uses vendor/bin (boot-fs.php) to avoid "it works on my machine" issues.
Efficiency: One command for extraction, one for deployment.

Multi-Role User Authentication in Django Rest Framework

Forhad Khan — Wed, 12 Jul 2023 16:17:12 +0000

Introduction:

User authentication is a fundamental aspect of many web applications. Django provides a powerful authentication system out-of-the-box, but sometimes you need to extend it to support multiple user roles. In this post, we'll explore how to implement multi-role user authentication using Django Rest Framework (DRF).

Setting Up the Project:

Let's start by creating a new Django project. If you don't have a Django environment set up, you can create one by following these steps:

Create a virtual environment: python -m venv venv
Activate the virtual environment: venv\Scripts\activate

Once your environment is activated, install Django and Django Rest Framework:

pip install django djangorestframework

You can follow any approach you prefer to setup environment. When your env is ready, open terminal (with env activated) and run the following commands:

django-admin startproject multi_role_auth
cd multi_role_auth

Start our `authentication` app:

Open terminal (with env activated) and run the following commands:

python manage.py startapp authentication

Now that we have our project structure ready, let's dive into the implementation.

Defining User Model:

In the authentication/models.py file, we'll define a custom user model that extends the AbstractUser class from Django's authentication models. This model will include a role field to assign different roles to each user.

# authentication/models.py

from django.db import models
from django.contrib.auth.models import AbstractUser
from django.conf import settings
from rest_framework.authtoken.models import Token


class User(AbstractUser):
    ROLE_CHOICES = (
        ('administrator', 'Administrator'),
        ('teacher', 'Teacher'),
        ('student', 'Student'),
        ('staff', 'Staff'),
    )

    role = models.CharField(max_length=15, choices=ROLE_CHOICES)

Feel free to customize the ROLE_CHOICES tuple to include the specific roles that are relevant to your application. Additionally, if you require more fields for the User model, you can easily add them to this model. You can refer to the documentation to explore all the default fields provided by Django's User model. This flexibility allows you to tailor the User model to meet the specific requirements of your project.

Creating Serializers:

Next, create serializers for our authentication app. Serializers help in converting complex data types into JSON, making it easy to send data over HTTP.

Create authentication/serializers.py and add the following code:

# authentication/serializers.py

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'email', 'role', 'password']
        extra_kwargs = {'password': {'write_only': True}}

    def create(self, validated_data):
        user = User.objects.create_user(**validated_data)
        return user

Here, we've defined a UserSerializer that inherits from the ModelSerializer provided by DRF. We specify the model as our custom User model and define the fields to include in the serialized representation. Additionally, we set the "password" field as write-only to prevent it from being exposed in responses. In the fields attribute, you can include all fields by passing fields = '__all__'.

Creating Views:

Now, let's implement the views for user registration, login, and logout.

In authentication/views.py, add the following code:

# authentication/views.py

from authentication.models import User
from authentication.serializers import UserSerializer
from django.contrib.auth import authenticate, login
from rest_framework import status
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.authtoken.views import ObtainAuthToken
from rest_framework.authtoken.models import Token
from rest_framework.permissions import IsAuthenticated


class UserRegistrationView(APIView):
    def post(self, request):
        serializer = UserSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)



class UserLoginView(ObtainAuthToken):
    def post(self, request, *args, **kwargs):
        username = request.data.get('username')
        password = request.data.get('password')

        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            token, created = Token.objects.get_or_create(user=user)
            if created:
                token.delete()  # Delete the token if it was already created
                token = Token.objects.create(user=user)
            return Response({'token': token.key, 'username': user.username, 'role': user.role})
        else:
            return Response({'message': 'Invalid username or password'}, status=status.HTTP_401_UNAUTHORIZED)



class UserLogoutView(APIView):
    permission_classes = [IsAuthenticated]

    def post(self, request):
        print(request.headers) 
        token_key = request.auth.key
        token = Token.objects.get(key=token_key)
        token.delete()

        return Response({'detail': 'Successfully logged out.'})

In the UserRegistrationView, we handle the HTTP POST request for user registration. We validate the data using the UserSerializer and save the user if it's valid.

In the UserLoginView, we handle the user login functionality. We authenticate the user using the provided username and password, and if successful, generate a token using the Token model from DRF. We return the token along with the username and role in the response.

The UserLogoutView is responsible for logging out the authenticated user. It retrieves the token from the request's authentication header, deletes the token if it exists, and returns a success message.

Updating URLs:

Finally, we need to define the URLs for our authentication app.

In multi_role_auth/urls.py, add the following code:

# multi_role_auth/urls.py

from django.urls import path, include
from authentication.views import UserRegistrationView, UserLoginView, UserLogoutView

urlpatterns = [
    path('api/auth/register/', UserRegistrationView.as_view(), name='user-registration'),
    path('api/auth/login/', UserLoginView.as_view(), name='user-login'),
    path('api/auth/logout/', UserLogoutView.as_view(), name='user-logout'),
    # Add other URLs here
]

Here, we map
/api/auth/register/ URL to the UserRegistrationView,
/api/auth/login/ URL to the UserLoginView, and
api/auth/logout/ URL to the UserLogoutView.

Modifying `settings.py`:

To enable token-based authentication in DRF, we need to make some modifications to the settings.py file.

In "multi_role_auth/settings.py", add or update the following settings:

# multi_role_auth/settings.py

# ...

INSTALLED_APPS = [
    # ...
    'rest_framework',
    'rest_framework.authtoken',
    'authentication',
]

# ...

AUTH_USER_MODEL = 'authentication.User'

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ],
}

Here, we've added rest_framework and authentication to the INSTALLED_APPS list to include the necessary packages. Additionally, we've configured the DEFAULT_AUTHENTICATION_CLASSES to use the TokenAuthentication class for token-based authentication.

Remember to run migrations before testing the app:

python manage.py makemigrations
python manage.py migrate

Test:

Here I tested authentication endpoints using Postman

Register a user:
Send a POST request to http://localhost:8000/api/auth/register/ with the following payload in the request body:

{
  "username": "johndoe",
  "email": "johndoe@example.com",
  "password": "$tr0ngPa$$w0rd",
  "role": "student"
}

Login:
Send a POST request to http://localhost:8000/api/auth/login/ with the following payload in the request body:

{
  "username": "johndoe",
  "password": "$tr0ngPa$$w0rd"
}

Logout:
Send a POST request to http://localhost:8000/api/auth/logout/ with the token in the request headers. Include an Authorization header with the value Token {token} (replace {token} with the actual token value obtained during login).

Use it in user-specific class(es)

Now that we have a User with the role field, we can use it in our user-specific classes. For example:

# student/models.py  

from django.db import models
from authentication.models import User

class Student(models.Model):
    # other fields related to student ...
    student_id = models.CharField(max_length=10, unique=True)
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name="student_account")

# student/serializers.py  
# import ...
class StudentSerializer(serializers.ModelSerializer):
    user = UserSerializer(read_only=True)

    class Meta:
        model = Student
        fields = '__all__'

    def create(self, validated_data):
        user_data = validated_data.pop('user')
        user = User.objects.create_user(**user_data)
        student = Student.objects.create(user=user, **validated_data)
        return student

Update views and URLs:

# ...
class StudentRegistrationView(APIView):
    def post(self, request):
        serializer = StudentSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

# Update Login view
class UserLoginView(ObtainAuthToken):
    def post(self, request, *args, **kwargs):
        username = request.data.get('username')
        password = request.data.get('password')

        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            token, created = Token.objects.get_or_create(user=user)
            if created:
                token.delete()  # Delete the token if it was already created
                token = Token.objects.create(user=user)

            response_data = {
                'token': token.key,
                'username': user.username,
                'role': user.role,
            }

            if user.role == 'student':
                student = user.student_account  # Assuming the related name is "student_account"
                if student is not None:
                    # Add student data to the response data
                    student_data = StudentSerializer(student).data
                    response_data['data'] = student_data

            return Response(response_data)
        else:
            return Response({'message': 'Invalid username or password'}, status=status.HTTP_401_UNAUTHORIZED)

# ... 
urlpatterns = [
    # ...
    path('api/auth/register/student/', StudentRegistrationView.as_view(), name='student-registration'),
    # ...
]

In case you created a new app for student, add it to INSTALLED_APPS.
Run migrations.

Here is a JSON data to register a Student:

{
    "student_id": "1234567890",
    "user": {
        "username": "john_doe@stu",
        "email": "john.doe@test.com",
        "role": "student",
        "password": "secretpassword"
    }
}

And this is the login response:

{
    "token": "bc2369f6cf4c7bf015c449773dc285e9e8c69caf",
    "username": "john_doe@stu",
    "role": "student",
    "data": {
        "id": 1,
        "user": {
            "username": "john_doe@stu",
            "email": "john.doe@test.com",
            "role": "student"
        },
        "student_id": "1234567890"
    }
}

Conclusion:

In this tutorial, we've covered the process of implementing multi-role user authentication using Django Rest Framework. We defined a custom user model, created serializers for user registration and login, implemented views for user registration, login, and logout, and updated the project's URLs and settings to support token-based authentication. Furthermore, we have explored the detailed process of utilizing our customized User model in other specific models.

By extending Django's built-in user model and utilizing the capabilities of Django Rest Framework, you can easily add role-based authentication to your Django applications. This allows you to differentiate user permissions and provide tailored experiences based on each user's role.

Feel free to explore further and add additional functionalities, such as password reset and role-based access control (RBAC), based on your application requirements.

Happy coding!

Automatically Add Logged In User Under 'created_by' and 'updated_by' to Model in Django Rest Framework

Forhad Khan — Sat, 05 Nov 2022 08:32:12 +0000

In some application, we need to track which user added or updated the data in the system. So here we will see how to do this job in the background without any user input.

Required setup:
I hope you already have Django and the Django Rest Framework installed. If not, please install these first.

run -

pip install Django 
pip install djangorestframework

Settings:

In your settings.py add 'rest_framework' and your internal apps e.g. 'api'.

INSTALLED_APPS = [
    #......

    # third-party packages
    'rest_framework',

    # internal apps
    'api',
]

Write models:

Define your applications model in models.py

from django.db import models
from django.conf import settings

class Student(models.Model):
    name = models.CharField(max_length=180)
    programme = models.CharField(max_length=250)
    batch = models.SmallIntegerField()
    roll = models.SmallIntegerField()
    created_by = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.SET_NULL, related_name='created_by', blank=True, null=True)
    updated_by = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.SET_NULL, related_name='updated_by', blank=True, null=True)

Write Serializers:

Inside your application, add a file called serializers.py and define a serializer class for your model as follows:

from rest_framework import serializers
from .models import Student

class StudentModelSerializer(serializers.ModelSerializer):
    created_by = serializers.StringRelatedField(default=serializers.CurrentUserDefault(), read_only=True)
    updated_by = serializers.StringRelatedField(default=serializers.CurrentUserDefault(), read_only=True)
    class Meta:
        model = Student
        fields = ['id', 'name', 'programme', 'batch', 'roll', 'created_by', 'updated_by']

Admin:

You can register your model in admin.py in case you want to add data from the Django admin panel:

from django.contrib import admin
from .models import Student

@admin.register(Student)
class StudentAdmin(admin.ModelAdmin):
    list_display = ['id', 'name', 'programme', 'batch', 'roll']

View:

Now, write your view.py, and please make sure to add authentication as we have to work with users:

from .models import Student
from .serializers import StudentModelSerializer
from rest_framework import viewsets
from rest_framework.permissions import IsAuthenticatedOrReadOnly
from rest_framework.authentication import SessionAuthentication


class StudentModelViewSet(viewsets.ModelViewSet):
    queryset = Student.objects.all()
    serializer_class = StudentModelSerializer
    authentication_classes = [SessionAuthentication]
    permission_classes = [IsAuthenticatedOrReadOnly]

    def perform_create(self, serializer):
        serializer.save(created_by=self.request.user)

    def perform_update(self, serializer):
        serializer.save(updated_by=self.request.user)

URLs:

If you didn't define URLs for your views, then define it in urls.py.

from django.contrib import admin
from django.urls import path, include 
from rest_framework.routers import DefaultRouter
from api.views import *  

# Create Router Object
router = DefaultRouter()

# Register View Class with Router
router.register('student', StudentModelViewSet, basename='student_')

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
    path('auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Make Migrations:

Migration is necessary after changes in models.

run -

python manage.py makemigrations 
python manage.py migrate

Users:

So this is what we are working for; to add a logged-in user automatically, you must have users registered in your system. So if you don't have any registered users, then add some. If you are using the Django default system, then you can manage users from the Django admin panel.

It's time to see the outcomes.

Go to the URL in browser:

Add a new data:

Look at the data, automatically added logged user info to created_by field:

Now update a data:

Look at the data, automatically added logged user info to updated_by field:

Forem: Forhad Khan

WordPress React Plugin: Sync Admin Menu Active State with React Router

Table of Contents

The Problem

How It Works

Prerequisites

Required Dependencies

Step 1: Register WordPress Admin Menus

Key Points:

Step 2: Define React Routes

Step 3: Create the Sync Hook

Step 4: Use the Hook

Complete Code Examples

File Structure

Route-to-Slug Mapping Table

How It Works Under the Hood

WordPress Admin Menu Structure

Our Hook's DOM Manipulation

URL Update with replaceState

Troubleshooting

Menu Not Updating

URL Not Syncing

Multiple Submenus Highlighted

Dynamic Routes (e.g., /edit/:id)

External Plugin Link Conflicts (Production Issue)

Summary

Further Reading

Integrating i18n into a Modern WordPress & React Plugin

1. Tooling & Dependencies

PHP (Local WP-CLI)

JavaScript

2. String Wrapping

In React (TSX/JS)

In PHP

3. Automation Scripts

4. Runtime Integration

5. The Production Workflow

Summary of the Approach

Multi-Role User Authentication in Django Rest Framework

Introduction:

Setting Up the Project:

Start our authentication app:

Defining User Model:

Creating Serializers:

Creating Views:

Updating URLs:

Modifying settings.py:

Test:

Use it in user-specific class(es)

Conclusion:

Automatically Add Logged In User Under 'created_by' and 'updated_by' to Model in Django Rest Framework

URL Update with `replaceState`

Dynamic Routes (e.g., `/edit/:id`)

Start our `authentication` app:

Modifying `settings.py`: