bug: `useSuspenseQuery` will get "UNAUTHORIZED" tRPC error

mengxi-ream commented 7 months ago

Provide environment information

System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Pro Memory: 196.13 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v20.9.0/bin/yarn npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm pnpm: 8.14.0 - ~/Library/pnpm/pnpm

Describe the bug

If we have a protected api like:

  hello: protectedProcedure
    .input(z.object({ text: z.string() }))
    .query(async ({ input }) => {
      // wait for 1 second
      await new Promise((resolve) => setTimeout(resolve, 1000));

      return {
        greeting: `Hello ${input.text}`,
      };
    }),

Then we use useSuspenseQuery

"use client";

import { api } from "@/trpc/react";
import { Suspense } from "react";

export default function TestSuspense() {
  return (
    <div>
      <h1>Test Suspense</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <SayHi />
      </Suspense>
    </div>
  );
}

function SayHi() {
  const [greet, getGreet] = api.post.hello.useSuspenseQuery({
    text: "Suspense user",
  });

  return <div>{greet.greeting}</div>;
}

We will get the error UNAUTHORIZED from

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

https://github.com/t3-oss/create-t3-app/assets/38809606/ee22bdae-d241-49cd-ac41-f002433b9d6e

You can check the detail of my code in this commit: https://github.com/Crayon-ShinChan/t3-trpc-suspense-bug/commit/b747bbac672c541a62925f35d2ddc9636cb1e316

Reproduction repo

https://github.com/Crayon-ShinChan/t3-trpc-suspense-bug

To reproduce

clone the repo
Go to Discord Portal to create an oauth app for this repo and copy paste the DISCORD_CLIENT_ID,DISCORD_CLIENT_SECRET to .env file
pnpm dev

Additional information

No response

juliusmarminge commented 7 months ago

Yup this is a limitation in Next since they don't provide any primitive to access headers from a client component during the SSR prepass phase, so queries made on the server wont be authed...

You can fix this by prefetching the data in an RSC and hydrating the query client or pass the initial data as props.

Unfortunately not much we can do here, there is a community package https://github.com/moshest/next-client-cookies that "hacks" around it although I've never tried it

mattiaseyram commented 4 months ago

Any update or ways around this? Would be great to use useSuspenseQuery

mengxi-ream commented 4 months ago

Any update or ways around this? Would be great to use useSuspenseQuery

I use isPending to determine the UI

22JH commented 3 months ago

Are you solved this problem?

mengxi-ream commented 3 months ago

Are you solved this problem?

I didn't use useSuspenseQuery and used isPending to determine if I need render skeleton instead

sbkl commented 3 months ago

Using this package phryneas/ssr-only-secrets seems to be working great to pass the cookie to the headers on the SSR piece

Add a new env variable:

// .env.local

SECRET_CLIENT_COOKIE_VAR={"key_ops":["encrypt","decrypt"],"ext":true,"kty":"oct","k":"asdas....","alg":"A256CBC"}

I used the code provided to create the key above:

crypto.subtle
  .generateKey(
    {
      name: "AES-CBC",
      length: 256,
    },
    true,
    ["encrypt", "decrypt"]
  )
  .then((key) => crypto.subtle.exportKey("jwk", key))
  .then(JSON.stringify)
  .then(console.log);

Then in the layout file, access the cookie, encrypt it and pass it to the TRPCReactProvider

// app/layout.tsx

import { headers } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";

export default async function Layout(props: {
  children: React.ReactNode;
}) {
    const cookie = new Headers(headers()).get("cookie");
    const encryptedCookie = await cloakSSROnlySecret(cookie ?? "", "SECRET_CLIENT_COOKIE_VAR")

    return <html>
        <Head/>
        <body>
            ...
            <TRPCReactProvider ssrOnlySecret={encryptedCookie}>            
              {props.children}
            </TRPCReactProvider>
        </body>
    </.html>
}

Then decrypt the value and pass it to the headers on the client side. Reading the value on the browser always returns undefined so you won't be able to see it there.

// trcp/react.ts

"use client";

import { readSSROnlySecret } from "ssr-only-secrets";

import type { AppRouter } from "@beebook/api";
import * as React from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import SuperJSON from "superjson";
import { getBaseUrl, getQueryClient } from "./utils";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: { ssrOnlySecret:  string, children: React.ReactNode }) {
  const queryClient = getQueryClient();
  const [trpcClient] = React.useState(() =>
    api.createClient({
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          transformer: SuperJSON,
          url: getBaseUrl() + "/api/trpc",
          async headers() {
            const headers = new Headers();
            const secret = props.ssrOnlySecret;
            const value = await readSSROnlySecret(secret,"SECRET_CLIENT_COOKIE_VAR")
            headers.set("x-trpc-source", "nextjs-react");
            if(value) {
              headers.set("cookie", value);
            }
            return headers;
          },
        }),
      ],
    }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

jchao01 commented 2 months ago

Using this package phryneas/ssr-only-secrets seems to be working great to pass the cookie to the headers on the SSR piece

Add a new env variable:

// .env.local

SECRET_CLIENT_COOKIE_VAR={"key_ops":["encrypt","decrypt"],"ext":true,"kty":"oct","k":"asdas....","alg":"A256CBC"}

I used the code provided to create the key above:

crypto.subtle
  .generateKey(
    {
      name: "AES-CBC",
      length: 256,
    },
    true,
    ["encrypt", "decrypt"]
  )
  .then((key) => crypto.subtle.exportKey("jwk", key))
  .then(JSON.stringify)
  .then(console.log);

Then in the layout file, access the cookie, encrypt it and pass it to the TRPCReactProvider

// app/layout.tsx

import { headers } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";

export default async function Layout(props: {
  children: React.ReactNode;
}) {
    const cookie = new Headers(headers()).get("cookie");
    const encryptedCookie = await cloakSSROnlySecret(cookie ?? "", "SECRET_CLIENT_COOKIE_VAR")

    return <html>
        <Head/>
        <body>
            ...
            <TRPCReactProvider ssrOnlySecret={encryptedCookie}>            
              {props.children}
            </TRPCReactProvider>
        </body>
    </.html>
}

Then decrypt the value and pass it to the headers on the client side. Reading the value on the browser always returns undefined so you won't be able to see it there.

// trcp/react.ts

"use client";

import { readSSROnlySecret } from "ssr-only-secrets";

import type { AppRouter } from "@beebook/api";
import * as React from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import SuperJSON from "superjson";
import { getBaseUrl, getQueryClient } from "./utils";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: { ssrOnlySecret:  string, children: React.ReactNode }) {
  const queryClient = getQueryClient();
  const [trpcClient] = React.useState(() =>
    api.createClient({
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          transformer: SuperJSON,
          url: getBaseUrl() + "/api/trpc",
          async headers() {
            const headers = new Headers();
            const secret = props.ssrOnlySecret;
            const value = await readSSROnlySecret(secret,"SECRET_CLIENT_COOKIE_VAR")
            headers.set("x-trpc-source", "nextjs-react");
            if(value) {
              headers.set("cookie", value);
            }
            return headers;
          },
        }),
      ],
    }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

you're a legend for this — thanks

Vulxan commented 1 month ago

I ended up using useQuery instead of useSuspenseQuery and setting throwOnError to true in the defaultOptions of QueryClient. It was too much work for me to prefetch every suspense query.

musjj commented 1 month ago

Is this issue tracked upstream somewhere (either tRPC or Next.js)? It's a critical issue, but this is basically the only thread I could find about it.

t3-oss / create-t3-app