Input validation

Catch bad data at the boundary. Convex schema validators, business-rule validation, sanitization.

The first line of defense against bad data, exploits, and bugs.

Three layers

1. Schema validators (Convex)

   v.string(), v.number(), v.union(...) — enforced at the database level. Bad shapes are rejected before your handler runs.

2. Business rules (in mutations)

   “Email must be lowercase”, “Quantity must be ≥ 1”, “Future date for due-by”. Throw with a clear message.

3. Sanitization (for user-provided HTML / markdown)

   Use DOMPurify or a markdown renderer with safe defaults. Don’t render dangerouslySetInnerHTML on raw user input.

In a Convex mutation

export const createPost = mutation({
  args: {
    title:   v.string(),
    body:    v.string(),
    teamId:  v.id("teams"),
  },
  handler: async (ctx, { title, body, teamId }) => {
    // Schema validators ran already.
    if (title.length < 1 || title.length > 200) {
      throw new ConvexError({ code: "invalid_title", message: "Title must be 1–200 chars." });
    }
    if (body.length > 100_000) {
      throw new ConvexError({ code: "body_too_long", message: "Body too long." });
    }
    // ... business logic
  },
});

Client-side validation

Use react-hook-form + zod for client-side. The same zod schema can be used to validate before submission and to type the form.

But: server-side validation is the truth. Client-side is for UX.

Sanitization for rendered content

If users paste HTML or markdown that will be rendered:

import DOMPurify from "dompurify";
const safe = DOMPurify.sanitize(userMarkdown);

For markdown specifically, react-markdown with default plugins is safe — it doesn’t render raw HTML by default.

Related

Convex schema

Validators reference.

Error handling

What to do when validation fails.

XSS / CSRF

Defending against rendered attacks.