Kay
Kay10mo ago

ReferenceError: Cannot access 'appRouter' before initialization

Hi friends im having trouble implementing a "protected" or "private" procedure in TRPC using Next.js 14 with NextAuth.
2 Replies
Kay
Kay10mo ago
import { TRPCError, initTRPC } from "@trpc/server";
import superjson from "superjson";
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { getServerAuthSession } from "./auth";
import { Session } from "next-auth";

type CreateContextOptions = {
session: Session | null;
};

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

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
const { req, res } = opts;

const session = await getServerAuthSession({ req, res });

return createInnerTRPCContext({
session,
});
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
});

const isAuthed = t.middleware(({ ctx, next }: any) => {
if (!ctx.session || !ctx.session.user) {
throw new TRPCError({ code: "UNAUTHORIZED" });
}
return next({
ctx: {
session: { ...ctx.session, user: ctx.session.user },
},
});
});

export const router = t.router;
export const protectedProcedure = t.procedure.use(isAuthed);
export const publicProcedure = t.procedure;
import { TRPCError, initTRPC } from "@trpc/server";
import superjson from "superjson";
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { getServerAuthSession } from "./auth";
import { Session } from "next-auth";

type CreateContextOptions = {
session: Session | null;
};

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

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
const { req, res } = opts;

const session = await getServerAuthSession({ req, res });

return createInnerTRPCContext({
session,
});
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
});

const isAuthed = t.middleware(({ ctx, next }: any) => {
if (!ctx.session || !ctx.session.user) {
throw new TRPCError({ code: "UNAUTHORIZED" });
}
return next({
ctx: {
session: { ...ctx.session, user: ctx.session.user },
},
});
});

export const router = t.router;
export const protectedProcedure = t.procedure.use(isAuthed);
export const publicProcedure = t.procedure;
If i understand this correctly it should be setting a context for trpc. The context is the session object from the nextauth function getServerSession
import { httpBatchLink } from "@trpc/client";

import { appRouter } from "@/server";
import { ServerConfig } from "@/config/server";

export const TrpcClientServer = appRouter.createCaller({
links: [
httpBatchLink({
url: `${ServerConfig.NEXTAUTH_URL}/api/trpc`,
}),
],
});
import { httpBatchLink } from "@trpc/client";

import { appRouter } from "@/server";
import { ServerConfig } from "@/config/server";

export const TrpcClientServer = appRouter.createCaller({
links: [
httpBatchLink({
url: `${ServerConfig.NEXTAUTH_URL}/api/trpc`,
}),
],
});
Nick
Nick10mo ago
This likely means you have a circular import Also not sure what you're doing in that last file, but that's definitely not how you use createCaller, I think you need to revisit the docs