7 replies

convex auth + tanstack query, auth context bug

🪲Bug Report🔑Auth

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

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"

Convex Community•7mo ago•

7 replies

convex auth + tanstack query, auth context bug

🪲Bug Report🔑Auth

// 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

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!

"@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"

convex auth + tanstack query, auth context bug

Similar Threads

convex auth + tanstack query, auth context bug

Similar Threads

Similar Threads

Similar Threads