tstepro
tstepro14mo ago

Nodejs convex client "setAuth" with clerk example

Hey there, do you guys have an example of using the Nodejs convex client in a react app and using it with clerk? I'm trying a different approach to calling convex queries (I wanted to use it without using hooks). I setup a convexClient and made my calls. The only problem was setting auth. I saw this https://docs.convex.dev/api/classes/browser.ConvexClient#setauth, but not sure how to set it with clerk. I'll be tinkering but if you guys have an example, please lmk.
5 Replies
ballingt
ballingt14mo ago
@tstepro heads up that you can use the React client without using hooks, in case that's relevant. The client object normally passed into the ConvexProvider component can be used standalone. Are you stil using React for Clerk? You'll need to get a Convex-formatted JWT from Clerk somehow and most of their examples use React.
tstepro
tsteproOP14mo ago
yeah I'm still using React for clerk. Oh, I didn't I could just grab it out of the ConvexProvider.
ballingt
ballingt14mo ago
The way setAuth works in both the Node.js-focused ConvexClient and the ConvexReactClient client is that setAuth() takes an async function which fetches this JWT
an async function returning the JWT-encoded OpenID Connect Identity Token
If you're still using React you could use the example Providers
<ClerkProvider publishableKey="pk_test_...">
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<App />
<ClerkProvider publishableKey="pk_test_...">
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<App />
but use the useConvex() hook to grab the convex client, or just save a global reference to the client that way you don't need to write the logic to wait for Clerk to be authed and wait for Convex to acknowledge receiving the auth If you're using subscriptions without hooks you'll need to write your own unsubscribe logic (since normally unsubscribe happens on unmount with hooks like useQuery()) but otherwise using the methods directly on the client should be straightforward It's quite reasonable to use Convex without the React hooks, but I'd love to hear what your motivation is in case there's something we could do to improve the React bindings.
tstepro
tsteproOP14mo ago
Thanks Tom! I'll give this a shot 🙏 My motivation was to use something like Zustand & convex I like to try and separate my frontend (components), state (zustand) and clients (convex). I was playing around with bundling up convex & zustand. It might not be the best pattern but it was something I was experimenting with
ballingt
ballingt14mo ago
Would love to hear how it goes, this shouldn't be too much code to hook up. If you want an example check out https://github.com/get-convex/convex-js/blob/main/src/react/client.ts#L497, you probably don't need the batching though if you're not using React 17. it would useful to use the Convex client transition API so that you're updating all queries together

Did you find this page helpful?