Kay•10mo 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•10mo 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•10mo 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