Thimo_o Posts

Thimo_o

•Created by Thimo_o on 9/7/2023 in #❓-help

tRPC error in app Router (undefined headers)

I use the tRPC file structure from Jack Herringtons video I added clerk auth for protected routes and set the create Context in the route handler:

createContext: () => createTRPCContext(req),



interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject
}
const createInnerTRPCContext = async ({ auth }: AuthContext) => {
  return {
    auth,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  return await createInnerTRPCContext({ auth: getAuth(req) })
}

export type Context = trpc.inferAsyncReturnType<typeof createTRPCContext>

export const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    }
  },
})

export const createTRPCRouter = t.router

createContext: () => createTRPCContext(req),



interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject
}
const createInnerTRPCContext = async ({ auth }: AuthContext) => {
  return {
    auth,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  return await createInnerTRPCContext({ auth: getAuth(req) })
}

export type Context = trpc.inferAsyncReturnType<typeof createTRPCContext>

export const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    }
  },
})

export const createTRPCRouter = t.router

but this results in the following error:

 error TypeError: Cannot read properties of undefined (reading 'headers')
     at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/next@13.4.19_@babel+core@7.22.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

 error TypeError: Cannot read properties of undefined (reading 'headers')
     at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/next@13.4.19_@babel+core@7.22.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

2 replies

TtRPC

•Created by Thimo_o on 8/26/2023 in #❓-help

How do I setup App router + TRPC + Lucia Auth? (protected routes)

I'm trying to setup tRPC with Lucia in app router but I struggle to make protected routes work. I made a trpc context where I put lucia session and a getDefaultSession function to get the session

export const getDefaultSession = cache((req: NextRequest) => {
  const authRequest = auth.handleRequest({
    request: req,
    cookies,
  })
  return authRequest.validate()
})

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  const session = await getDefaultSession(req)

  return createInnerTRPCContext({
    session,
  })
}

export const getDefaultSession = cache((req: NextRequest) => {
  const authRequest = auth.handleRequest({
    request: req,
    cookies,
  })
  return authRequest.validate()
})

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  const session = await getDefaultSession(req)

  return createInnerTRPCContext({
    session,
  })
}

I wrote a isAuth function to make the protected procedure

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session || !ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" })
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  })
})

export const protectedProcedure = t.procedure.use(enforceUserIsAuthed)

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session || !ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" })
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  })
})

export const protectedProcedure = t.procedure.use(enforceUserIsAuthed)

and added it in my route.ts handler

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext(req),
  })

export { handler as GET, handler as POST }

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext(req),
  })

export { handler as GET, handler as POST }

But the session is not passed into ctx resulting in always getting the unauthorized error. Does someone know what I did wrong to make this work?

7 replies