Set cookie header in procedure middleware

export function createContext({
  req,
  resHeaders,
}: FetchCreateContextFnOptions) {
  // custom code for parsing session - not important
  const userId = getUserId(req.headers);

  // see addSetCookie below
  const newHeaders = addSetCookies({
    // whenever I tried to pass `resHeaders` directly, I got error from client that it is unable to parse response - there was no error thrown in my code though
    headers: new Headers(resHeaders),
    sid: toSid(userId),
    maxAge: 3600
  });

  return {
    req,
    resHeaders: newHeaders,
    userId,
  };
}

function addSetCookies(props: {
  headers: Headers;
  sid: string;
  maxAge: number;
}): Headers {
  [
    `__Host-SID=${props.sid}; HttpOnly; Max-Age=${props.maxAge}; SameSite=Strict; Secure; Path=/`,
    `aSID=${props.maxAge > 0 ? 1 : 0}; Max-Age=${props.maxAge}; SameSite=Strict; Secure; Path=/`,
  ].forEach((value) => props.headers.append("Set-Cookie", value));

  return props.headers;
}

const protectedProcedure = t.procedure.use(async ({ ctx, next }) => {
  if (ctx.userId == null) {
    // not sure if throw here is the best option, but I tried to return 200OK as you can see below as well
    throw new TRPCError({ code: "UNAUTHORIZED" });

    // return {
    //   ok: true,
    //   data: null,
    //   marker: "middlewareMarker" as "middlewareMarker" & {
    //     __brand: "middlewareMarker";
    //   },
    // };
  }

  return next({
    ctx: {
      userId: ctx.userId,
    },
  });
});