convex auth + tanstack query, auth context bug

// 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/ProtectedContainer.tsx
import { Authenticated, Unauthenticated } from "convex/react"

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

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"