Securing Server Actions

Calling an action without its page

Asha's order page in the tea shop has a Cancel order button, from Authorization and the data access layer. Its Server Action, cancel, gets the order's id. The button only shows on the visitor's own order, so this first version checks nothing:

1"use server";2 3import { removeAllOrders, setBoxes, setStatus } from "@/lib/db";4 5// The select only offers 1 to 5 boxes, on the visitor's own order.6export async function changeBoxes(formData: FormData) {7  await setBoxes(Number(formData.get("orderId")), Number(formData.get("boxes")));8}9 10// The button only shows on the visitor's own order.11export async function cancel(id: unknown) {12  await setStatus(Number(id), "cancelled");13  return { message: `Order ${id} is cancelled.` };14}15 16// For an admin page that was removed. No page calls it any more.17export async function deleteAllOrders() {18  await removeAllOrders();19}

[3]

0:{"a":"$@1","q":"","i":false,"b":"uzMg0OKb_cNPwImPwTYHM"}
1:{"message":"Order 3 is cancelled."}

In app/orders/[id]/actions.ts, the file shown first, line 12 cancels whatever id arrives, and line 13 says so. The recording is a real Next.js 16.4.3 project. After asking for Asha's page, the recorder stopped being a browser and sent this, with no cookie at all:

POST /orders/1
next-action: 40db09f444a5619567970083af3266cf0765bbde64
content-type: text/plain;charset=UTF-8

[3]

Line 1 posts to Asha's order page. Line 2 is the next-action header with the id the build gave cancel; the page's own JavaScript sends the same header. Line 5, the body, is the list of arguments: 3, Ben's order. The Network tab shows the answer: 200, and the payload's last line, {"message":"Order 3 is cancelled."}. Ravi, opening Ben's order later, saw it cancelled.

Every action is a public endpoint

An endpoint is an address on a server that anything on the internet can send requests to. For a Server Action, the address is any page of the app and the action's id. The program needed the id, and it was easy to find:

• The page's HTML holds it. Open the Network tab, pick /orders/1, and find "id":"40db09f444a5619567970083af3266cf0765bbde64" in a hidden field of the Cancel form. React puts it there so the form works before the JavaScript loads.
• The page's JavaScript holds it too: the recording found the id in the files the page loads.

So anyone who can load a page can call every action that page uses. Next.js's docs put it plainly: a page that only shows a form to signed-in staff protects nothing, because the request can come without the form. Here are both versions of the actions file, called by the same program:

1"use server";2 3import { removeAllOrders, setBoxes, setStatus } from "@/lib/db";4 5// The select only offers 1 to 5 boxes, on the visitor's own order.6export async function changeBoxes(formData: FormData) {7  await setBoxes(Number(formData.get("orderId")), Number(formData.get("boxes")));8}9 10// The button only shows on the visitor's own order.11export async function cancel(id: unknown) {12  await setStatus(Number(id), "cancelled");13  return { message: `Order ${id} is cancelled.` };14}15 16// For an admin page that was removed. No page calls it any more.17export async function deleteAllOrders() {18  await removeAllOrders();19}

[3]

0:{"a":"$@1","q":"","i":false,"b":"uzMg0OKb_cNPwImPwTYHM"}
1:{"message":"Order 3 is cancelled."}

The second version is the one to write. Its cancel:

1"use server";2 3import { z } from "zod";4import { cancelOrder, changeOrderBoxes, getCurrentUser } from "@/lib/dal";5 6const boxesForm = z.object({7  orderId: z.coerce.number().int().positive(),8  boxes: z.coerce.number().int().min(1).max(5),9});10const orderId = z.number().int().positive();11 12export async function changeBoxes(formData: FormData) {13  const input = boxesForm.safeParse({ orderId: formData.get("orderId"), boxes: formData.get("boxes") });14  if (!input.success) return;15  await changeOrderBoxes(input.data.orderId, input.data.boxes);16}17 18export async function cancel(id: unknown) {19  if (!(await getCurrentUser())) return { message: "Sign in first." };20  const checked = orderId.safeParse(id);21  if (!checked.success) return { message: "That isn't an order number." };22  return { message: await cancelOrder(checked.data) };23}24 

• Line 19 asks who is calling, with getCurrentUser from lib/dal.ts. No session: Sign in first.
• Line 20 checks the argument against the schema on line 10: a whole number above 0. Line 21 refuses anything else, like the text "3 OR 1=1".
• Line 22 passes a checked number to cancelOrder, which asks getOrder whether this user may have the order. For Asha and order 3: There's no such order.

The arguments are typed unknown on purpose. TypeScript types describe what your own code passes; they can't stop what a program sends. unknown makes you check before you use it.

Validating every argument

Forms in Next.js used Zod, a library that checks a value against a description of what it should be, a schema, to show helpful messages. Here it does a second job: refusing what the page never offers. The order page has a form to change the number of boxes:

1import { notFound } from "next/navigation";2import { getOrder, placeOrderAgain, verifySession } from "@/lib/dal";3import { changeBoxes } from "./actions";4import CancelButton from "./cancel-button";5 6export const instant = false;7 8export default async function OrderPage({ params }: PageProps<"/orders/[id]">) {9  await verifySession();10  const { id } = await params;11  const order = await getOrder(Number(id));12  if (!order) notFound();13 14  // A Server Action written inside the page. It uses orderId, so Next.js sends orderId along, encrypted.15  const orderId = order.id;16  async function orderAgain() {17    "use server";18    await placeOrderAgain(orderId);19  }20 21  return (22    <main>23      <h1>Order {order.id}</h1>24      <p>25        {order.boxes} boxes of {order.tea}: {order.status}26      </p>27      <form action={changeBoxes}>28        <input type="hidden" name="orderId" value={order.id} />29        <label htmlFor="boxes">Boxes</label>30        <select id="boxes" name="boxes" defaultValue={order.boxes}>31          {[1, 2, 3, 4, 5].map((boxes) => (32            <option key={boxes}>{boxes}</option>33          ))}34        </select>35        <button>Change</button>36      </form>37      <CancelButton orderId={order.id} />38      <form action={orderAgain}>39        <button>Order again</button>40      </form>41    </main>42  );43}44 

Lines 27 to 36 are the Change form. Line 28 is a hidden orderId field, and line 30 a select that offers 1 to 5 boxes. Line 37 is CancelButton, which binds the order's id to cancel:

1"use client";2 3import { useActionState } from "react";4import { cancel } from "./actions";5 6export default function CancelButton({ orderId }: { orderId: number }) {7  const [state, formAction, isPending] = useActionState(cancel.bind(null, orderId), { message: "" });8  return (9    <form action={formAction}>10      <button disabled={isPending}>Cancel order</button>11      <p aria-live="polite">{state.message}</p>12    </form>13  );14}15 

Line 7, cancel.bind(null, orderId), makes a new action whose first argument is always this order's id. That id still travels like any argument: in the page's HTML, the Cancel form's hidden field holds [1,{"message":""}], the bound id and useActionState's first state, in plain text. Each row is one value the actions receive, and who controls it:

The recorder posted the Change form three times on Asha's order, the way a browser sends it before the JavaScript loads: with 4 boxes, with -3, a number the select never offers, and with 5 boxes and the hidden orderId changed to 3. Then Ravi opened Ben's order:

1"use server";2 3import { removeAllOrders, setBoxes, setStatus } from "@/lib/db";4 5// The select only offers 1 to 5 boxes, on the visitor's own order.6export async function changeBoxes(formData: FormData) {7  await setBoxes(Number(formData.get("orderId")), Number(formData.get("boxes")));8}9 10// The button only shows on the visitor's own order.11export async function cancel(id: unknown) {12  await setStatus(Number(id), "cancelled");13  return { message: `Order ${id} is cancelled.` };14}15 16// For an admin page that was removed. No page calls it any more.17export async function deleteAllOrders() {18  await removeAllOrders();19}

In the checked version, lines 6 to 9 describe the form: z.coerce.number() turns the field's text into a number, .int() wants a whole one, and .min(1).max(5) the select's range. Line 13 checks both fields at once, and line 14 stops on any failure. The changed orderId passed the schema, since 3 is a fine number, so the ownership check in changeOrderBoxes stopped it. A schema checks the shape of a value; only the data access layer knows whether this user may use it. Every action needs both.

Encrypted closures and action ids

Next.js does protect some things on its own. Two of them are easy to mistake for security they aren't.

Values an inline action uses are encrypted

Lines 16 to 19 of the order page write a Server Action inside the page component. A function that uses a variable from around it is a closure; orderAgain uses orderId, from line 15. When it runs later, on another request, it needs that value back, so Next.js puts it into the page, encrypted with the build's key. In the recorded HTML, the Order again form's hidden field holds a long string that starts "zAsL7W, not the number. The recorder called the action with a made-up string in its place: Next.js couldn't decrypt it, answered 500, and the action never ran.

That protects the value: nobody can read it or change it. It doesn't say who is calling. Anyone who loads the page gets a valid encrypted value, and can send it back as often as they like. So placeOrderAgain still asks getCurrentUser, and the docs advise against relying on the encryption to hide sensitive values. When the app runs on several servers, every one needs the same key: the docs say to set NEXT_SERVER_ACTIONS_ENCRYPTION_KEY to a secret, random 32-byte key (openssl rand -base64 32), the same on every server that runs one build.

Action ids are made from a secret

The docs call action ids "encrypted, non-deterministic". In Next.js 16.4.3, the compiler makes each id from one secret, the file's path and the function's name: a SHA-1 hash, a short fingerprint of those three, with one more byte in front about the function's arguments (server_actions.rs, lines 284 to 306). The secret is the encryption key: Next.js makes a random one and keeps it in .next/cache for 14 days, or makes a new one for every build when it runs in Docker (encryption-utils-server.ts, line 14), or uses NEXT_SERVER_ACTIONS_ENCRYPTION_KEY.

The examples here set that variable to a fixed key, written in their .env files. That's a fixture for the recording, not a security measure: it keeps the ids the same on every build, so the recorder could send them and this course's test can work them out. Anyone who knows a key can work out the ids it gives. A real app keeps its key secret.

What the secret protects: nobody without the key can work out the id of an action they've never seen. The docs add that Next.js removes unused actions from the browser's code, so they have no public endpoint. The trusting version tests that in one case. It still exports deleteAllOrders, on lines 17 to 19, which no page calls any more, from the same file as changeBoxes and cancel, which pages do use. Its id appears in none of the files the page loads. But with Next.js 16.4.3's default build, made by Turbopack, it was still an endpoint: called with its id, it answered 200, and Asha's order was gone. The docs' wording may hold in other setups, like a webpack build; this recording shows only the default one. In the checked version, the function is deleted, and the same call got 409, Server Action unavailable.

So don't count on "nothing calls it" meaning "nobody can reach it". Give every action, and above all a destructive one, its own checks, or delete it.

Origin checks, allowedOrigins and bodySizeLimit

One attack doesn't need a program. A page on another site can hold a form that posts to your action. When a visitor who is signed in to the tea shop opens that page, their browser sends the form, perhaps with their cookies. That's cross-site request forgery (CSRF). The session cookie's sameSite: "lax", from Authentication, already keeps the cookie off other sites' POSTs; it still goes with a link the visitor follows to the shop.

Next.js adds a check of its own. Modern browsers normally send an Origin header with a POST: the site of the page that sent it. Next.js compares it with the address the request was sent to, the Host header, or X-Forwarded-Host when a proxy in front of the app set it. If they differ, the action doesn't run. A request with no Origin at all is let through: for a posted form, Next.js only prints a warning. A missing Origin proves nothing about where a request came from, and any program can leave it out.

The shop has a contact form, and its action prints a line for each question it gets. The recorder posted the form four times, as Chrome would from four places, each with the Origin a browser sends, then once more from a hand-made request with no Origin. Pick each version and read the Terminal tab under $ next start:

1"use server";2 3import { z } from "zod";4 5const question = z.object({ email: z.email(), text: z.string().trim().min(1).max(500) });6 7export async function askQuestion(formData: FormData) {8  const input = question.safeParse({ email: formData.get("email"), text: formData.get("text") });9  if (!input.success) {10    console.log("askQuestion: refused, the fields don't match the schema");11    return;12  }13  console.log(`askQuestion: ${input.data.text.length} characters from ${input.data.email}`);14}

$ next build▲ Next.js 16.4.3 (Turbopack)- Environments: .env- Cache Components enabled- Partial Prefetching enabled   Creating an optimized production build ...✓ Compiled successfully  Running TypeScript ...  Finished TypeScript ...  Collecting page data ...✓ Generating static pages (4/4)  Finalizing page optimization ... Route (app)┌ ○ /├ ○ /_not-found└ ○ /contact ○  (Static)  prerendered as static content $ next start▲ Next.js 16.4.3- Local:         http://localhost:3000- Network:       http://localhost:3000✓ ReadyaskQuestion: 19 characters from asha@example.com`x-forwarded-host` header with value `shop.example` does not match `origin` header with value `evil.example` from a forwarded Server Actions request. Aborting the action.⨯ Error: Invalid Server Actions request.    at async m (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:1:12146)    at async n (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:4598)    at async t (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:6019)    at async Y (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:4:1514)⨯ Error: Invalid Server Actions request.    at async m (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:1:12146)    at async n (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:4598)    at async t (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:6019)    at async Y (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:4:1514)`x-forwarded-host` header with value `tea-shop.internal` does not match `origin` header with value `shop.example` from a forwarded Server Actions request. Aborting the action.⨯ Error: Invalid Server Actions request.    at async m (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:1:12146)    at async n (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:4598)    at async t (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:6019)    at async Y (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:4:1514)⨯ Error: Invalid Server Actions request.    at async m (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:1:12146)    at async n (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:4598)    at async t (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:2:6019)    at async Y (.next/server/chunks/ssr/[root-of-the-server]__14ysbpjp-8wul._.js:4:1514)askQuestion: refused, the fields don't match the schema⚠ Missing `origin` header from a forwarded Server Actions request.askQuestion: 19 characters from asha@example.com

1"use server";2 3import { z } from "zod";4 5const question = z.object({ email: z.email(), text: z.string().trim().min(1).max(500) });6 7export async function askQuestion(formData: FormData) {8  const input = question.safeParse({ email: formData.get("email"), text: formData.get("text") });9  if (!input.success) {10    console.log("askQuestion: refused, the fields don't match the schema");11    return;12  }13  console.log(`askQuestion: ${input.data.text.length} characters from ${input.data.email}`);14}15 

Line 13 prints askQuestion: 19 characters from asha@example.com for the shop's own page. The page on evil.example got 500, and next start printed `x-forwarded-host` header with value `shop.example` does not match `origin` header with value `evil.example`… and Invalid Server Actions request. The action printed nothing. The hand-made request with no Origin got 200: next start printed ⚠ Missing `origin` header from a forwarded Server Actions request., then the action's own line. The check is in action-handler.ts, lines 731 to 745. The Origin check stops another site's page in a visitor's browser; it was never a check of who is asking.

allowedOrigins: behind a proxy

Some apps run behind a proxy that forwards each request with its own address, here tea-shop.internal, while visitors' browsers are on shop.example. Then every real post looks cross-site, and the default version refused it too. serverActions.allowedOrigins lists the extra sites allowed to post:

1import type { NextConfig } from "next";2 3const nextConfig: NextConfig = {4  /* config options here */5  cacheComponents: true,6  partialPrefetching: true,7  experimental: {8    serverActions: {9      allowedOrigins: ["shop.example"],10      bodySizeLimit: "1kb",11    },12  },13};14 15export default nextConfig;16 

Line 9 lets pages on shop.example post, and the proxy's request got through. Pages on evil.example are still refused. The setting lives under experimental.serverActions in Next.js 16.4.3, as the docs show it. A proxy that forwards the visitor's host in X-Forwarded-Host needs no entry. And a list like this is for real proxies and domains: every site on it may post with your visitors' browsers.

bodySizeLimit

Next.js reads at most 1 MB of an action's body by default, so nobody can make the server read a huge one. Line 10 lowers the limit to 1 kB, only to make it easy to see with a small request. The 2,000-character question shows the difference. With the default limit, it reached the action, and the schema on line 5 refused it: askQuestion: refused…. With 1 kB, Next.js stopped it first: 500, and Body exceeded 1kb limit. Raise the limit for actions that take uploads; keep the schema's own limits either way.

Rate limiting

Every check so far passes a well-formed request from a signed-in user. Nothing stops that user, or a program, from sending it a thousand times: guessing passwords, or sending a thousand emails. A rate limit allows a number of tries per key, like an email or an address, in a span of time. Next.js has none for actions, so here is the smallest one that works:

1import "server-only";2 3// Tries per key, kept in this one server's memory. With more than one server, or a4// serverless platform, each copy has its own Map: use a shared store, like Redis.5const tries = new Map<string, number[]>();6 7export function allowTry(key: string, limit: number, windowMs: number) {8  const now = Date.now();9  const recent = (tries.get(key) ?? []).filter((time) => now - time < windowMs);10  if (recent.length >= limit) return false;11  recent.push(now);12  tries.set(key, recent);13  return true;14}15 

• Line 5 keeps a list of times for each key.
• Line 9 keeps the times inside the window. Line 10 refuses when there are already limit of them.
• Lines 11 and 12 count this try, and line 13 allows it.

Lines 3 and 4 say what it is: a stand-in for teaching. The Map lives in one server's memory. Run three copies of the app, or a serverless platform that starts new ones, and each counts on its own. Real apps keep the counts in a store every copy shares, like Redis. The Authentication lesson's sign-in form uses it, five tries per email every 15 minutes:

1"use server";2 3import { redirect } from "next/navigation";4import { z } from "zod";5import { NO_USER_HASH, verifyPassword } from "@/lib/password";6import { allowTry } from "@/lib/rate-limit";7import { createSession } from "@/lib/session";8import { findUserByEmail } from "@/lib/users";9 10const credentials = z.object({ email: z.email(), password: z.string().min(1).max(200) });11 12export type SignInState = { error: string; email: string };13 14export async function signIn(previous: SignInState, formData: FormData): Promise<SignInState> {15  const email = String(formData.get("email") ?? "").trim().toLowerCase();16  const result = credentials.safeParse({ email, password: formData.get("password") });17  if (!result.success) return { error: "Write your email and your password.", email };18  if (!allowTry(`sign-in:${result.data.email}`, 5, 15 * 60 * 1000)) {19    return { error: "Too many tries. Try again in 15 minutes.", email };20  }21  const user = await findUserByEmail(result.data.email);22  const matches = await verifyPassword(result.data.password, user?.passwordHash ?? NO_USER_HASH);23  if (!user || !matches) return { error: "Wrong email or password.", email };24  await createSession(user.id);25  redirect("/account");26}

Lines 18 to 20 of app/sign-in/actions.ts come before the password check, so a refused try costs no hashing. The recorder signed in as Asha with six wrong passwords, then the right one. Tries 1 to 5 got Wrong email or password. The Browser tab opens on try 6: Too many tries. Try again in 15 minutes. Try 7, with the right password, got the same answer, so a guesser can't tell when they've found it. Ben, on another email, signed in at once: 303 to /account.

A key per email protects one account from many guessers. A key per address, the visitor's IP, slows one guesser trying many accounts; behind a proxy it comes from a header like x-forwarded-for, which headers() can read. Most apps use both, and pick limits that a person never meets.

A per-email limit has a cost: anyone who knows Asha's email can use up her tries and keep her out for 15 minutes. Apps soften that by limiting each client too, so one guesser can't lock many accounts, and by offering another way in, like an emailed link. This Map also keeps every key forever. A production limiter counts in a shared store with an atomic increment, so two servers can't both count the same try as the fifth, and lets each count expire with its window.

Errors that tell nothing

When an action fails, the message can say too much: a database's address, a user name, a file path. The review form's database is down today. Here are two ways to write its action:

1"use server";2 3import { saveReview } from "@/lib/reviews";4 5export async function postReview(text: unknown) {6  try {7    await saveReview(String(text));8    return { error: "" };9  } catch (error) {10    return { error: String(error) };11  }12}

["Lovely."]

0:{"a":"$@1","q":"","i":false,"b":"Qo2uFa-BgWiHjYdhH5hNO"}
1:{"error":"Error: connect ECONNREFUSED 10.0.0.5:5432: password authentication failed for user \"shop_admin\""}

1"use server";2 3import { saveReview } from "@/lib/reviews";4 5export async function postReview(text: unknown) {6  try {7    await saveReview(String(text));8    return { error: "" };9  } catch (error) {10    return { error: String(error) };11  }12}13 

Line 9 catches the error, and line 10 sends its text back as the action's answer. The recorded payload carries connect ECONNREFUSED 10.0.0.5:5432 and shop_admin: the database's address and its user, for anyone who posts a review.

In the second version, the error is thrown. In production, Next.js doesn't send a thrown error's message to the browser. It sends a digest, a number that names this error, and the status 500. The Terminal tab shows the whole error under $ next start, with digest: '…' beside it, so the logs can find the error a visitor reports (Error handling shows what the page draws). The docs say next dev does send the message, to help while you work.

Better than both: check the argument, catch the failures you expect, write the details to your logs, and return a plain message the form can show:

1const review = z.string().trim().min(1).max(500);2 3export async function postReview(text: unknown) {4  const checked = review.safeParse(text);5  if (!checked.success) return { error: "Write a review of 1 to 500 characters." };6  try {7    await saveReview(checked.data);8    return { error: "" };9  } catch (error) {10    console.error("postReview failed:", error);11    return { error: "We couldn't save your review. Try again later." };12  }13}

Lines 4 and 5 check the argument first, against the schema on line 1, as every action should. Line 10 keeps the details of an expected failure on the server, and line 11 tells the visitor what they need to know.

Who protects what?

Next.js does some of the work; your actions do the rest. Sort each protection:

Common mix-ups

• "Only my form can call my action." No. A program with the id and no cookie cancelled Ben's order.
• "Action ids are secret, so they protect the action." No. Every page that uses an action carries its id. The secret only hides actions no page uses.
• "A bound argument is safe, because my code chose it." No. It's the action's first argument, in plain text, and anyone can send another.
• "The select only offers 1 to 5, so boxes is 1 to 5." No. The form is a suggestion; the recorder sent -3.
• "TypeScript types check the arguments." No. Types disappear when the code is built. Check with a schema.
• "An action nothing calls can't be reached." Its id stays out of the page, but with the default build an unused export in a used actions file still ran when called. Check it, or delete it.
• "A request with no Origin header didn't come from another site." No. A missing Origin proves nothing: the hand-made post without one ran, with only a warning. Check who is asking inside the action.
• "An in-memory rate limit is enough." Only on one server. Each copy of the app counts on its own.

Practice exercises

These exercises are about Next.js projects, which can't run inside this page. Answer first, then use the hints.

"use server";

import { z } from "zod";
import { cancelOrder, changeOrderBoxes, getCurrentUser } from "@/lib/dal";

const boxesForm = z.object({
  orderId: z.coerce.number().int().positive(),
  boxes: z.coerce.number().int().min(1).max(5),
});
const orderId = z.number().int().positive();

export async function changeBoxes(formData: FormData) {
  const input = boxesForm.safeParse({ orderId: formData.get("orderId"), boxes: formData.get("boxes") });
  if (!input.success) return;
  await changeOrderBoxes(input.data.orderId, input.data.boxes);
}

export async function cancel(id: unknown) {
  if (!(await getCurrentUser())) return { message: "Sign in first." };
  const checked = orderId.safeParse(id);
  if (!checked.success) return { message: "That isn't an order number." };
  return { message: await cancelOrder(checked.data) };
}

"use server";

import { z } from "zod";
import { cancelOrder, changeOrderBoxes, getCurrentUser } from "@/lib/dal";

const boxesForm = z.object({
  orderId: z.coerce.number().int().positive(),
  boxes: z.coerce.number().int().min(1).max(5),
});
const orderId = z.number().int().positive();

export async function changeBoxes(formData: FormData) {
  const input = boxesForm.safeParse({ orderId: formData.get("orderId"), boxes: formData.get("boxes") });
  if (!input.success) return;
  await changeOrderBoxes(input.data.orderId, input.data.boxes);
}

export async function cancel(id: unknown) {
  if (!(await getCurrentUser())) return { message: "Sign in first." };
  const checked = orderId.safeParse(id);
  if (!checked.success) return { message: "That isn't an order number." };
  return { message: await cancelOrder(checked.data) };
}

"use server";

import { redirect } from "next/navigation";
import { z } from "zod";
import { NO_USER_HASH, verifyPassword } from "@/lib/password";
import { allowTry } from "@/lib/rate-limit";
import { createSession } from "@/lib/session";
import { findUserByEmail } from "@/lib/users";

const credentials = z.object({ email: z.email(), password: z.string().min(1).max(200) });

export type SignInState = { error: string; email: string };

export async function signIn(previous: SignInState, formData: FormData): Promise<SignInState> {
  const email = String(formData.get("email") ?? "").trim().toLowerCase();
  const result = credentials.safeParse({ email, password: formData.get("password") });
  if (!result.success) return { error: "Write your email and your password.", email };
  if (!allowTry(`sign-in:${result.data.email}`, 5, 15 * 60 * 1000)) {
    return { error: "Too many tries. Try again in 15 minutes.", email };
  }
  const user = await findUserByEmail(result.data.email);
  const matches = await verifyPassword(result.data.password, user?.passwordHash ?? NO_USER_HASH);
  if (!user || !matches) return { error: "Wrong email or password.", email };
  await createSession(user.id);
  redirect("/account");
}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  cacheComponents: true,
  partialPrefetching: true,
  experimental: {
    serverActions: {
      bodySizeLimit: "1kb",
    },
  },
};

export default nextConfig;

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  cacheComponents: true,
  partialPrefetching: true,
  experimental: {
    serverActions: {
      allowedOrigins: ["shop.example"],
      bodySizeLimit: "1kb",
    },
  },
};

export default nextConfig;

"use server";

import { saveReview } from "@/lib/reviews";

export async function postReview(text: unknown) {
  try {
    await saveReview(String(text));
    return { error: "" };
  } catch (error) {
    return { error: String(error) };
  }
}

const review = z.string().trim().min(1).max(500);

export async function postReview(text: unknown) {
  const checked = review.safeParse(text);
  if (!checked.success) return { error: "Write a review of 1 to 500 characters." };
  try {
    await saveReview(checked.data);
    return { error: "" };
  } catch (error) {
    console.error("postReview failed:", error);
    return { error: "We couldn't save your review. Try again later." };
  }
}

Check your understanding

For each question, ask what the request carried, what Next.js checked, and what the action checked itself.

Key takeaways

• A Server Action runs for any POST that names its id, from any program, with any arguments.
• Inside every action: ask who is calling, check every argument with a schema, then let the data access layer decide.
• Bound arguments and hidden fields are arguments like any other. Only values an inline action uses are encrypted.
• Next.js compares Origin with the host, limits the body, makes ids from a secret, and hides thrown errors. None of it is authorization.
• Behind a proxy, list the real site in allowedOrigins. Keep schemas' own limits whatever bodySizeLimit says.
• Limit how often an action runs, with counts in a store every server shares.
• Return plain messages; log the details. Delete actions nothing calls.

Coming next: Security headers and Content Security Policy: headers that tell the browser what the shop's pages may do, and a policy for which scripts may run.