How do you design permissions for a multi-tenant SaaS product?

Imamul Islam Ifti — Wed, 26 Aug 2026 13:04:04 +0000

I’ve been thinking a lot recently while working on migrating the

Role and Permission System of our organization-based SaaS product to a more scalable authorization architecture.
Our product has multiple roles, different permissions, and different data scopes depending on the user and organization. As the system grows, simply adding more roles and if conditions across endpoints quickly becomes difficult to maintain.
I’m exploring how large-scale products approach data scoping, delegated permissions, and centralized authorization; so any custom roles can be created and assign any combination of permissions to them.

For those who have worked on authorization systems at scale:
What architecture or approach has worked best for you?
I’d especially love to hear about real-world lessons, common mistakes, or resources you’d recommend.

Escaping Dependency Hell: How I Migrated a Legacy CRA App to React 19 & Vite

Imamul Islam Ifti — Tue, 16 Dec 2025 17:42:23 +0000

If you are maintaining a React application created 4 or 5 years ago, you know the feeling. You run npm install, and the terminal bleeds red with vulnerability warnings. You try to upgrade one package, and three others break. You are trapped in Dependency Hell.

After years of building features on top of Create React App (CRA) with React 17, React Router 5, Bootstrap 4, our project had accumulated significant technical debt.

The pain points were real:

Build times: 3-5 minutes for production builds
Hot reload: Not there. Had to refresh manually to see the changes
Security vulnerabilities: multiple npm audit warnings
Modern tooling: Couldn't use Tailwind CSS v4 or Shadcn/ui
Dead dependencies: Libraries like connected-react-router and redux-form hadn't been updated in years

I recently took on the challenge of upgrading this massive legacy project to the modern era of React 19, Vite, Tailwind v4, and React Router v7.

Running npm update was not an option. That path leads straight into dependency hell. Here is how I did it, avoiding the "npm update" trap, and the specific challenges I faced along the way.

The Strategy: "The Vite Lift & Shift"

Instead of trying to modernize in place, I decided to create a fresh Vite project and systematically move code over.

The Dependency Purge

Before moving code, I audited my dependencies. A lot of libraries from 2020 are dead or have better alternatives in 2025.

Legacy Package	New Equivalent	Why?
`react-scripts`	Vite	Instant dev server, native ESM support, faster builds, no Webpack 4 baggage.
`react-router-dom@v5`	`react-router-dom@v7`	v5 is outdated and risky; v7 aligns with modern React and data routers.
`connected-react-router`	(Removed)	React Router v6+ manages history internally; Redux no longer needs routing state.
`react-helmet`	`react-helmet-async`	`react-helmet` is not compatible with React 18/19 concurrent & streaming rendering.
`jquery`	(Removed)	React 18/19 and jQuery conflict; direct DOM mutation breaks React’s render model.

Phase 1: Create a Clean Vite Shell

1.1. Initialize Vite (React)

npm create vite@latest my-new-app -- --template react
cd my-new-app
npm install

No CRA. No react-scripts. No Webpack.

1.2. Install Only “Safe” Dependencies

Before touching legacy code, install:

axios
react-hook-form
date library (moment or date-fns)
state management (Redux Saga)
etc.

This prevents compounding errors later.

Phase 2: The Core Migration (Structure & Logic)

Now that we have a fresh Vite shell, I copied my old /src folder into the new project. But before touching any React code, I had to fix the "Physical" structure.

2.1. The index.html Shift

In CRA, index.html lived in the /public folder, and Webpack "magically" injected the script.
In Vite, index.html is the front door. It must live in the root directory.
I moved index.html from /public to the root /, and manually added the script tag to point to my React entry file (which Vite does not auto-inject):

<!-- index.html (Moved to Root) -->
<body>
  <div id="root"></div>
  <!-- Vite requires this explicit module entry -->
  <script type="module" src="/src/main.jsx"></script>
</body>

(Note: My imports were mostly relative, so I didn't need to configure path aliases yet to get the app running.)

Phase 3: The Big Breaking Changes

3.1. The Router Revolution (v5 to v7)
React Router completely redesigned its API:
Switch → Routes

// OLD
import { Switch, Route } from 'react-router-dom';

<Switch>
  <Route path="/dashboard" component={Dashboard} />
  <Route path="/profile" component={Profile} />
</Switch>

// NEW
import { Routes, Route } from 'react-router-dom';

<Routes>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/profile" element={<Profile />} />
</Routes>

useHistory → useNavigate

// OLD
import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push('/login');

// NEW
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/login');

I used VS Code's find-and-replace with regex to batch convert this:

Find: useHistory\(\)
Replace: useNavigate()

Find: history\.push\(
Replace: navigate(

3.2. Updating the State Machine: Redux

The most archaic part of my project was the Redux configuration. I was using the deprecated createStore, manually composing middleware, and—worst of all—using connected-react-router to force routing state into Redux.
In modern React (v18/v19) combined with React Router v6/v7, we don't need routing data in our global store. Hooks like useNavigate and useLocation handle that natively.

3.2.1 High-level comparison

Area	Old Code (Legacy Redux)	New Code (Redux Toolkit)
Store creation	`createStore + compose + applyMiddleware`	`configureStore`
Router integration	`connected-react-router` + `history`	Removed
DevTools	Manual / commented	Automatic
Middleware setup	Manual, error-prone	Safe defaults + explicit
Redux best practices	Optional	Enforced by default
Boilerplate	High	Low
Future support	Deprecated patterns	Official Redux path

3.2.2 The biggest win: configureStore
Before (manual & fragile):

// store.js (Legacy)
import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import { createBrowserHistory } from "history"; // <--- Dependency heavily coupled to DOM
import rootReducer from "./reducers";
import { routerMiddleware } from "connected-react-router"; // <--- Obsolete

const history = createBrowserHistory();
const sagaMiddleware = createSagaMiddleware();

export const store = createStore(
  rootReducer(history), // <--- Passing history into reducers
  compose(
    applyMiddleware(
      routerMiddleware(history), 
      sagaMiddleware
    )
  )
);

Problems

Easy to misconfigure
No defaults
DevTools must be wired manually
No safety checks

After (The Modern Redux Toolkit):

I switched to configureStore from @reduxjs/toolkit. It automatically sets up the Redux DevTools extension and comes with better default middleware.
I also completely removed connected-react-router and the history object dependency. The store is now purely for data, not navigation.

configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false })
      .concat(sagaMiddleware),
});

What I unlocked for the future

Because of this change, I can now:

Migrate reducers to createSlice
Introduce RTK Query gradually
Remove boilerplate reducers
Drop Redux Saga later if needed

None of this was cleanly possible before.

Phase 4: Dependencies to Replace (Not Update)

4.1. react-helmet → react-helmet-async

The old react-helmet breaks with React 18+'s concurrent rendering:

// OLD (breaks in React 18+)
import { Helmet } from 'react-helmet';

// NEW (concurrent-safe)
import { Helmet, HelmetProvider } from 'react-helmet-async';

// In your root component
<HelmetProvider>
  <App />
</HelmetProvider>

4.2. Remove connected-react-router
React Router now handles history internally. I no longer need to sync it with Redux:

import { connectRouter } from "connected-react-router";

// OLD: Had to pass history through Redux
const rootReducer = (history) => combineReducers({
  router: connectRouter(history),
  auth: authReducer,
  // ... other reducers
});

// NEW: Just combine your reducers
const rootReducer = combineReducers({
  auth: authReducer,
  // ... other reducers
});

4.3. The Silent Cleanup
Surprisingly, my app didn't crash with the dreaded "Polyfill Errors" (missing Buffer or process) that plague many Vite migrations.
Why? Because I updated my dependencies first.
By jumping to axios v1.13, and removing jQuery, I effectively removed the libraries that relied on legacy Node.js globals. Modern libraries use browser-native standards (like Uint8Array) instead of Node's Buffer.

However, I still had housekeeping tasks to finish the job:

4.3.1. The Environment Variable Swap

CRA uses process.env.REACT_APP_. Vite uses import.meta.env.VITE_.
I had to rename all my .env variables and update the code calls.

// Old
const apiKey = process.env.REACT_APP_API_KEY;

// New
const apiKey = import.meta.env.VITE_API_KEY;

Phase 5: The "Silent" Breakers (Redux, CSS & SVGs)

Even after the dependencies were fixed and the server started, the app wasn't quite right. I ran into three specific runtime issues where the "Old Way" simply didn't work in the "New World."

5.1. Redux Toolkit: The "Mutation" Police

In my old Redux setup, I was essentially running in "Wild West" mode. I could accidentally mutate state in a reducer, and React might still re-render, hiding the bug.

The Problem:
Redux Toolkit (which I switched to via configureStore) comes with immutableCheck middleware enabled by default. As soon as I clicked a button, the app crashed with:
Invariant failed: A state mutation was detected inside a dispatch.

The Fix:
I had to find the reducers where I was directly modifying objects and rewrite them to return new objects (standard Redux pattern).

// Old Reducer (Previously worked silently, but bad practice)
case 'UPDATE_USER':
  state.currentUser.name = action.payload; // Direct mutation!
  return state;

// New Reducer (Immutable pattern)
case 'UPDATE_USER':
  return {
    ...state,
    currentUser: {
      ...state.currentUser,
      name: action.payload
    }
  };

Note: If you use createSlice in Redux Toolkit, you CAN mutate state (thanks to Immer), but since I was migrating legacy reducers, I had to fix the manual mutations.

5.2. The CSS "Zebra Striping" Shift

I noticed my tables looked wrong. Previously, I used :nth-of-type to color alternate rows. After the update (likely due to changes in how Bootstrap 5 or React renders the DOM tree), this selector started targeting columns instead of rows, or just behaving erratically.

The Fix:
I switched the selector to :nth-child. It’s a subtle difference, but :nth-of-type looks at the element tag type, while :nth-child looks at the strict index in the parent.

5.3. The SVG Crash

CRA (Webpack) used to perform "magic" that allowed you to import SVGs as components or strings indiscriminately. Vite is more explicit.
When I tried to use my SVGs, the whole page crashed.

The Fix:
I had to install vite-plugin-svgr and update my configuration to explicitly allow SVGs to be imported as React components.

Update vite.config.js

import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [
    react(),
    svgr(), // Enable SVG transformation
  ],
});

Update the imports
Vite requires a query parameter ?react to know you want the component version, not the URL string

// ❌ Old (CRA Magic)
import { ReactComponent as Logo } from './logo.svg'; 

// ✅ New (Vite Explicit)
import Logo from './logo.svg?react';

Phase 6: Infrastructure Polish & Deployment

Once the app was running and bug-free, I did some final cleanup to make the developer experience (DX) better and ensure deployment worked.

6.1. Setting up Path Aliases

My project originally used relative imports (../../components/Button), which worked fine in Vite out of the box. However, I wanted to modernize the codebase to use cleaner imports.

I updated vite.config.js to recognize some paths:

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@components': path.resolve(__dirname, './src/components'),
      '@Icons': path.resolve(__dirname, './src/Icons'),
    },
  },

Before (The "Dot-Dot" Hell):

// Hard to read, breaks if I move this file
import Button from "../../../components/Button";
import { formatDate } from "../../../utils/dateHelpers";
import { UserContext } from "../../../context/UserContext";

const Profile = () => { ... }

After (Clean & Refactor-Safe):

// Clean, readable, and works from anywhere
import Button from "components/Button";
import { formatDate } from "@/utils/dateHelpers";
import { UserContext } from "@/context/UserContext";

const Profile = () => { ... }

6.2. The build vs dist Trap

This is a silent killer for CI/CD pipelines.

CRA compiles your production app into a folder named build.
Vite compiles your production app into a folder named dist.

Conclusion: A Junior Dev’s Journey

As a junior engineer, taking on a full-scale migration from Webpack to Vite felt like performing surgery while reading the manual. I’m proud that the app is now faster, cleaner, and running on modern React 19, but I also know I have a lot left to learn. This guide represents my current "best effort" solution. If you are a senior dev reading this and spot a security risk I missed, or a cleaner way to handle the Redux refactor, please drop a comment below. I’m sharing this to help others facing the same "Legacy Code" anxiety, but I’m also here to learn from you.

How to setup Tailwind CSS v4.1.5 with Vite + React (2025 updated guide)

Imamul Islam Ifti — Wed, 07 May 2025 14:40:30 +0000

Tailwind CSS v4+ has a new setup method when using Vite and React. This post walks you through the latest official installation process as outlined on the Tailwind CSS docs.

1. Prerequisites

Make sure you have Node.js (v18+) and npm installed:

node -v
npm -v

2. Create a new Vite + React project

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install

3. Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

npm install tailwindcss @tailwindcss/vite

4. Configure the Vite plugin

Add the @tailwindcss/vite plugin to your Vite configuration file(vite.config.js).

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    react(), tailwindcss(),
  ],
})

5. Import Tailwind CSS

Add an @import to your CSS file (index.css) that imports Tailwind CSS.

@import "tailwindcss";

6. Test

In your app.jsx file replace the code with

<div className="min-h-screen flex items-center justify-center bg-black text-white text-4xl font-bold">
      Tailwind is working!
</div>

7. Start your build process

Run your build process with npm run dev or whatever command is configured in your package.json file.

npm run dev

Was this helpful? Let me know in the comments and follow for more!

DEV Community: Imamul Islam Ifti