nvegater Posts - Answer Overflow

nvegater

•Created by nvegater on 11/5/2023 in #questions

Session exists in server component, not in trpc context.

Inside of a server component I call:

  const session = await getServerAuthSession();
  console.log("Check session from Server component: ", session);

This prints when im Logged in:

Check session from Server component:  {
  user: {
    name: null,
    email: '[email protected]',
    image: null,
    id: 'userIdBlahBlah'
  }
}

Chill all good. Now I want to call a TRPC protected procedure after that session check:

  const session = await getServerAuthSession();
  const verificationResult = await api.user.verifyLoggedInUser.mutate();

.... and I get an UNAUTHORIZED Error. ....as it should for protected procedures....weird because I just logged the session and its valid....then I check the handler creation:


const handler = (req: NextRequest) => {
  console.log("Check session from trpc middleware: ", req);

  return fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(

❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}

,
            );
          }
        : undefined,
  });
};

export { handler as GET, handler as POST };

The cookies of next-auth are there no problem. But the middleware thinks the server Auth Session is null:

export const createInnerTRPCContext = async (opts: CreateContextOptions) => {
  const session = await getServerAuthSession();

  console.log("Check session from trpc middleware creation: ", session);

  return {
    session,
    headers: opts.headers,
    db,
  };
};

Session is null!! I think this is a bug, because if I call getServerAuthSession in the component and I get a session, but I dont get the same result in the trpc handler, is incosistent. Or am I missing something ? Thanks in advance! (I am using the experimental appdir with drizzle).

5 replies

TTCTheo's Typesafe Cult

•Created by nvegater on 10/12/2023 in #questions

How to invalidate trpc queries in Next13

The code speaks for itself. I want to invalidate a trpc query in a server action but I get a super weird error. (I know I can do it with state and client component). Is there a way to do that in the server action ? Error: Unhandled Runtime Error Error: invalid json response body at http://localhost:3000/api/trpc/user.myName,post.getLatest?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%2C%221%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D reason: Unexpected token I in JSON at position 0

import { api } from "~/trpc/server";
import { createPost } from "~/utils/actions";
import { Button } from "~/components/ui/Button";
import { revalidatePath } from "next/cache";

export async function CrudShowcase() {
  const latestPost = await api.post.getLatest.query();

  async function create(formData: FormData) {
    "use server";
    await createPost(formData);
    revalidatePath("/");
  }

  return (
    <div className="w-full max-w-xs">
      {latestPost ? (
        <p className="truncate">Your most recent post: {latestPost.text}</p>
      ) : (
        <p>You have no posts yet.</p>
      )}

      <form action={create} className="flex flex-col gap-2">
        <input
          type="text"
          name="text"
          placeholder="Title"
          className="w-full rounded bg-primary p-2 text-background"
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

import { api } from "~/trpc/server";
import { createPost } from "~/utils/actions";
import { Button } from "~/components/ui/Button";
import { revalidatePath } from "next/cache";

export async function CrudShowcase() {
  const latestPost = await api.post.getLatest.query();

  async function create(formData: FormData) {
    "use server";
    await createPost(formData);
    revalidatePath("/");
  }

  return (
    <div className="w-full max-w-xs">
      {latestPost ? (
        <p className="truncate">Your most recent post: {latestPost.text}</p>
      ) : (
        <p>You have no posts yet.</p>
      )}

      <form action={create} className="flex flex-col gap-2">
        <input
          type="text"
          name="text"
          placeholder="Title"
          className="w-full rounded bg-primary p-2 text-background"
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

10 replies

TTCTheo's Typesafe Cult

•Created by nvegater on 9/8/2023 in #questions

Use Enum Values from backend in the Frontend

I'm using this enum in my backend:

 
export const VideoYouthProtectionEnum = {
    Zero: 'zero',
    Six: 'six',
    Twelve: 'twelve',
    Sixteen: 'sixteen',
    Eighteen: 'eighteen',
    NotSet: 'notSet'
} as const;

 
export const VideoYouthProtectionEnum = {
    Zero: 'zero',
    Six: 'six',
    Twelve: 'twelve',
    Sixteen: 'sixteen',
    Eighteen: 'eighteen',
    NotSet: 'notSet'
} as const;

I understand I can infer the types of enums with trpc and use those types in the Frontend like this: type YouthProtection = RouterInputs['api']['update']['payload']['youthProtection']. I would like to understand if there is a way to use the inferred enum as a Value in the frontend, something like this: YouthProtection.Zero

3 replies

TTCTheo's Typesafe Cult

•Created by nvegater on 2/9/2023 in #questions

Authentication in Websockets

In the server side, how do you make sure the client is authenticated, given that Authorisation headers are not allowed in the ws protocol (not even in the first http handshake). Analogue to that, in the client side, how do you authenticate with JWT Tokens ? Do you send the token on every web socket message ?

13 replies

Gaming

Programming