Clerk's getToken({template: "convex"}) add significant delay to page load

Hello. I'm trying to use Convex in an app built with TanStack Start + Clerk.
I followed the documentation and examples, and everything seems to work, but now navigating to pages takes too long.
After debugging a bit, I found out that the delay on page loading is being introduced by the call to get the token from Clerk.
I'm talking about the

const token = await auth.getToken({ template: 'convex' })

const token = await auth.getToken({ template: 'convex' })

in the following code:

const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const auth = await getAuth(getWebRequest())
  const token = await auth.getToken({ template: 'convex' })

  return {
    userId: auth.userId,
    token,
  }
})

const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const auth = await getAuth(getWebRequest())
  const token = await auth.getToken({ template: 'convex' })

  return {
    userId: auth.userId,
    token,
  }
})

When I remove this line, navigating through pages becomes instant again, but of course, now I lose the ability to set the token on the

ctx.context.convexQueryClient.serverHttpClient?.setAuth(token)

ctx.context.convexQueryClient.serverHttpClient?.setAuth(token)

, thus loading directly authenticated pages leads to making unauthorised requests.
Has anyone else noticed such a delay from the

getToken

getToken

call? I hope that I'm doing something wrong and this is not the expected behaviour.

TanStack•8mo ago•

25 replies

popular-magenta

Clerk's getToken({template: "convex"}) add significant delay to page load

const token = await auth.getToken({ template: 'convex' })

const token = await auth.getToken({ template: 'convex' })

in the following code:

const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const auth = await getAuth(getWebRequest())
  const token = await auth.getToken({ template: 'convex' })

  return {
    userId: auth.userId,
    token,
  }
})

const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const auth = await getAuth(getWebRequest())
  const token = await auth.getToken({ template: 'convex' })

  return {
    userId: auth.userId,
    token,
  }
})

When I remove this line, navigating through pages becomes instant again, but of course, now I lose the ability to set the token on the

ctx.context.convexQueryClient.serverHttpClient?.setAuth(token)

ctx.context.convexQueryClient.serverHttpClient?.setAuth(token)

, thus loading directly authenticated pages leads to making unauthorised requests.
Has anyone else noticed such a delay from the

getToken

getToken

call? I hope that I'm doing something wrong and this is not the expected behaviour.

Clerk's getToken({template: "convex"}) add significant delay to page load

Similar Threads

Clerk's getToken({template: "convex"}) add significant delay to page load

Similar Threads

Similar Threads

Similar Threads