CodePark/ questions / Auth & security
START PRACTICINGPRACTICE
Frontend question · Next.js › Auth & security

A Server Component passes the full user row from the database to a Client Component. What is the risk and how do you prevent it?

The risk is a data leak: every prop sent to a Client Component reaches the browser. The fix is to send only the fields the UI needs.

Props passed to a Client Component are serialized (turned into data) into the RSC payload. The RSC payload is the compact description of the rendered tree that the server sends to the browser. This happens even if the component only shows the name. So a full database row can leak fields like password hashes, emails or internal flags. Anyone can see them in the page source or the network tab.

The fix: return DTOs (Data Transfer Objects: small objects with only the fields you want to send).

  • Keep database access in a data access layer marked with server-only.
  • That layer checks authorization.
  • It returns only the fields the UI needs, for example { name, avatarUrl }.
  • Pass those small objects to Client Components.

The same applies to Server Action return values. They are also sent to the client.

  • Props passed to Client Components are serialized and sent to the browser.
  • Passing whole database rows can leak sensitive fields.
  • Return minimal DTOs from a data access layer.
  • Server Action return values are also public.