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

2025-10-12 23:52:15 +00:00 · 2025-08-29 00:21:08 +05:30
parent 8d48ae0359
commit 54bcdf1cbc
153 changed files with 1954 additions and 771 deletions
--- a/apps/cli/templates/frontend/react/next/src/app/layout.tsx.hbs
+++ b/apps/cli/templates/frontend/react/next/src/app/layout.tsx.hbs
@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "../index.css";
-import Providers from "@/components/providers";
+{{#if (eq auth "clerk")}}{{#if (eq backend "convex")}}import { ClerkProvider } from "@clerk/nextjs";
+{{/if}}{{/if}}import Providers from "@/components/providers";
 import Header from "@/components/header";

 const geistSans = Geist({
@@ -24,18 +25,25 @@ export default function RootLayout({
 }: Readonly<{
  children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <Providers>
-          <div className="grid grid-rows-[auto_1fr] h-svh">
-            <Header />
-            {children}
-          </div>
-        </Providers>
-      </body>
-    </html>
-  );
+  	return (
+		<html lang="en" suppressHydrationWarning>
+			<body
+				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+			>
+				{{#if (and (eq auth "clerk") (eq backend "convex"))}}<ClerkProvider>
+					<Providers>
+						<div className="grid grid-rows-[auto_1fr] h-svh">
+							<Header />
+							{children}
+						</div>
+					</Providers>
+				</ClerkProvider>{{else}}<Providers>
+					<div className="grid grid-rows-[auto_1fr] h-svh">
+						<Header />
+						{children}
+					</div>
+				</Providers>{{/if}}
+			</body>
+		</html>
+	);
 }
--- a/apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs
+++ b/apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs
@@ -1,7 +1,13 @@
 "use client";

 {{#if (eq backend "convex")}}
+{{#if (eq auth "clerk")}}
+import { useAuth } from "@clerk/nextjs";
+import { ConvexReactClient } from "convex/react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+{{else}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{/if}}
 {{else}}
 {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -34,7 +40,13 @@ export default function Providers({
      disableTransitionOnChange
    >
      {{#if (eq backend "convex")}}
+      {{#if (eq auth "clerk")}}
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        {children}
+      </ConvexProviderWithClerk>
+      {{else}}
      <ConvexProvider client={convex}>{children}</ConvexProvider>
+      {{/if}}
      {{else}}
      {{#unless (eq api "none")}}
      <QueryClientProvider client={queryClient}>
--- a/apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs
+++ b/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() {
--- a/apps/cli/templates/frontend/react/tanstack-router/src/main.tsx.hbs
+++ b/apps/cli/templates/frontend/react/tanstack-router/src/main.tsx.hbs
@@ -12,7 +12,13 @@ import { routeTree } from "./routeTree.gen";
  import { queryClient, trpc } from "./utils/trpc";
 {{/if}}
 {{#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}}
  const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
 {{/if}}

@@ -41,7 +47,19 @@ const router = createRouter({
  {{else if (eq backend "convex")}}
  context: {},
  Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
+    {{#if (eq auth "clerk")}}
+    return (
+      <ClerkProvider
+        publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
+      >
+        <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+          {children}
+        </ConvexProviderWithClerk>
+      </ClerkProvider>
+    );
+    {{else}}
    return <ConvexProvider client={convex}>{children}</ConvexProvider>;
+    {{/if}}
  },
  {{else}}
  context: {},
--- a/apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs
+++ b/apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs
@@ -3,7 +3,7 @@ import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import { QueryClient } from "@tanstack/react-query";
 import { routerWithQueryClient } from "@tanstack/react-router-with-query";
 import { ConvexQueryClient } from "@convex-dev/react-query";
-import { ConvexProvider } from "convex/react";
+import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { routeTree } from "./routeTree.gen";
 import Loader from "./components/loader";
 import "./index.css";
@@ -31,7 +31,11 @@ export function createRouter() {
  if (!CONVEX_URL) {
    console.error("missing envar VITE_CONVEX_URL");
  }
-  const convexQueryClient = new ConvexQueryClient(CONVEX_URL);
+  const convex = new ConvexReactClient(CONVEX_URL, {
+    unsavedChangesWarning: false,
+  });
+
+  const convexQueryClient = new ConvexQueryClient(convex);

  const queryClient: QueryClient = new QueryClient({
    defaultOptions: {
@@ -49,7 +53,7 @@ export function createRouter() {
      defaultPreload: "intent",
      defaultPendingComponent: () => <Loader />,
      defaultNotFoundComponent: () => <div>Not Found</div>,
-      context: { queryClient },
+      context: { queryClient, convexClient: convex, convexQueryClient },
      Wrap: ({ children }) => (
        <ConvexProvider client={convexQueryClient.convexClient}>
          {children}
@@ -82,7 +86,7 @@ const trpcClient = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-      {{#if auth}}
+      {{#if (eq auth "better-auth")}}
      fetch(url, options) {
        return fetch(url, {
          ...options,
--- a/apps/cli/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs
+++ b/apps/cli/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs
@@ -8,22 +8,37 @@ import {
  Scripts,
  createRootRouteWithContext,
  useRouterState,
+  useRouteContext,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "../components/header";
 import appCss from "../index.css?url";
 {{#if (eq backend "convex")}}
 import type { QueryClient } from "@tanstack/react-query";
-{{else}}
-  {{#unless (eq api "none")}}
-import type { QueryClient } from "@tanstack/react-query";
-  {{/unless}}
+import type { ConvexQueryClient } from "@convex-dev/react-query";
+import type { ConvexReactClient } from "convex/react";
 {{/if}}
 import Loader from "@/components/loader";

+{{#if (and (eq backend "convex") (eq auth "clerk"))}}
+import { ClerkProvider, useAuth } from "@clerk/tanstack-react-start";
+import { getAuth } from "@clerk/tanstack-react-start/server";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+
+const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
+  const auth = await getAuth(getWebRequest());
+  const token = await auth.getToken({ template: "convex" });
+  return { userId: auth.userId, token };
+});
+{{/if}}
+
 {{#if (eq backend "convex")}}
 export interface RouterAppContext {
  queryClient: QueryClient;
+  convexClient: ConvexReactClient;
+  convexQueryClient: ConvexQueryClient;
 }
 {{else}}
  {{#if (eq api "trpc")}}
@@ -68,11 +83,42 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
  }),

  component: RootDocument,
+  {{#if (and (eq backend "convex") (eq auth "clerk"))}}
+  beforeLoad: async (ctx) => {
+    const { userId, token } = await fetchClerkAuth();
+    if (token) {
+      ctx.context.convexQueryClient.serverHttpClient?.setAuth(token);
+    }
+    return { userId, token };
+  },
+  {{/if}}
 });

 function RootDocument() {
  const isFetching = useRouterState({ select: (s) => s.isLoading });
-
+  {{#if (and (eq backend "convex") (eq auth "clerk"))}}
+  const context = useRouteContext({ from: Route.id });
+  return (
+    <ClerkProvider>
+      <ConvexProviderWithClerk client={context.convexClient} useAuth={useAuth}>
+        <html lang="en" className="dark">
+          <head>
+            <HeadContent />
+          </head>
+          <body>
+            <div className="grid h-svh grid-rows-[auto_1fr]">
+              <Header />
+              {isFetching ? <Loader /> : <Outlet />}
+            </div>
+            <Toaster richColors />
+            <TanStackRouterDevtools position="bottom-left" />
+            <Scripts />
+          </body>
+        </html>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+  {{else}}
  return (
    <html lang="en" className="dark">
      <head>
@@ -94,4 +140,5 @@ function RootDocument() {
      </body>
    </html>
  );
+  {{/if}}
 }
--- a/apps/cli/templates/frontend/react/web-base/src/components/header.tsx.hbs
+++ b/apps/cli/templates/frontend/react/web-base/src/components/header.tsx.hbs
@@ -9,14 +9,14 @@ import { Link } from "@tanstack/react-router";
 {{#unless (includes frontend "tanstack-start")}}
 import { ModeToggle } from "./mode-toggle";
 {{/unless}}
-{{#if auth}}
+{{#if (eq auth "better-auth")}}
 import UserMenu from "./user-menu";
 {{/if}}

 export default function Header() {
  const links = [
    { to: "/", label: "Home" },
-    {{#if auth}}
+    {{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
      { to: "/dashboard", label: "Dashboard" },
    {{/if}}
    {{#if (includes examples "todo")}}
@@ -67,7 +67,7 @@ export default function Header() {
          {{#unless (includes frontend "tanstack-start")}}
          <ModeToggle />
          {{/unless}}
-          {{#if auth}}
+          {{#if (eq auth "better-auth")}}
          <UserMenu />
          {{/if}}
        </div>