Theo's Typesafe Cult•3mo ago

headers: heads vs. CreateNextContextOptions

Howdy, I've been following this nifty video on YouTube: https://youtu.be/YkOSUVzOAA4?si=_D4dZp4vBHzIJFXK It may be a bit dated, as the code in the video isn't lining up with the code in the repo link. Right around 1:23, Theo goes into how to use Clerk to effectively prevent access to tRPC procedures, using a private procedure that invokes some enforceAuth middleware. My question is that opts here wouldn't work:

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  // watch 1:21 at https://youtu.be/YkOSUVzOAA4?si=ZPeiTCVKMH_7tjvd
  // auth doesn't have the user object, only the userId
  const { req } = opts;
  const auth = getAuth(req);
  const currentUserId = auth.userId;
  return {
    db,
    currentUserId,
    ...opts,
  };
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  // watch 1:21 at https://youtu.be/YkOSUVzOAA4?si=ZPeiTCVKMH_7tjvd
  // auth doesn't have the user object, only the userId
  const { req } = opts;
  const auth = getAuth(req);
  const currentUserId = auth.userId;
  return {
    db,
    currentUserId,
    ...opts,
  };
};

The issue is that changing opts from opts:{headers: Headers} to {opts: CreateNextContextOptions} (as what's shown in the video) breaks ~/trpc/server:

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

In the video ~trpc/server.is is never touched, so I'm befuddled.
Any help would be most appreciated.

Theo - t3․gg

YouTube

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...

I've never worked this hard on a video before. I really hope y'all can benefit from this 🙏 GITHUB REPO https://github.com/t3dotgg/chirp DEPLOYED APP https://xn--uo8h.t3.gg/ GET A JACKET IF YOU'RE COOL LIKE THAT https://shop.t3.gg/ ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg Everything else (Twitch, Twitter, Discor...

1 Reply

KimfuciousOP•3mo ago

I found this gist that passes the authObject down: https://gist.github.com/mkcode/a590d1c8f7b0a37b8299965de7f7e958

Gist

How to setup Next App Router + Clerk + TRPC

How to setup Next App Router + Clerk + TRPC. GitHub Gist: instantly share code, notes, and snippets.

Gaming

Programming

headers: heads vs. CreateNextContextOptions