createTRPCNext config ctx always returns undefined.

Hi Everyone. So I'm trying to use TRPC and Nextjs for auth and post query etc. I have client side createTRPCNext below.

export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      transformer,
      links: [
        loggerLink({
          enabled: (opts) => process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            if (!ctx || !ctx.req || !ctx.res) {
              return {};
            }
            const cookies = new Cookies(ctx.req, ctx.res);
            const token = cookies.get("jwt");
            return {
              Authorization: token ? `Bearer ${token}` : "",
            };
          },
        }),
      ],
    };
  },
});

export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      transformer,
      links: [
        loggerLink({
          enabled: (opts) => process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            if (!ctx || !ctx.req || !ctx.res) {
              return {};
            }
            const cookies = new Cookies(ctx.req, ctx.res);
            const token = cookies.get("jwt");
            return {
              Authorization: token ? `Bearer ${token}` : "",
            };
          },
        }),
      ],
    };
  },
});

when i try to access ctx in config opts it always returns undefined. type says it is NextPageContext | undefined, so i'm guessing i'm missing something. Please let me know if you guys have any ideas. Also, if you have any idea on using http-proxy with trpc server for cookie assignment etc would be amazing. I been trying to set cookies in proxy server and following this blog's steps https://maxschmitt.me/posts/next-js-http-only-cookie-auth-tokens With proxy route simple queries works but when i selfHandleResponse and return response, I get TRPCClientError. Thank you for all the help!

Max Schmitt

Next.js: Using HTTP-Only Cookies for Secure Authentication (2023)

4 Replies

Holliday•17mo ago

I'm also running into this issue, trying to access the request from opts, but it's always a empty object

David•13mo ago

Hi @MoronPenguin / @Holliday did either of you figure out what the issue is?

Holliday•13mo ago

@David we don't use trpc anymore, I don't remember if we ended up solving it either unfortunately

David•13mo ago

unfortunate, thanks for replying