Stop Writing if (role === "admin") in React. It's a Code Smell.

Mohame Ali Sraieb — Thu, 26 Mar 2026 13:45:08 +0000

I'm going to say it:

👉 Most React apps handle authorization terribly.

Yeah... even the "well-structured" ones.

😬 The Problem Nobody Talks About

If your codebase looks like this:

if (user.role === "admin") { ... }

or worse:

if (
  user.role === "admin" ||
  (user.role === "manager" && user.permissions.includes("edit"))
) {
  ...
}

You already have a problem.

And it's only going to get worse as your app grows.

Why?

Because authorization logic:

leaks into every component\
gets duplicated everywhere\
becomes impossible to reason about\
breaks silently when roles evolve

👉 It's not just messy --- it's fragile architecture.

🧠 The Real Issue

We treat authorization like a UI concern.

It's not.

It's business logic.

And mixing business logic with UI is one of the fastest ways to kill
scalability.

🔥 So I Built Something About It

After hitting this wall over and over while building dashboards and SaaS
apps, I decided to fix it.

I created react-ability-kit --- a type-safe authorization toolkit
for React.

⚡ What Makes It Different?

Instead of scattering role checks across your app, you define abilities
once and reuse them everywhere.

❌ The old way

{user.role === "admin" && <DeleteButton />}

✅ The clean way

<Can I="delete" a="Post">
  <DeleteButton />
</Can>

💡 Why This Matters More Than You Think

When you centralize authorization:

your UI becomes cleaner\
your logic becomes predictable\
your app becomes scalable\
your team stops breaking permissions accidentally

And most importantly:

👉 You stop rewriting the same logic 50 times.

🚀 Built for Real Apps

This isn't a toy library.

It's designed for:

SaaS platforms\
Admin dashboards\
Role-heavy applications\
Teams that actually care about maintainability

📦 Check It Out

NPM: https://www.npmjs.com/package/react-ability-kit\
Docs & Demo: https://dalisraieb.github.io/react-ability-kit/

📈 Unexpected Traction

I shared it... and it hit 600+ downloads in 12 hours.

Which confirmed something:

👉 Developers are tired of reinventing authorization logic.

🤝 Let's Be Honest

Most of us didn't design our auth system.

We just... added conditions until it worked.

And now we're stuck maintaining it 😅

🧠 Final Take

If your authorization logic lives inside your components...

👉 it's already technical debt.

If this resonates with you:

⭐ Star the repo\
💬 Drop feedback\
🔧 Contribute ideas

Let's stop normalizing messy authorization in React.

react #typescript #opensource #javascript #webdev #frontend #saas

DEV Community: Mohame Ali Sraieb