Forem: Veaceslav

Handling Dynamic Role Names in Different Environments with useRoleManagement Hook (Part 2)

Veaceslav — Mon, 02 Sep 2024 07:13:46 +0000

In the first part of this series, we explored the foundation of implementing role-based access control in React using the useRoleManagement hook. If you haven't read it yet, you can check it out here
Implementing Role-Based Access Control in React: A Deep Dive into useRoleManagement Hook.

In this second part, we'll dive deeper into managing dynamic role names depending on different environments, such as staging and production. This is crucial for maintaining consistent and secure role management across various stages of development.

Overview

When developing applications, it's common to have different role names or permissions configurations for various environments. For instance, you might use test or mock role names in development and real, production-ready role names in the production environment. Handling these dynamic role names correctly ensures that your application behaves consistently and securely across different stages of its lifecycle.

Environment-Specific Role Configuration

To manage role names dynamically, we can leverage environment variables. These variables allow us to define different role keys for different environments, which can then be used to load the appropriate permissions configuration.

Here’s how we can achieve this:

1. Define Environment Variables

In your .env.development and .env.production files, specify the role keys for each environment. For example:

.env.development

VITE_ROLE_KEYS_MANAGER=Manager_Test
VITE_ROLE_KEYS_USER=USER_Test
VITE_ROLE_KEYS_ADMIN=Admin_Test

.env.production

VITE_ROLE_KEYS_MANAGER=Prod_Manager
VITE_ROLE_KEYS_USER=Prod_USER
VITE_ROLE_KEYS_ADMIN=Prod_Admin

This setup ensures that your application uses appropriate role names depending on the environment it’s running in.

2. Update the permissions Object

Use these environment variables to define the permissions object dynamically. The permissions object maps role keys to specific permissions for each role:

const permissions: Record<string, UserPermissions> = {
  [import.meta.env.VITE_ROLE_KEYS_MANAGER]: {
    partners: { add: false, view: false, edit: false, deleteRow: true },
    // ... other permissions
  },
  [import.meta.env.VITE_ROLE_KEYS_USER]: {
    partners: { add: false, view: false, edit: false, deleteRow: false },
    // ... other permissions
  },

  [import.meta.env.VITE_ROLE_KEYS_ADMIN]: {
    partners: { add: true, view: true, edit: true, deleteRow: true },
    // ... other permissions
  },
};

The import.meta.env syntax allows you to access environment variables defined in your .env files.

3. Use the useRoleManagement Hook

In the first part of this series, we explored the foundation of role-based access control in React using the useRoleManagement hook. If you haven't read it yet, you can check it out here.

The useRoleManagement hook extracts user roles from the decoded JWT token, maps them to permissions using the environment-specific role keys, and then returns the relevant permissions:

export function useRoleManagement() {
  const { pathname } = useLocation();

  const token = localStorage.getItem('token');

  let decodedToken: Realm | null = null;

  try {
    if (token) {
      decodedToken = jwtDecode<Realm>(token);
    }
  } catch (error) {
    console.error('Invalid token:', error);
  }

  const roles = decodedToken?.realm_access?.roles ?? [];

  const roleExists = ifRoleExists(roles);

  const rolePermissions = getPermissions(
    roleExists,
    pathname !== '/' ? pathname : '/partners',
  );

  if (!rolePermissions) {
    return {};
  }

  const {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  } = rolePermissions as Permissions;

  return {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  };
}

Conclusion

By dynamically managing role names through environment variables, you can ensure that your application's role-based access control behaves consistently across different environments. This approach provides flexibility and helps maintain a clear separation between development and production configurations.

Implementing Role-Based Access Control in React: A Deep Dive into useRoleManagement Hook

Veaceslav — Sun, 14 Jul 2024 18:09:08 +0000

Intorduction
Managing user roles and permissions is a critical aspect of web application security and functionality. It ensures that users have appropriate access to different parts of the application based on their roles. In this article, I'll walk you through the implementation of a custom useRoleManagement hook in React, which decodes a JWT token to manage user permissions.

Setting Up
Before diving into the implementation, let's set up the necessary tools and libraries. You'll need:

React
jwt-decode for decoding JWT tokens
react-router-dom for managing routing and extracting the current path

npm install react-router-dom jwt-decode

Implementation
Let's start by defining the interfaces for our permissions and JWT payload.

import { JwtPayload, jwtDecode } from 'jwt-decode';
import { useLocation } from 'react-router-dom';

// Realm is for authentication mechanism like Keycloak

interface Realm extends JwtPayload {
  realm_access: {
    roles: string[];
  };
}

// Interface representing the user's permissions

interface Permissions {
  add: boolean;
  view: boolean;
  edit: boolean;
  confirm?: boolean;
  include?: boolean;
  deleteRow?: boolean; 
}

// Interface representing the user's permissions for various pages

interface UserPermissions {
  partners?: Permissions;
  projects?: Permissions;
 // More pages can be added here as needed
}

type PermissionKeys = keyof UserPermissions;

Next, we define the permissions for different roles:

const permissions = {
  manager: {
    partners: {
      add: false,
      view: false,
      edit: false,
      deleteRow: true,
    },
    projects: {
      add: false,
      view: false,
      edit: false,
      deleteRow: false,
    },
    // Define more pages
  },
  analyst: {
    // Define permissions for analyst role
  },
  director: {
    // Define permissions for director role
  },
};

Check if Role Exists
We need a function to check if a role exists and return the associated permissions:

function ifRoleExists(roles: string[]) {
  return roles
    .map((role) => {
      return permissions[role as keyof typeof permissions];
    })
    .filter(Boolean)[0];
}

Get Permissions for the Role
This function retrieves the permissions for a given role and path:

function getPermissions(roleExists: UserPermissions, pathName: string) {
  const withoutSlash = pathName.replace('/', '') as PermissionKeys;
  return roleExists?.[withoutSlash] ?? pathName;
}

useRoleManagement Hook
Finally, we implement the useRoleManagement hook:

export function useRoleManagement() {
  const { pathname } = useLocation();

  const token = localStorage.getItem('token');

  let decodedToken: Realm | null = null;

  try {
    if (token) {
      decodedToken = jwtDecode<Realm>(token);
    }
  } catch (error) {
    console.error('Invalid token:', error);
  }

  const roles = decodedToken?.realm_access?.roles ?? [];

  const roleExists = ifRoleExists(roles);

  const rolePermissions = getPermissions(
    roleExists,
    pathname !== '/' ? pathname : '/partners',
  );

  if (!rolePermissions) {
    return {};
  }

  const {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  } = rolePermissions as Permissions;

  return {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  };
}

Usage Example
Here's how you can use the useRoleManagement hook in a React component:

import React from 'react';
import { useRoleManagement } from './useRoleManagement';

const Dashboard = () => {
  const { add, view, edit, deleteRow } = useRoleManagement();

  return (
    <div>
      {view && <p>You can view this content.</p>}
      {add && <button>Add Item</button>}
      {edit && <button>Edit Item</button>}
      {deleteRow && <button>Delete Item</button>}
    </div>
  );
};

export default Dashboard;

Conclusion
In this article, we've implemented a custom useRoleManagement hook in React to manage user permissions based on their roles. This approach ensures that your application remains secure and that users have the appropriate access based on their roles. Feel free to customize the permissions and roles according to your application's requirements.

I hope you found this guide helpful. If you have any questions or suggestions, please leave a comment below!