feat: add clerk auth support with convex (#548)

apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs

@@ -13,7 +13,13 @@ import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "./components/ui/sonner";
 
 {{#if (eq backend "convex")}}
-import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { ConvexReactClient } from "convex/react";
+{{#if (eq auth "clerk")}}
+import { ClerkProvider, useAuth } from "@clerk/clerk-react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+{{else}}
+import { ConvexProvider } from "convex/react";
+{{/if}}
 {{else}}
   {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -60,6 +66,26 @@ export default function App() {
   const convex = new ConvexReactClient(
     import.meta.env.VITE_CONVEX_URL as string,
   );
+  {{#if (eq auth "clerk")}}
+  return (
+    <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          disableTransitionOnChange
+          storageKey="vite-ui-theme"
+        >
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            <Outlet />
+          </div>
+          <Toaster richColors />
+        </ThemeProvider>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+  {{else}}
   return (
     <ConvexProvider client={convex}>
       <ThemeProvider
@@ -76,6 +102,7 @@ export default function App() {
       </ThemeProvider>
     </ConvexProvider>
   );
+  {{/if}}
 }
 {{else if (eq api "orpc")}}
 export default function App() {