Client-Side Auth Only

Password comparisons or auth logic in client components

criticalSecurityclient-side-auth-only

Why this matters

Any auth logic in client code can be bypassed by opening DevTools. Password comparisons, role checks, and token validation must happen on the server where users can't tamper with them.

✗ Bad

"use client";

export function AdminPanel({ password }: { password: string }) {
  if (password !== "admin123") {
    return <p>Access denied</p>;
  }
  return <div>Admin content here</div>;
}

✓ Good

// Server component or API route
import { auth } from "@/lib/auth";

export default async function AdminPanel() {
  const session = await auth();
  if (session?.user?.role !== "admin") {
    redirect("/");
  }
  return <div>Admin content here</div>;
}

How to fix

Move all auth logic to server components, API routes, or middleware. Client code should only render based on the session state provided by the server.

All rules