rf•3w ago

convex auth + tanstack query, auth context bug

I'm running into some kind of race condition (maybe related to query hashing?) when combining Convex Auth components with Tanstack Query. The symptom: queries are initially made from client->server without the full auth context, resulting in brief server-side errors The minimum reproduction:

// convex/userInfo.ts
import { query } from "@/convex/_generated/server"
import { getAuthUserId } from "@convex-dev/auth/user"

export const getUserInfo = query({
  handler: async (ctx) => {
    const userId = getAuthUserId(ctx)
    if (!userId) {
      throw new Error("user not authenticated")
    }
    console.log("found the user!")
    // ... return user
  }
})

// convex/userInfo.ts
import { query } from "@/convex/_generated/server"
import { getAuthUserId } from "@convex-dev/auth/user"

export const getUserInfo = query({
  handler: async (ctx) => {
    const userId = getAuthUserId(ctx)
    if (!userId) {
      throw new Error("user not authenticated")
    }
    console.log("found the user!")
    // ... return user
  }
})

// src/MyProtectedComponent.tsx
import { convexQuery } from "@convex-dev/react-query";
import { useQuery as useTanstackQuery } from "@tanstack/react-query";
import { api } from "@/convex/_generated/api"

export function MyProtectedComponent() {
  const user = useTanstackQuery(convexQuery(api.userInfo.getUserInfo, {}))
  return <div>{user.data}</div>
}

// src/MyProtectedComponent.tsx
import { convexQuery } from "@convex-dev/react-query";
import { useQuery as useTanstackQuery } from "@tanstack/react-query";
import { api } from "@/convex/_generated/api"

export function MyProtectedComponent() {
  const user = useTanstackQuery(convexQuery(api.userInfo.getUserInfo, {}))
  return <div>{user.data}</div>
}

// src/ProtectedContainer.tsx
import { Authenticated, Unauthenticated } from "convex/react"

export function ProtectedContainer() {
  return (
    <>
      <Authenticated><MyProtectedComponent /></Authenticated>
      <Unauthenticated>not allowed!</Unauthenticated>
    </>
  )
}

// src/ProtectedContainer.tsx
import { Authenticated, Unauthenticated } from "convex/react"

export function ProtectedContainer() {
  return (
    <>
      <Authenticated><MyProtectedComponent /></Authenticated>
      <Unauthenticated>not allowed!</Unauthenticated>
    </>
  )
}

here's what the logs look like when the ProtectedContainer component is mounted for the first time:

8/1/2025, 12:04:04 PM [CONVEX Q(path-to-file)] Uncaught Error: user not authenticated
8/1/2025, 12:04:04 PM [CONVEX Q(path-to-file)] [INFO] found the user!

8/1/2025, 12:04:04 PM [CONVEX Q(path-to-file)] Uncaught Error: user not authenticated
8/1/2025, 12:04:04 PM [CONVEX Q(path-to-file)] [INFO] found the user!

I'm aware I'm combining two beta features here -- raising this issue only because I didn't come across any record of it on discord/GH. My current "workaround" is to either not use Tanstack Query for auth-related queries, or suppress errors on the server.

"@auth/core": "^0.40.0",
"@convex-dev/auth": "^0.0.87",
"@tanstack/react-query": "^5.83.0",
"@tanstack/react-router": "^1.130.8"

"@auth/core": "^0.40.0",
"@convex-dev/auth": "^0.0.87",
"@tanstack/react-query": "^5.83.0",
"@tanstack/react-router": "^1.130.8"

5 Replies

Convex Bot•3w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

rfOP•3w ago

to clarify: I don't see this ctx bug when using the standard useQuery from convex/react 🙂

ballingt•3w ago

Hi @rf, thanks for reporting. Looks related to https://github.com/get-convex/convex-react-query/issues/19 but that doesn't capture this race, interesting

GitHub

Prevent a flash after hydration when using auth in SSR · Issue #19...

I don't know if there is a flash when using auth with SSR (it's not supported yet, see #18) but if there is: Say you've got a JWT on the server during SSR: you either spent the network ...

ballingt•3w ago

I'm surprised because you've wrapped <MyProtectedComponent /> in <Authenticated>

ballingt•3w ago

@rf The next time you have it handy, could you share the WebSocket connection messages so we can see the sequence of the calls sent? That would help us narrow down between a server-side issue and a client-side issue: if the Authenticate message is sent first, then the ModifyQuerySet, then the client is doing everything right.

convex auth + tanstack query, auth context bug

Did you find this page helpful?