patochem•14mo ago

How do I get a jwtToken from outside React

My Nextjs app is configured with convex using Clerk as an Auth provider, exactly as described in the Documentation. Everything works perfect client side, inside the React scope. However, I'd like to use a state manager outside the React scope to manage all interactions with the convex database. From the documentation, I guess I can do that with a ConvexClient. But then, how can I retrieve a valid jwt to authenticate those calls?

18 Replies

ballingt•14mo ago

What auth provider are you using? Auth providers like clerk similarly use providers to pass data down the tree. It sounds like in your external state manager (let's say Redux) you'd set state for whether the client has been authed yet. You need to recreate some of the logic happening in the Convex auth provider: waiting until auth has been received by the Convex deployment and recording that. @patochem also which state management library are you using? We might have an example, but there's no official Redux integration yet. Convex is generally a good fit here though; it makes transactional updates to new logical timestamps which is a great fit for Redux; all active queries update at the same time. Because Redux is more work to get started with we modeled the builtin React client hooks off of React query instead.

patochemOP•14mo ago

Auth Provider: I'm using Clerk, through a Provider, as you say. This is the code:

import { ClerkProvider, useAuth } from '@clerk/clerk-react';
import { ConvexReactClient } from 'convex/react';
import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { ReactNode } from 'react';

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export const ConvexClientProvider = ({ children }: { children: ReactNode }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

import { ClerkProvider, useAuth } from '@clerk/clerk-react';
import { ConvexReactClient } from 'convex/react';
import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { ReactNode } from 'react';

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export const ConvexClientProvider = ({ children }: { children: ReactNode }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

patochemOP•14mo ago

As for the state management, I am not sure yet. I was considering zustand (https://github.com/pmndrs/zustand)
But if you have an example with another one, I'm interested in checking it out!

GitHub

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in...

🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.

patochemOP•14mo ago

Any update on this one, please?

Michal Srb•14mo ago

Hey @patochem, check out the implementation of the ConvexProviderWithClerk and the components it uses: https://github.com/get-convex/convex-js/blob/main/src/react-clerk/ConvexProviderWithClerk.tsx https://github.com/get-convex/convex-js/blob/main/src/react/ConvexAuthState.tsx There's a lot of complexity in there to make sure we refresh the token before it expires. You might duplicate that in your setup.

GitHub

convex-js/src/react-clerk/ConvexProviderWithClerk.tsx at main · get...

TypeScript/JavaScript client library for Convex. Contribute to get-convex/convex-js development by creating an account on GitHub.

GitHub

convex-js/src/react/ConvexAuthState.tsx at main · get-convex/convex...

TypeScript/JavaScript client library for Convex. Contribute to get-convex/convex-js development by creating an account on GitHub.

patochemOP•14mo ago

ok. I'll check it out. Thanks a lot Also, @ballingt Mentioned that you might have an example on how to combine Convex and Redux. That would be of great help too!

ballingt•14mo ago

@patochem looking around I don't see one Would love to hear more about your use case for Redux instead of the server-side state management approach, I can imagine a few different potential reasons but curious what yours is

patochemOP•14mo ago

I'm still prototyping so I'm not sure it's the best way... As soon as I take a decision, I'll let you know. As a side note and as a long time user of Firestore, I know how quick you can reach the monthly limits for functions call and/or bandwidth when you work with large databases. That said, Convex prices look way cheaper than firestore and this shouldn't be an issue -------------------------------------- For example, in my current project, I have a 'modules' table of hundreds of rows. Each 'module' can be made of another module or raw material. So I need another table called "requirements" that maps each module with its components. So each time I want to display a list of modules with all the raw materials involved in its construction, I have to recursively call on those 2 tables until I parse the whole tree of components. If I rely exclusively on cloud functions, this computational and bandwidth cost could escalate pretty fast, because of the recursive nature of app So my guess is that I should find some kind of "caching" mechanism for that.

jamwt•14mo ago

@patochem convex automatically caches the response(s) so won't use any db bandwidth at least if underlying rows haven't changed

patochemOP•14mo ago

https://tenor.com/wmh5.gif

Tenor

patochemOP•14mo ago

That's absolutely awesome since those rows will never change!

ballingt•14mo ago

@patochem I would write Convex functions for these, coordinating all this from the client sounds complicated

patochemOP•14mo ago

yep, that's what I'll do! Thanks a million!

jamwt•14mo ago

@patochem yep, in most cases, you don't need a separate state management library if you're using convex. at least for early projects.

patochemOP•14mo ago

Great!! What do you mean by "early projects"?

jamwt•14mo ago

meaning, developed by 1-4 people in the first two years or so. if any app/company lives long enough, the client-side state coordination problems alone might necessitate some sort of app-side state management framework or something regardless of the server

patochemOP•14mo ago

oh, alright.. So I guess I'm safe since I'm building this project on my own👍 Thanks a lot again for the support! I'll make sure to publish my app in #show-and-tell when it's done and spread the word about Convex!

jamwt•14mo ago

sounds great! looking forward to checking it out

How do I get a jwtToken from outside React

Did you find this page helpful?