optimistic-gold

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' }) 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), thus loading directly authenticated pages leads to making unauthorised requests. Has anyone else noticed such a delay from the getToken call? I hope that I'm doing something wrong and this is not the expected behaviour.

19 Replies

conscious-sapphire•5mo ago

cc @wobsoriano @ballingt

exotic-emerald•5mo ago

Experiencing the same here

optimistic-goldOP•5mo ago

There is also an open question at the moment on the Clerk's Discord server with no solution yet: https://discord.com/channels/856971667393609759/1388612634898862090

quickest-silver•5mo ago

Hey just getting to this late, let's see; how many network calls is this? @YFCBanana Happen to know if getAuth(getWebRequest()) is a network call? There's a new way of integrating Clerk that doesn't require the template: "convex" which I haven't documented yet, but it's using Clerk's default JWT instead: https://docs.convex.dev/auth/advanced/custom-jwt which might be faster to get, since it might already be there? This also works seamlessly with their unclaimed setup

optimistic-goldOP•5mo ago

Hey @ballingt . So here are the network requests when I use the "convex template" setup

optimistic-goldOP•5mo ago

optimistic-goldOP•5mo ago

And here are the network requests if I comment out the auth.getToken({ template: 'convex' })

optimistic-goldOP•5mo ago

The page I'm loading makes two requests to Convext to load data I tried yesterday setting up Clerk with the custom-jwt, but the first request I was doing with Convex was really slow, like 6 seconds, and after that, all the requests were really fast. I'm trying it again today, but I'm not seeing any delay so far; everything loads really fast. I leave it with the custom-jwt setup for now and see how it goes. Thanks a lot for the help, by the way!

harsh-harlequin•5mo ago

Confirming here that the custom jwt template instead of the convex template in Clerk is much smoother @YFCBanana I didn't experienced any initial delay by the way

variable-lime•4mo ago

Hi, is there an example code?

harsh-harlequin•4mo ago

I switched back to the convex jwt since I had some problems and it seems that that integration was getting too much complex between clerk, tanstack start and convex

variable-lime•4mo ago

Where did you struggle? It's working fine for me

harsh-harlequin•4mo ago

Honestly I do not remember exactly since I moved now to another project and cannot reproduce the issue quickly right now. Did you manage to get it working fine and have an example code? Maybe I could re-try

variable-lime•4mo ago

I will share with you later what I have. I didn't use convex auth because the docs say it's not for TanStack start. I tried better auth, but it was too much for me.

variable-lime•4mo ago

https://gist.github.com/NabilFr/9300e7d81f3b8c058ccfbc3d0038dd87

Gist

__root.tsx

GitHub Gist: instantly share code, notes, and snippets.

variable-lime•4mo ago

https://wool-postage-2f0.notion.site/Handling-Clerk-Convex-with-Roles-24720a4526ec80f98f83da543088ccac

wool-postage-2f0 on Notion

Handling Clerk & Convex with Roles | Notion

1. Create Schema file

variable-lime•4mo ago

great value from someone in tanstack discord

harsh-harlequin•4mo ago

Thanks for sharing, I will give it a try!

Gaming

Programming

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

Did you find this page helpful?