Initial websockets getToken() returns null: next-auth + websockets :)

Hello! So the way I am trying to authenticate websockets is like this: 
import { getToken } from "next-auth/jwt";

type Incoming = IncomingMessage & {
  cookies: Partial<{ [key: string]: string }>;
};

export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
) => {
  const { req } = opts;
  const token = await getToken({ req: req as Incoming });

  if (token) {
    return { session: { user: token } };
  }

  return { session: null };
};
import { getToken } from "next-auth/jwt";

type Incoming = IncomingMessage & {
  cookies: Partial<{ [key: string]: string }>;
};

export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
) => {
  const { req } = opts;
  const token = await getToken({ req: req as Incoming });

  if (token) {
    return { session: { user: token } };
  }

  return { session: null };
};
And it works except for the initial requests. I wouldn't mind this (maybe I would since needless errors), but my problem is trying to use subscriptions: it just will prompt an error on the initial request and I can't think of a way to retry (retrying works for everything else). I would like to solve this initial null JWT token request problem as that would make everything work very nicely but I wouldn't mind making the subscriptions work either. The way I am subscribing in my react component: 
api.messages.whoIsTyping.useSubscription(
    {
      slug,
    },
    {
      onData(data) {
        setCurrentlyTyping(data);
      },
      onError(err) {
        console.error("Subscription error:", err);
      },
    }
  );
api.messages.whoIsTyping.useSubscription(
    {
      slug,
    },
    {
      onData(data) {
        setCurrentlyTyping(data);
      },
      onError(err) {
        console.error("Subscription error:", err);
      },
    }
  );
I would really appreciate some commentary/insight! Thank you for your time.
Y
youwontstopme:)•331d ago
I also tried with handling auth with const session = await getServerSession(req as any, res as any, authOptions); however I run into the following error: res.getHeader is not a function Eventually I came with this which doesn't resolve anything as the token comes up null: 
export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
  // eslint-disable-next-line @typescript-eslint/require-await
) => {
  const { req, res } = opts;
  if (typeof (res as any).getHeaders !== "function") {
    const token = await getToken({
      req: req as any,
      secret: process.env.NEXTAUTH_SECRET,
    });

    if (token) {
      // console.log("Got JWT token:", token);
      return { session: { user: token } };
    }

    console.log("null token");
    return { session: null };
  }

  const session = await getServerSession(req as any, res as any, authOptions);

  if (session) {
    return { session };
  }
  console.log("null session");
  return { session: null };
};
export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
  // eslint-disable-next-line @typescript-eslint/require-await
) => {
  const { req, res } = opts;
  if (typeof (res as any).getHeaders !== "function") {
    const token = await getToken({
      req: req as any,
      secret: process.env.NEXTAUTH_SECRET,
    });

    if (token) {
      // console.log("Got JWT token:", token);
      return { session: { user: token } };
    }

    console.log("null token");
    return { session: null };
  }

  const session = await getServerSession(req as any, res as any, authOptions);

  if (session) {
    return { session };
  }
  console.log("null session");
  return { session: null };
};
I got it working! I still get null sessions but now I do eventually get the session needed for a subscription to be possible! Working code is the following: 
export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
  // eslint-disable-next-line @typescript-eslint/require-await
) => {
  const { req, res } = opts;
  if (typeof (res as any).getHeaders !== "function") {
    const token = await getToken({
      req: req as any,
      secret: process.env.NEXTAUTH_SECRET,
    });

    if (token) {
      // console.log("Got JWT token:", token);
      return { session: { user: token } };
    }

    console.log("null token");

    const session = await getSession(opts);

    if (session) {
      return { session };
    }

    console.log("null getSession");

    return { session: null };
  }

  const session = await getServerSession(req as any, res as any, authOptions);

  if (session) {
    return { session };
  }
  console.log("null session");
  return { session: null };
};
export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
  // eslint-disable-next-line @typescript-eslint/require-await
) => {
  const { req, res } = opts;
  if (typeof (res as any).getHeaders !== "function") {
    const token = await getToken({
      req: req as any,
      secret: process.env.NEXTAUTH_SECRET,
    });

    if (token) {
      // console.log("Got JWT token:", token);
      return { session: { user: token } };
    }

    console.log("null token");

    const session = await getSession(opts);

    if (session) {
      return { session };
    }

    console.log("null getSession");

    return { session: null };
  }

  const session = await getServerSession(req as any, res as any, authOptions);

  if (session) {
    return { session };
  }
  console.log("null session");
  return { session: null };
};
More Posts
Can I get the original type name, instead of the shape, with query?I'm not sure how to explain it, so, here's a screen shot:TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON ErrorHello folks, I'm getting an issue with my integration, I'm a newbie in tRPC and I can't work well mytrpc corsmy sveltekit app is running on https://example.com with tRPC and it's making requests to http://127.T3 app tRPC external callsCurrently i'm just making Post request and formatting my payload to ```{ "0": { "json":Next-auth session not being fetched in tRPC contextNext-auth session not being fetched in tRPC contextuseMutation not handeling arguments correctly.Hello, I have a mutation setup on the server with the input being an object containing the fields emUpdate Clerk Organization from TRPC Router (T3 Stack)Hello, if anyone got an idea on how to handle this I would highly appreciate it. I have some organiHow to not send request in specific condition in useQuery()```js const { data: artists, isLoading } = api.findArtist.useQuery({ name: search, }); ``` TRPCClientError: fetch failedI get the below error when createTRPCProxyClient runs on BE of a Next.JS app hosted on Vercel: ```TinferRouterOutputs not inferringCould anyone point me in the right direction to why my types aren't being inferred here? (Using T3 b