Convex + Tanstack Start + Clerk
Hi! I'm trying to add authentication using Clerk to the Trellaux example from the Tanstack-Start site (https://tanstack.com/router/latest/docs/framework/react/examples/start-convex-trellaux). However, the guides from the Convex/Clerk site do not work.
ConvexProviderWithClerk seems not supported on Start, so in Convex functions I am not able to get the user identity with ctx.auth.getUserIdentity().
Is there any way to make it work? Thanks
ps: I love Convex, nice work 🫶React TanStack Router Start Convex Trellaux). Example | TanStack Ro...
An example showing how to implement Start Convex Trellaux). in React using TanStack Router.
14 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
I’m running into the same issue. Were you able to find a way around it?
No solutions right now 😩
1. Move to regular tanstack-router (not start) with convex + clerk 2. Do not use Convex with Clerk: I moved to drizzle + turso + clerk, as clerk is a requirement for me right now
1. Move to regular tanstack-router (not start) with convex + clerk 2. Do not use Convex with Clerk: I moved to drizzle + turso + clerk, as clerk is a requirement for me right now
Thank for getting back to me! Yeah I'll likely have to change stacks as well.
I was able to get the userId from clerk in server function and then changed my query to use a userId argument. But you loose the reactivity as it uses the convexhttpclient like the following:
const getUserUploadsFn = createServerFn({ method: 'GET' }).handler(async () => {
const { userId } = await getAuth(getWebRequest())
if (!userId) {
throw redirect({ to: '/' })
}
const convex = new ConvexHttpClient(process.env.VITE_CONVEX_URL!)
const uploads = await convex.query(api.uploads.listUserUploadsWithId, { userId })
return { uploads, userId }
})
export const Route = createFileRoute('/library')({
component: Library,
beforeLoad: () => getUserUploadsFn(),
loader: ({ context }) => {
return {
uploads: context.uploads,
userId: context.userId
}
},
})
export function Library() {
const { uploads } = Route.useLoaderData()
Aim is to have support for Convex + Clerk out soon, we've been working with the Clerk team on the "update before hydration finished" errors.
@ballingt any news on that? Looking forward for a sample project that works using Tanstack start + Clerk + Convex... Thanks
Latest: https://discord.com/channels/1019350475847499849/1280662608143450112/1316454186627366992
nope actually this is latest: https://discord.com/channels/1019350475847499849/1280662505420623993/1322380531232673792
npm create convex@latest now puts you next 15 w/ clerk 6 (if you choose next and clerk)
@Alan Rubin are you using Clerk with TanStack? I have a few versions of this prototype of adding Convex, haven't landed on the suggested way to use it yet.
I tried to use it but got errors when configuring Clerk + Convex + TanStack start. After a couple of hours effort, I ended up using Next.js + Clerk + Convex (based on the generated code by Convex create). It is a shame, I don't like the complexity of Next.js I was hoping to use TanStack Start instead. Surprisingly there seems to be no working sample app using it with Convex and Clerk. Especially since you guys and Clerk are sponsoring TanStack start.
There is one now! Try
npm create convex@latest -- -t tanstack-start-clerk, docs for this coming today.GitHub
templates/template-tanstack-start-clerk at main · get-convex/templa...
Contribute to get-convex/templates development by creating an account on GitHub.
Let me know how it goes if you get a chance to try it, I'm writing notes about it now. The are a few steps when you're adding it to an existing project instead of starting with the template.
npm create convex@latest now offers TanStack as an option with Clerk as the only auth option
It does require following the normal Clerk + Convex steps described at https://docs.convex.dev/auth/clerk for creating an app and a JWT template, then setting environment variables