highCWE-602A01:2021

Auth Logic in Frontend Only

Showing or hiding UI elements based on user role in React, without any server-side enforcement — easily bypassed by anyone who opens DevTools.

How It Works

React renders on the client. Any `if (user.role === 'admin')` check in your JSX is just JavaScript that anyone can read and manipulate. Hiding a button doesn't protect the endpoint behind it. Attackers call the API directly, skipping your UI entirely.

Vulnerable Code
// BAD: admin panel hidden in UI but API unprotected
function Dashboard({ user }) {
  return (
    <div>
      {user.role === 'admin' && <AdminPanel />}
    </div>
  );
}
// The /api/admin route has no auth check
Secure Code
// GOOD: enforce on the server, mirror in UI
// API route:
export async function GET() {
  const user = await getAuthenticatedUser();
  if (user.role !== 'admin') {
    return Response.json({ error: 'Forbidden' }, { status: 403 });
  }
  return Response.json(await getAdminData());
}

Real-World Example

A vibecoder built a SaaS where the 'delete all users' button was hidden for non-admins. A curious user opened the Network tab, copied the fetch() call to the /api/admin/users endpoint, and ran it in the console. All users deleted.

How to Prevent It

  • Every sensitive API route must check user role/permissions server-side, always
  • Treat all client-side auth checks as UX only — never as security
  • Use middleware or a reusable auth helper to enforce roles on every protected route
  • Test your API routes directly with curl or Postman without a valid session

Affected Technologies

ReactNext.js

Data Hogo detects this vulnerability automatically.

Scan Your Repo Free

Related Vulnerabilities