Data Security: DTOs, Tainted Props and Public Server Actions

// file: next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = { cacheComponents: true, partialPrefetching: true };
export default nextConfig;

// file: app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body><main>{children}</main></body>
    </html>
  );
}

// file: app/lib/db.ts
import "server-only";

export const users = new Map([
  ["u1", { id: "u1", name: "Ana", passwordHash: "scrypt$9f2c1a77", internalNotes: "VIP, refund approved" }],
]);

const store = globalThis as unknown as { invoices?: Map<string, { id: string; ownerId: string; status: string }> };
store.invoices ??= new Map([
  ["inv-1", { id: "inv-1", ownerId: "u1", status: "open" }],
  ["inv-9", { id: "inv-9", ownerId: "u2", status: "open" }],
]);
export const invoices = store.invoices;

// file: app/lib/dal.ts
import "server-only";
import { cookies } from "next/headers";
import { users, invoices } from "./db";

export async function getSession() {
  // Verified signed session as in the previous lesson; shortened here.
  const userId = (await cookies()).get("session")?.value;
  return userId && users.has(userId) ? { userId } : null;
}

export async function getProfileDTO(userId: string) {
  const user = users.get(userId)!;
  return { name: user.name };                          // never the hash or internal notes
}

export async function getMyInvoices() {
  const session = await getSession();
  if (!session) return [];
  return [...invoices.values()].filter((i) => i.ownerId === session.userId);
}

// file: app/profile-card.tsx
"use client";

export function ProfileCard({ user }: { user: { name: string } }) {
  return <p>Signed in as {user.name}</p>;
}

// file: app/leaky/page.tsx
import { users } from "../lib/db";
import { ProfileCard } from "../profile-card";

export default function Page() {
  const user = users.get("u1")!;
  return <ProfileCard user={user} />;                  // the whole record is serialized into the page
}

// file: app/safe/page.tsx
import { getProfileDTO } from "../lib/dal";
import { ProfileCard } from "../profile-card";

export default async function Page() {
  return <ProfileCard user={await getProfileDTO("u1")} />;
}

// file: app/invoices/actions.ts
"use server";
import { refresh } from "next/cache";
import { getSession } from "../lib/dal";
import { invoices } from "../lib/db";

export async function cancelInvoice(formData: FormData) {
  const session = await getSession();
  const invoice = invoices.get(String(formData.get("invoiceId")));
  if (!session || !invoice || invoice.ownerId !== session.userId) {
    console.log(`[app] refused: ${session?.userId ?? "anonymous"} tried to cancel ${formData.get("invoiceId")}`);
    return;
  }
  invoice.status = "cancelled";
  console.log(`[app] ${session.userId} cancelled ${invoice.id}`);
  refresh();
}

// file: app/invoices/page.tsx
import { Suspense } from "react";
import { getMyInvoices } from "../lib/dal";
import { cancelInvoice } from "./actions";

async function InvoiceList() {
  const list = await getMyInvoices();
  return (
    <ul>
      {list.map((invoice) => (
        <li key={invoice.id}>
          {invoice.id}: {invoice.status}{" "}
          <form action={cancelInvoice}>
            <input type="hidden" name="invoiceId" value={invoice.id} />
            <button>Cancel</button>
          </form>
        </li>
      ))}
    </ul>
  );
}

export default function Page() {
  return <><h1>My invoices</h1><Suspense fallback={<p>Loading...</p>}><InvoiceList /></Suspense></>;
}

// request: GET /leaky find:passwordHash find:internalNotes
// request: GET /safe find:passwordHash find:internalNotes
// request: SUBMIT /invoices cookie:session=u1 invoiceId=inv-9
// request: SUBMIT /invoices
// request: GET /invoices