create-better-t-stack 2.37.0 → 2.38.0

package/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() {

package/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: {},

package/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,

package/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}}
 }

package/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>

package/templates/frontend/solid/src/components/header.tsx.hbs

@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/solid-router";
-{{#if auth}}
+{{#if (eq auth "better-auth")}}
 import UserMenu from "./user-menu";
 {{/if}}
 import { For } from "solid-js";
@@ -7,7 +7,7 @@ import { For } from "solid-js";
 export default function Header() {
   const links = [
     { to: "/", label: "Home" },
-    {{#if auth}}
+    {{#if (eq auth "better-auth")}}
     { to: "/dashboard", label: "Dashboard" },
     {{/if}}
     {{#if (includes examples "todo")}}
@@ -27,7 +27,7 @@ export default function Header() {
           </For>
         </nav>
         <div class="flex items-center gap-2">
-          {{#if auth}}
+          {{#if (eq auth "better-auth")}}
           <UserMenu />
           {{/if}}
         </div>

package/templates/frontend/svelte/src/components/Header.svelte.hbs

@@ -1,11 +1,11 @@
 <script lang="ts">
 
-    {{#if auth}}
+    {{#if (eq auth "better-auth")}}
 	import UserMenu from './UserMenu.svelte';
     {{/if}}
     const links = [
         { to: "/", label: "Home" },
-        {{#if auth}}
+        {{#if (eq auth "better-auth")}}
         { to: "/dashboard", label: "Dashboard" },
         {{/if}}
         {{#if (includes examples "todo")}}
@@ -31,7 +31,7 @@
 			{/each}
 		</nav>
 		<div class="flex items-center gap-2">
-		    {{#if auth}}
+		    {{#if (eq auth "better-auth")}}
             <UserMenu />
              {{/if}}
 		</div>