DevR Comments

DevR

Posts Comments

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

Why would next-auth behave like that inside tRPC

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

in tRPC routes, contexts, the session is always null. Because I get this error from Next-auth

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error undefined {
  error: {},
  url: 'http://localhost:3000/api/auth/session',
  message: undefined
}
❌ tRPC failed on auth.setupAccount: TRPCError: UNAUTHORIZED

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error undefined {
  error: {},
  url: 'http://localhost:3000/api/auth/session',
  message: undefined
}
❌ tRPC failed on auth.setupAccount: TRPCError: UNAUTHORIZED

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

In my case, outside of tRPC, next-auth is working just fine. Inside trpc, it's not. IDK why.

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

Please help me out and let me know if any other context required 🙏

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

My package.json

{
    "@tanstack/react-query": "^4.20.0",
    "@trpc/client": "^10.7.0",
    "@trpc/next": "^10.7.0",
    "@trpc/react-query": "^10.7.0",
    "@trpc/server": "^10.7.0",
    "next": "^13.2.1",
    "next-auth": "^4.18.7",
    "next-superjson": "^0.0.4",
}

{
    "@tanstack/react-query": "^4.20.0",
    "@trpc/client": "^10.7.0",
    "@trpc/next": "^10.7.0",
    "@trpc/react-query": "^10.7.0",
    "@trpc/server": "^10.7.0",
    "next": "^13.2.1",
    "next-auth": "^4.18.7",
    "next-superjson": "^0.0.4",
}

Note that I am using the Next.js page router not App

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

So the problem happens when I am using a protectedProcedure. I get this error:

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error undefined {
  error: {},
  url: 'http://localhost:3000/api/auth/session',
  message: undefined
}
❌ tRPC failed on auth.setupAccount: TRPCError: UNAUTHORIZED

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error undefined {
  error: {},
  url: 'http://localhost:3000/api/auth/session',
  message: undefined
}
❌ tRPC failed on auth.setupAccount: TRPCError: UNAUTHORIZED

publicProcedure work fine. I am not sure but I think the context is not being initialized properly or something like that. Tried many ways but still unsolved. Your help would mean a lot to me 🙏

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

src\pages\api\trpc\[trpc].ts

import { env } from "@/env/server.mjs";
import { appRouter } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { createNextApiHandler } from "@trpc/server/adapters/next";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(`❌ tRPC failed on ${path}: ${error}`);
        }
      : undefined,
});

import { env } from "@/env/server.mjs";
import { appRouter } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { createNextApiHandler } from "@trpc/server/adapters/next";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(`❌ tRPC failed on ${path}: ${error}`);
        }
      : undefined,
});

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

Here's my tRPC setup:

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

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

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  const session = await getServerAuthSession(opts);
  return await createInnerTRPCContext({
    session,
  });
};

import { initTRPC, TRPCError } from "@trpc/server";
import superjson from "superjson";
import { getServerAuthSession } from "../auth";

export const t = initTRPC.context<Awaited<ReturnType<typeof createTRPCContext>>>().create({
  transformer: superjson,
  errorFormatter({ shape }) {
    return shape;
  },
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;

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

const protectedProcedure = t.procedure.use(isAuthed);

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

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

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  const session = await getServerAuthSession(opts);
  return await createInnerTRPCContext({
    session,
  });
};

import { initTRPC, TRPCError } from "@trpc/server";
import superjson from "superjson";
import { getServerAuthSession } from "../auth";

export const t = initTRPC.context<Awaited<ReturnType<typeof createTRPCContext>>>().create({
  transformer: superjson,
  errorFormatter({ shape }) {
    return shape;
  },
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;

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

const protectedProcedure = t.procedure.use(isAuthed);

20 replies

TtRPC

•Created by DevR on 5/28/2023 in #❓-help

Next-auth session not being fetched in tRPC context

I have got both next-auth and tRPC setup in my next.js app. When I try to fetch the session outside any tRPC route or middleware, It gets resolved properly. I guess Next-auth is working properly the problem is when I try to fetch a session within a tRPC route or middleware. I get null as a result, the user gets UNAUTHORIZED response.

20 replies