are there any good remix with clerk templates?

17 Replies

I keep seeing the auth state refresh as I change routtes

the trick was to use clerk useAuth directly and not use the convex one

@Web Dev Cody do you have ConvexProvider wrapped around <RemixBrowser /> in entry.client.tsx? Otherwise I'd be worried that the Provider gets reinitialized on every route transition.

Web Dev CodyOP•2y ago

I thought the proper place to put providers was in the root file

export const loader: LoaderFunction = (args: DataFunctionArgs) => {
  return rootAuthLoader(
    args,
    ({ request }) => {
      return {
        ENV: {
          CONVEX_URL: process.env.CONVEX_URL,
          CLERK_PUBLISHABLE_KEY: process.env.CLERK_PUBLISHABLE_KEY,
        },
      };
    },
    { loadUser: true }
  );
};

function App() {
  const data = useLoaderData<typeof loader>();
  const convex = new ConvexReactClient(data.ENV.CONVEX_URL!);
  return (
    <html lang="en" className="dark">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body className="dark:bg-gray-900 dark:text-white">
        <ClerkProvider publishableKey={data.ENV.CLERK_PUBLISHABLE_KEY!}>
          <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
            <Header />
            <div className="pt-8 pb-8 container mx-auto">
              <Outlet />
            </div>
          </ConvexProviderWithClerk>
        </ClerkProvider>

        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export default ClerkApp(App);

export const ErrorBoundary = V2_ClerkErrorBoundary();
export const CatchBoundary = ClerkCatchBoundary();

export const loader: LoaderFunction = (args: DataFunctionArgs) => {
  return rootAuthLoader(
    args,
    ({ request }) => {
      return {
        ENV: {
          CONVEX_URL: process.env.CONVEX_URL,
          CLERK_PUBLISHABLE_KEY: process.env.CLERK_PUBLISHABLE_KEY,
        },
      };
    },
    { loadUser: true }
  );
};

function App() {
  const data = useLoaderData<typeof loader>();
  const convex = new ConvexReactClient(data.ENV.CONVEX_URL!);
  return (
    <html lang="en" className="dark">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body className="dark:bg-gray-900 dark:text-white">
        <ClerkProvider publishableKey={data.ENV.CLERK_PUBLISHABLE_KEY!}>
          <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
            <Header />
            <div className="pt-8 pb-8 container mx-auto">
              <Outlet />
            </div>
          </ConvexProviderWithClerk>
        </ClerkProvider>

        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export default ClerkApp(App);

export const ErrorBoundary = V2_ClerkErrorBoundary();
export const CatchBoundary = ClerkCatchBoundary();

a remix quick start guide might be nice

Michal Srb•2y ago

@Web Dev Cody here's an example repo: https://github.com/xixixao/convex-clerk-remix Changes: 1. I followed the Clerk Remix guide, that way you get Clerk on the server (SSR) as well 2. You need to memoize the ConvexClient, otherwise you'll get a new one every time the root renders I'll also add isomorphic Convex API to another branch on the repo later. I think you'd really love this, based on your last video. It will give you data from Convex during SSR. Code once, get both server-side rendered and client-side rendered pages, without any changes to your code! 😇

GitHub

GitHub - xixixao/convex-clerk-remix: Example of Convex app with Cle...

Example of Convex app with Clerk and Remix. Contribute to xixixao/convex-clerk-remix development by creating an account on GitHub.

Web Dev CodyOP•2y ago

ahh ok I think that was the key part I was missing const convex = useMemo(() => new ConvexReactClient(CONVEX_URL), [CONVEX_URL]); thank you! actually, @Michal Srb how did you get this working without using

 <ClerkProvider publishableKey={data.ENV.CLERK_PUBLISHABLE_KEY!}>

mine just crashes when I remove the <ClerkProvider> ok so the issue is with my header

Web Dev CodyOP•2y ago

for some reason having these cause my remix app to crash with

Web Dev CodyOP•2y ago

if I comment them out of my header it works fine

Michal Srb•2y ago

@Web Dev Cody I followed the Clerk guide, so I have: 1. rootAuthLoader in the root.tsx loader 2. export default ClerkApp(App); 3. export const ErrorBoundary = V2_ClerkErrorBoundary(); https://github.com/xixixao/convex-clerk-remix/blob/master/app/root.tsx

GitHub

convex-clerk-remix/app/root.tsx at master · xixixao/convex-clerk-re...

Example of Convex app with Clerk and Remix. Contribute to xixixao/convex-clerk-remix development by creating an account on GitHub.

Web Dev CodyOP•2y ago

try bringing in a <SignInButton> from clerk I'm pretty sure it'll crash oh wait you have <SignIn I'm using <SignInButton ok that was the issue, I'm importing the same named components from a different package 🤯

Michal Srb•2y ago

I have setup the sign in and sign up as per here: https://clerk.com/docs/quickstarts/remix#use-clerk-with-remix Now when I add <SignInButton /> <SignOutButton /> to _index route they work as well (I'll push this)

Use Clerk with Remix | Clerk

Learn how to use Clerk to quickly and easily add secure authentication and user management to your Remix application.

Michal Srb•2y ago

For future reference, this is an example of SignInButton use: https://github.com/xixixao/convex-clerk-remix/blob/master/app/routes/_index.tsx#L14-L27

GitHub

convex-clerk-remix/app/routes/_index.tsx at master · xixixao/convex...

Example of Convex app with Clerk and Remix. Contribute to xixixao/convex-clerk-remix development by creating an account on GitHub.

Web Dev CodyOP•2y ago

nice, ty!

Amix•2y ago

Hey @Web Dev Cody just came across your issue, I think putting constructor call new ConvexReactClient(CONVEX_URL) inside a react component create a new reference of the object each time on each re-render. useMemo works but I think taking it outside of the react component would be better and no need useMemo 🙂

Michal Srb•2y ago

@Amix that's what we usually suggest, but it's not possible in Remix because Remix doesn't inject environment variables into the client source code (unfortunately, unlike Vite/Next).

Amix•2y ago

opsss -1 point for Remix 🙂

are there any good remix with clerk templates?

Did you find this page helpful?