Set server response headers from TRPC standalone adapter

Yyxaepnm

8/13/2023

Hi I am trying to implement my own authentication in Trpc. For this I need to create a session on the backend and return appropriate headers like set cookie for session-token and csrf-token. How can I set these headers from within a mutation when using the standalone adapter.
Could find anything here or in the docs. Thank you 🙏

AKAlex / KATT 🐱

8/13/2023

Pass through the req/res objs from createContext and set it in the mutation like you'd do without trpc

Yyxaepnm

8/14/2023

Thanks for the idea, managed to do it as follows: server initialization:

const { databaseUrl } = parseEnvironmentVariables();
const appContext = await createAppContext({ databaseUrl });

const server = createServer((req, res) => {
  const requestContext = createRequestContext({
    appContext,
    request: req,
    response: res,
  });
  const handler = createHTTPHandler({
    router: initRouter(),
    createContext: () => requestContext,
  });
  handler(req, res);
});

server.listen(options.port);

const { databaseUrl } = parseEnvironmentVariables();
const appContext = await createAppContext({ databaseUrl });

const server = createServer((req, res) => {
  const requestContext = createRequestContext({
    appContext,
    request: req,
    response: res,
  });
  const handler = createHTTPHandler({
    router: initRouter(),
    createContext: () => requestContext,
  });
  handler(req, res);
});

server.listen(options.port);

mutation definition:

export const initRouter = () =>
  router({
    create: publicProcedure.mutation(async (opts) => {
      const { appContext, requestContext } = opts.ctx;

      const sessionToken = nanoid(21);
      const sessionCookie = new Cookie({
        key: sessionTokenCookieName,
        value: sessionToken,
        sameSite: "strict",
        httpOnly: true,
      });

      const csrfToken = nanoid(21);
      const csrfCookie = new Cookie({
        key: csrfTokenCookieName,
        value: csrfToken,
        sameSite: "strict",
        httpOnly: true,
      });

      requestContext.response.setHeader("Set-Cookie", [
        sessionCookie.toString(),
        csrfCookie.toString(),
      ]);

      await appContext.db.insert(session).values({
        sessionToken,
      });

      return csrfToken;
    }),
  });

export const initRouter = () =>
  router({
    create: publicProcedure.mutation(async (opts) => {
      const { appContext, requestContext } = opts.ctx;

      const sessionToken = nanoid(21);
      const sessionCookie = new Cookie({
        key: sessionTokenCookieName,
        value: sessionToken,
        sameSite: "strict",
        httpOnly: true,
      });

      const csrfToken = nanoid(21);
      const csrfCookie = new Cookie({
        key: csrfTokenCookieName,
        value: csrfToken,
        sameSite: "strict",
        httpOnly: true,
      });

      requestContext.response.setHeader("Set-Cookie", [
        sessionCookie.toString(),
        csrfCookie.toString(),
      ]);

      await appContext.db.insert(session).values({
        sessionToken,
      });

      return csrfToken;
    }),
  });

Not the full code due to character limit, but should suffice if you are looking to do the same :)!

Mmattddean

9/14/2023

This is great, thank you. What's the new Cookie() library you're using? It looks nice

Looking for more? Join the community!

tRPC

Set server response headers from TRPC standalone adapter

Join Server

tRPC

Set server response headers from TRPC standalone adapter

Join Server

Recommended Posts

Return TRPC Error from NextJS middlewareI am using trpc for my app's api but Im using NextJS middleware + upstash ratelimitting for.... well useContext not InvalidatingWhat are the possible mistakes if useContext wont invalidate when doing the following: ```ts const u Deduping is broken, but is being batchedHi all, We're using TRPC for our React Native app, while doing some testing, I saw in my server log Question about trpc revalidation methodalright I have a question, why can tRPC detect changes from the DB and refetch. but when I mutate th How can I enable experimental Suspense on NextJSO have a project with trpc (v.10^) and nextjs 13, and I wanna test the suspense query, but not show Examples of Vitest with React Testing LibraryDoes anyone have examples of how to mock data from tRPC procedure calls? I have client components th How to refetch based on different eventI have a procedure that fetches all products, I have another one that deletes a project given it's I Dockerizing in TRPCHi guys, I am developing a Next app with TRPC subscriptions/websockets and am running into issues tr Jest set cookie with callerIm trying to test a protectedProcedure, which validates a cookie , if the cookie isnt present, it re UseQuery with no Input but query optionsI have a trpc protected procedure that does not take any input. First argument of use query is input