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

Crayon-ShinChan · 2024-02-20T01:59:52Z

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

CleanShot.2024-02-19.at.17.54.35.mp4

You can check the detail of my code in this commit: Crayon-ShinChan/t3-trpc-suspense-bug@b747bba

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

The text was updated successfully, but these errors were encountered:

juliusmarminge · 2024-02-20T13:48:27Z

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 · 2024-05-09T21:48:04Z

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

Crayon-ShinChan · 2024-05-12T00:11:39Z

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

I use isPending to determine the UI

22JH · 2024-05-22T04:52:29Z

Are you solved this problem?

Crayon-ShinChan · 2024-05-22T04:54:14Z

Are you solved this problem?

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

sbkl · 2024-05-31T02:41:21Z

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

Crayon-ShinChan added the 🐞❔ unconfirmed bug label Feb 20, 2024

juliusmarminge added 🐞 upstream bug Blocked by a bug upstream and removed 🐞❔ unconfirmed bug labels Feb 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Crayon-ShinChan commented Feb 20, 2024 •

edited

juliusmarminge commented Feb 20, 2024 •

edited

mattiaseyram commented May 9, 2024

Crayon-ShinChan commented May 12, 2024

22JH commented May 22, 2024

Crayon-ShinChan commented May 22, 2024 •

edited

sbkl commented May 31, 2024

bug: useSuspenseQuery will get "UNAUTHORIZED" tRPC error #1765

bug: useSuspenseQuery will get "UNAUTHORIZED" tRPC error #1765

Comments

Crayon-ShinChan commented Feb 20, 2024 • edited

Provide environment information

Describe the bug

Reproduction repo

To reproduce

Additional information

juliusmarminge commented Feb 20, 2024 • edited

mattiaseyram commented May 9, 2024

Crayon-ShinChan commented May 12, 2024

22JH commented May 22, 2024

Crayon-ShinChan commented May 22, 2024 • edited

sbkl commented May 31, 2024

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

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

Crayon-ShinChan commented Feb 20, 2024 •

edited

juliusmarminge commented Feb 20, 2024 •

edited

Crayon-ShinChan commented May 22, 2024 •

edited