Clerk & Convex Q: Third-Party Cookies Issues with Chrome's New Security Updates...

I'm encountering this issue within my inspect element:

Cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. In future Chrome versions, reading third-party cookies will be blocked. This behavior protects user data from cross-site tracking.

This is a result of my codebase requesting my currently signed-in user's tokenIdentifier from Clerk (an auth provider). Does anybody know how I am meant to refactor my codebase to work around this Chrome update? Cheers!

5 Replies

ballingt•6mo ago

Is that this? https://discord.com/channels/856971667393609759/1214738396455641168/1214738396455641168

Sam WhitmoreOP•6mo ago

Seems to be! That's great that it won't affect the production builds, but that doesn't take away from the headaches it's causing me within my Dev experience (especially as a new Svelte/Convex/Clerk developer!) Here's the real issue: I'm encountering this Console Error:

Uncaught (in promise) Error: [CONVEX Q(responses:getByUser)] [Request ID: 934f356b49df693f] Server Error

Uncaught Error: Unauthenticated fetch call.
    at handler (../src/convex/responses.ts:16:11)

Uncaught (in promise) Error: [CONVEX Q(responses:getByUser)] [Request ID: 934f356b49df693f] Server Error

Uncaught Error: Unauthenticated fetch call.
    at handler (../src/convex/responses.ts:16:11)

From this code:

// convex/responses.ts
export const getByUser = query({
  args: {},
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity()
    if (!identity) {
      throw new Error("Unauthenticated fetch call.");
    } else {
      const { tokenIdentifier } = identity;
      console.log(tokenIdentifier)
      const responses = await ctx.db.query("responses").filter((q) => q.eq(q.field("user_id"), tokenIdentifier)).collect();
      return responses.map((response) => ({ ...response }));
    }
  }
})

// convex/responses.ts
export const getByUser = query({
  args: {},
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity()
    if (!identity) {
      throw new Error("Unauthenticated fetch call.");
    } else {
      const { tokenIdentifier } = identity;
      console.log(tokenIdentifier)
      const responses = await ctx.db.query("responses").filter((q) => q.eq(q.field("user_id"), tokenIdentifier)).collect();
      return responses.map((response) => ({ ...response }));
    }
  }
})

--- To summarise: the line const identity = await ctx.auth.getUserIdentity() is failing to fetch the user's identity, and I believe this is because the third-party cookies are failing to reach Clerk

ballingt•6mo ago

How are you calling this getByUser query? Ideally you should not call it until after auth has been received by Convex to avoid this error; see https://docs.convex.dev/auth/clerk#logged-in-and-logged-out-views for more on this. You want to stick the hooks that call these queries (if using React) inside a <Authenticated> component to prevent them from rendering until the user is logged in.

Convex & Clerk | Convex Developer Hub

Clerk is an authentication platform providing login via

Sam WhitmoreOP•6mo ago

Yeah I have seen that but you've inspired me to give it another look! I'll reach back out in 30 or so if I find myself frustrated again 🙂 cheers Tom!

ballingt•6mo ago

This is a common issue if I'm understanding right, the issue is that the useQuery() runs before auth has been sent and the right thing to do in that case is indeed to throw an error

Clerk & Convex Q: Third-Party Cookies Issues with Chrome's New Security Updates...

Did you find this page helpful?