Problem with config NextAuth (unstable_getServerSession) and Websockets

[kewinzaq1]

Hi there, I have a simple config in createConfig and wsServer.
It causes an issue (infinite open/close) Websocket connection. When I remove getServerAuthSession it works)

export const createContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
) => {

  const req = opts.req as NextApiRequest;
  const res = opts.res as NextApiResponse<any>;

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

  return await createContextInner({
    session,
  });
};

export type Context = inferAsyncReturnType<typeof createContext>;

import { applyWSSHandler } from "@trpc/server/adapters/ws";
import fetch from "node-fetch";
import ws from "ws";
import { createContext, createContextInner } from "./trpc/context";
import { appRouter } from "./trpc/router/_app";

if (!global.fetch) {
  (global as any).fetch = fetch;
}
const wss = new ws.Server({
  port: 3001,
});
const handler = applyWSSHandler({
  wss,
  router: appRouter,
  createContext: createContext,
});

wss.on("connection", (ws) => {
  console.log(`➕➕ Connection (${wss.clients.size})`);
  ws.once("close", () => {
    console.log(`➖➖ Connection (${wss.clients.size})`);
  });
});
console.log("✅ WebSocket Server listening on ws://localhost:3001");

process.on("SIGTERM", () => {
  console.log("SIGTERM");
  handler.broadcastReconnectNotification();
  wss.close();
});

[Siumauricio]

Same issue idk if is related to nextjs

void app.prepare().then(() => {
  const server = http.createServer((req, res) => {
    const parsedUrl = parse(req.url!, true);
    handle(req, res, parsedUrl);
  });

  const wss = new ws.Server({ port: 3001 });
  // @ts-ignore
  const handler = applyWSSHandler({
    wss,
    router: appRouter,
    createContext: async (opts) => {
      const { req, res } = opts;
   //error
      const session = await getServerSession(req, res); 
     
    },
  });

but if i remove the context is working, but the thing is i cannot use privateProcedures because the sessions is not passing on subscriptions, only on queries and mutations

  const wss = new ws.Server({ port: 3001 });
// @ts-ignore
const handler = applyWSSHandler({
  wss,
  router: appRouter,
 
});

[Roopaish]

Did you fix it? @Siumauricio. Can you pass the context?
I keep on getting this if i use getServerSession()

> cross-env PORT=3001 tsx watch src/server/ws-dev-server.ts --tsconfig tsconfig.server.json

file:///home/ryzen/Documents/personal/evento/src/server/auth.ts:1
var __defProp=Object.defineProperty;var __name=(target,value)=>__defProp(target,"name",{value,configurable:true});import{PrismaAdapter}from"@next-auth/prisma-adapter";import{db}from"~/server/db";import{getServerSession}from"next-auth";import EmailProvider from"next-auth/providers/email";import GoogleProvider from"next-auth/providers/google";import{env}from"~/env";import{sendVerificationRequest}from"./email";const authOptions={callbacks:{session:({session,user})=>{return{...session,user:{...session.user,...user}}},async signIn({}){return true}},adapter:PrismaAdapter(db),providers:[GoogleProvider({clientId:env.GOOGLE_CLIENT_ID,clientSecret:env.GOOGLE_CLIENT_SECRET}),EmailProvider({server:{host:env.EMAIL_SERVER_HOST,port:env.EMAIL_SERVER_PORT,auth:{user:env.EMAIL_SERVER_USER,pass:env.EMAIL_SERVER_PASSWORD}},from:env.EMAIL_FROM,async sendVerificationRequest({identifier,url}){await sendVerificationRequest({identifier,url})}})]};const getServerAuthSession=__name(()=>getServerSession(authOptions),"getServerAuthSession");export{authOptions,getServerAuthSession};
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ^

TypeError: GoogleProvider is not a function
    at file:///home/ryzen/Documents/personal/evento/src/server/auth.ts:1:588
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async loadESM (node:internal/process/esm_loader:28:7)
    at async handleMainPromise (node:internal/modules/run_main:120:12)

Node.js v21.6.2

[Siumauricio]

hey @Roopaish at the end i decided to switch to lucia-auth since is more simple and accomplish my needs, but this was the code i have which is working, what i done is in the trpc expect a authentication object, so instead to use getServerSession(), use getSession(), and you will have the session there, and this will be allow to pass to trpc context and also will allow to make suscriptions if it's protected or public

Hope it helps!

/**
 * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
 * 1. You want to modify request context (see Part 1).
 * 2. You want to create a new middleware or type of procedure (see Part 3).
 *
 * TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will
 * need to use are documented accordingly near the end.
 */

import { getServerAuthSession } from "@/server/auth";
import { db } from "@/server/db";
import { TRPCError, initTRPC } from "@trpc/server";
import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import type { Session } from "next-auth";
import superjson from "superjson";
import { ZodError } from "zod";

/**
 * 1. CONTEXT
 *
 * This section defines the "contexts" that are available in the backend API.
 *
 * These allow you to access things when processing a request, like the database, the session, etc.
 */

interface CreateContextOptions {
  session: Session | null;
}

/**
 * This helper generates the "internals" for a tRPC context. If you need to use it, you can export
 * it from here.
 *
 * Examples of things you may need it for:
 * - testing, so we don't have to mock Next.js' req/res
 * - tRPC's `createSSGHelpers`, where we don't have req/res
 *
 * @see https://create.t3.gg/en/usage/trpc#-serverapitrpcts
 */
const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    db,
  };
};

/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see https://trpc.io/docs/context
 */
export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  const { req, res } = opts;

  // Get the session from the server using the getServerSession wrapper function
  const session = await getServerAuthSession({ req, res });

  return createInnerTRPCContext({
    session,
  });
};

/**
 * 2. INITIALIZATION
 *
 * This is where the tRPC API is initialized, connecting the context and transformer. We also parse
 * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
 * errors on the backend.
 */

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,
      },
    };
  },
});

/**
 * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
 *
 * These are the pieces you use to build your tRPC API. You should import these a lot in the
 * "/src/server/api/routers" directory.
 */

/**
 * This is how you create new routers and sub-routers in your tRPC API.
 *
 * @see https://trpc.io/docs/router
 */
export const createTRPCRouter = t.router;

/**
 * Public (unauthenticated) procedure
 *
 * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
 * guarantee that a user querying is authorized, but you can still access user session data if they
 * are logged in.
 */
export const publicProcedure = t.procedure;

/**
 * Protected (authenticated) procedure
 *
 * If you want a query or mutation to ONLY be accessible to logged in users, use this. It verifies
 * the session is valid and guarantees `ctx.session.user` is not null.
 *
 * @see https://trpc.io/docs/procedures
 */
export const protectedProcedure = t.procedure.use(({ 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 },
    },
  });
});

and this was the ws-server

import { applyWSSHandler } from "@trpc/server/adapters/ws";
import { getSession } from "next-auth/react";
import ws from "ws";
import { appRouter } from "./server/api/root";

const dev = process.env.NODE_ENV !== "production";
const port = 3001;

const wss = new ws.Server({ port });
const handler = applyWSSHandler({
  wss,
  router: appRouter,
  // @ts-ignore
  createContext: async ({ req, res }) => {
    let session = null;


    try {
      session = await getSession({ req });
    } catch (e) {
      console.log(e);
    }

    return { req, res, session };
  },
});

wss.on("connection", (ws) => {
  console.log(`➕➕ Connection (${wss.clients.size})`);
  ws.once("close", () => {
    console.log(`➖➖ Connection (${wss.clients.size})`);
  });
});

wss.on("error", (error) => {
  console.log(error);
});

console.log("✅ WebSocket Server listening on ws://localhost:3001");

process.on("SIGTERM", () => {
  console.log("SIGTERM");
  handler.broadcastReconnectNotification();
  wss.close();
  process.exit(0);
});

[Roopaish]

Thank you for this. I did the same exact thing and its working with next-auth. Though I had to make this strange change as web socket server was treating GoogleProvider and EmailProvider as not a function.

const providers = []

if (typeof GoogleProvider === "function") {
  providers.push(
    GoogleProvider({
      ...    })
  )
}

if (typeof EmailProvider === "function") {
  providers.push(
    EmailProvider({
     ...}
  )
}

export const authOptions: NextAuthOptions = {
  ....
  providers,
}

Code is here if anyone wants to look at: https://github.com/Roopaish/evento.
And also don't export thing from wss-dev-server.ts. Cause if you use them, next js server will try to use that port to create new WebSocketServer.
And again thank you @Siumauricio