Next.js 13 + tRPC 10：如何创建认证用可设置Cookie的tRPC端点？

核心逻辑 #

tRPC端点无法直接操作Cookie，需借助Next.js的响应对象（res）来完成设置，关键是在tRPC上下文里传入该响应对象，让路由函数能访问到它。

具体实现步骤 #

1. 配置tRPC上下文 #

先在上下文注入Next.js的请求/响应对象，确保路由能拿到操作Cookie的入口：

// src/server/trpc/context.ts
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";

export const createContext = async (opts: CreateNextContextOptions) => {
  return {
    req: opts.req,
    res: opts.res, // 把响应对象传入上下文
  };
};

export type Context = Awaited<ReturnType<typeof createContext>>;

2. 编写可设置Cookie的tRPC路由 #

在路由函数中通过上下文获取res，用setHeader方法设置Cookie：

// src/server/trpc/routers/auth.ts
import { z } from "zod";
import { router, publicProcedure } from "../trpc";

export const authRouter = router({
  setAuthCookie: publicProcedure
    .input(z.object({ token: z.string() }))
    .mutation(async ({ input, ctx }) => {
      // 配置Cookie属性，按需调整
      ctx.res.setHeader("Set-Cookie", [
        `authToken=${input.token}; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=604800`,
      ]);

      return { success: true, message: "Cookie已设置" };
    }),
});

3. 客户端调用该端点 #

直接用tRPC客户端发起调用即可，无需额外处理头信息：

// 客户端组件/页面
import { api } from "@/utils/api";

const handleSetCookie = async () => {
  const token = "生成的认证令牌";
  await api.auth.setAuthCookie.mutate({ token });
};

关键注意点 #

• 安全属性：生产环境务必开启HttpOnly（防XSS）、Secure（仅HTTPS传输）
• SameSite：根据跨域场景选择Strict/Lax/None，避免跨域Cookie问题
• 有效期：通过Max-Age设置Cookie存活时长，单位为秒

内容的提问来源于stack exchange，提问作者Meow