DEV Community

Cover image for Stop Writing if (role === "admin") in React. It's a Code Smell.
Mohame Ali Sraieb
Mohame Ali Sraieb

Posted on

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

#react #javascript #typescript #opensource

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") { ... }
Enter fullscreen mode Exit fullscreen mode

or worse:

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

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 />}
Enter fullscreen mode Exit fullscreen mode

✅ The clean way 

<Can I="delete" a="Post">
  <DeleteButton />
</Can>
Enter fullscreen mode Exit fullscreen mode

💡 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

📈 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

devtools #architecture

Top comments (0)