feat(cli): improve convex + better-auth frontend templates (#746)

* feat(cli): improve convex + better-auth frontend templates

* docs: update CONTRIBUTING.md to recommend correct lint/format command

* fix

---------

Co-authored-by: Aman Varshney <amanvarshney.work@gmail.com>

Author: oscabriel

.github/CONTRIBUTING.md

@@ -157,8 +157,8 @@ cd apps/cli
 bun dev
 bun run test
 
-# Format files
-bun run format
+# Lint and format files (from root, uses oxlint and oxfmt)
+bun run check
 ```
 
 - **Manual testing**: Test your changes manually to ensure everything works as expected
@@ -174,7 +174,6 @@ Use conventional commit messages with the appropriate scope:
 - `feat(web): add new web feature`
 - `fix(web): fix web bug`
 - `chore(web): update dependencies`
-- `docs: update documentation`
 
 ## Getting Help
 

apps/cli/src/constants.ts

@@ -42,8 +42,8 @@ export const DEFAULT_CONFIG = getDefaultConfig();
 export const dependencyVersionMap = {
   typescript: "^5",
 
-  "better-auth": "^1.4.7",
-  "@better-auth/expo": "^1.4.7",
+  "better-auth": "^1.4.9",
+  "@better-auth/expo": "^1.4.9",
 
   "@clerk/nextjs": "^6.31.5",
   "@clerk/clerk-react": "^5.45.0",
@@ -141,7 +141,7 @@ export const dependencyVersionMap = {
   "convex-svelte": "^0.0.12",
   "convex-nuxt": "0.1.5",
   "convex-vue": "^0.1.5",
-  "@convex-dev/better-auth": "^0.10.6",
+  "@convex-dev/better-auth": "^0.10.9",
 
   "@tanstack/svelte-query": "^5.85.3",
   "@tanstack/svelte-query-devtools": "^5.85.3",
@@ -151,6 +151,7 @@ export const dependencyVersionMap = {
 
   "@tanstack/react-query-devtools": "^5.91.1",
   "@tanstack/react-query": "^5.90.12",
+  "@tanstack/react-router-ssr-query": "^1.142.7",
 
   "@tanstack/solid-query": "^5.87.4",
   "@tanstack/solid-query-devtools": "^5.87.4",

apps/cli/src/helpers/core/api-setup.ts

@@ -154,6 +154,7 @@ function getConvexDependencies(frontend: Frontend[]) {
 
   if (frontend.includes("tanstack-start")) {
     deps.web.dependencies.push("@convex-dev/react-query");
+    deps.web.dependencies.push("@tanstack/react-router-ssr-query");
   }
   if (frontend.includes("svelte")) {
     deps.web.dependencies.push("convex-svelte");

apps/cli/src/helpers/core/auth-setup.ts

@@ -59,13 +59,13 @@ export async function setupAuth(config: ProjectConfig) {
         if (convexBackendDirExists) {
           await addPackageDependency({
             dependencies: ["better-auth", "@convex-dev/better-auth"],
-            customDependencies: { "better-auth": "1.4.7" },
+            customDependencies: { "better-auth": "1.4.9" },
             projectDir: convexBackendDir,
           });
           if (hasNativeForBA) {
             await addPackageDependency({
               dependencies: ["@better-auth/expo"],
-              customDependencies: { "@better-auth/expo": "1.4.7" },
+              customDependencies: { "@better-auth/expo": "1.4.9" },
               projectDir: convexBackendDir,
             });
           }
@@ -81,19 +81,19 @@ export async function setupAuth(config: ProjectConfig) {
           if (hasNextJs) {
             await addPackageDependency({
               dependencies: ["better-auth", "@convex-dev/better-auth"],
-              customDependencies: { "better-auth": "1.4.7" },
+              customDependencies: { "better-auth": "1.4.9" },
               projectDir: clientDir,
             });
           } else if (hasTanStackStart) {
             await addPackageDependency({
               dependencies: ["better-auth", "@convex-dev/better-auth"],
-              customDependencies: { "better-auth": "1.4.7" },
+              customDependencies: { "better-auth": "1.4.9" },
               projectDir: clientDir,
             });
           } else if (hasViteReactOther) {
             await addPackageDependency({
               dependencies: ["better-auth", "@convex-dev/better-auth"],
-              customDependencies: { "better-auth": "1.4.7" },
+              customDependencies: { "better-auth": "1.4.9" },
               projectDir: clientDir,
             });
           }
@@ -106,8 +106,8 @@ export async function setupAuth(config: ProjectConfig) {
           await addPackageDependency({
             dependencies: ["better-auth", "@better-auth/expo", "@convex-dev/better-auth"],
             customDependencies: {
-              "better-auth": "1.4.7",
-              "@better-auth/expo": "1.4.7",
+              "better-auth": "1.4.9",
+              "@better-auth/expo": "1.4.9",
             },
             projectDir: nativeDir,
           });

apps/cli/templates/auth/better-auth/convex/backend/convex/auth.ts.hbs

@@ -8,10 +8,9 @@ import { convex, crossDomain } from "@convex-dev/better-auth/plugins";
 import { convex } from "@convex-dev/better-auth/plugins";
 {{/if}}
 import { components } from "./_generated/api";
-import { DataModel } from "./_generated/dataModel";
+import type { DataModel } from "./_generated/dataModel";
 import { query } from "./_generated/server";
 import { betterAuth } from "better-auth";
-import { v } from "convex/values";
 import authConfig from "./auth.config";
 
 {{#if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
@@ -63,8 +62,7 @@ export { createAuth };
 
 export const getCurrentUser = query({
   args: {},
-  returns: v.any(),
-  handler: async function (ctx) {
-    return authComponent.getAuthUser(ctx);
+  handler: async (ctx) => {
+    return await authComponent.safeGetAuthUser(ctx);
   },
 });

apps/cli/templates/auth/better-auth/convex/backend/convex/privateData.ts.hbs

@@ -1,16 +1,17 @@
 import { query } from "./_generated/server";
+import { authComponent } from "./auth";
 
 export const get = query({
-    args: {},
-    handler: async (ctx) => {
-        const identity = await ctx.auth.getUserIdentity();
-        if (identity === null) {
-            return {
-                message: "Not authenticated",
-            };
-        }
-        return {
-            message: "This is private",
-        };
-    },
+  args: {},
+  handler: async (ctx) => {
+    const authUser = await authComponent.safeGetAuthUser(ctx);
+    if (!authUser) {
+      return {
+        message: "Not authenticated",
+      };
+    }
+    return {
+      message: "This is private",
+    };
+  },
 });

apps/cli/templates/auth/better-auth/convex/web/react/next/src/lib/auth-client.ts.hbs

@@ -2,5 +2,5 @@ import { createAuthClient } from "better-auth/react";
 import { convexClient } from "@convex-dev/better-auth/client/plugins";
 
 export const authClient = createAuthClient({
-    plugins: [convexClient()],
-});
+  plugins: [convexClient()],
+});

apps/cli/templates/auth/better-auth/convex/web/react/next/src/lib/auth-server.ts.hbs

@@ -1,4 +1,5 @@
 import { convexBetterAuthNextJs } from "@convex-dev/better-auth/nextjs";
+import { isAuthError } from "@/lib/utils";
 
 export const {
   handler,

apps/cli/templates/deploy/alchemy/alchemy.run.ts.hbs

@@ -72,7 +72,7 @@ export const web = await Nextjs("web", {
     {{#if (eq auth "clerk")}}
     CLERK_SECRET_KEY: alchemy.secret.env.CLERK_SECRET_KEY,
     {{/if}}
-    {{#if (includes examples "ai")}}
+    {{#if (and (includes examples "ai") (ne backend "convex"))}}
     GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret.env.GOOGLE_GENERATIVE_AI_API_KEY,
     {{/if}}
     {{#if (eq payments "polar")}}
@@ -146,7 +146,7 @@ export const web = await TanStackStart("web", {
     {{#if (eq auth "clerk")}}
     CLERK_SECRET_KEY: alchemy.secret.env.CLERK_SECRET_KEY,
     {{/if}}
-    {{#if (includes examples "ai")}}
+    {{#if (and (includes examples "ai") (ne backend "convex"))}}
     GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret.env.GOOGLE_GENERATIVE_AI_API_KEY,
     {{/if}}
     {{#if (eq payments "polar")}}

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

@@ -1,9 +1,8 @@
 {{#if (eq backend "convex")}}
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import { QueryClient } from "@tanstack/react-query";
-import { routerWithQueryClient } from "@tanstack/react-router-with-query";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
 import { ConvexQueryClient } from "@convex-dev/react-query";
-import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { routeTree } from "./routeTree.gen";
 import Loader from "./components/loader";
 import "./index.css";
@@ -27,21 +26,12 @@ import { orpc, queryClient } from "./utils/orpc";
 
 {{#if (eq backend "convex")}}
 export function getRouter() {
-  const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!;
-  if (!CONVEX_URL) {
-    console.error("missing envar VITE_CONVEX_URL");
+  const convexUrl = (import.meta as any).env.VITE_CONVEX_URL!;
+  if (!convexUrl) {
+    throw new Error("VITE_CONVEX_URL is not set");
   }
-  const convex = new ConvexReactClient(CONVEX_URL, {
-    unsavedChangesWarning: false,
-  });
 
-  {{#if (eq auth "better-auth")}}
-  const convexQueryClient = new ConvexQueryClient(convex, {
-    expectAuth: true,
-  });
-  {{else}}
-  const convexQueryClient = new ConvexQueryClient(convex);
-  {{/if}}
+  const convexQueryClient = new ConvexQueryClient(convexUrl);
 
   const queryClient: QueryClient = new QueryClient({
     defaultOptions: {
@@ -53,21 +43,19 @@ export function getRouter() {
   });
   convexQueryClient.connect(queryClient);
 
-  const router = routerWithQueryClient(
-    createTanStackRouter({
-      routeTree,
-      defaultPreload: "intent",
-      defaultPendingComponent: () => <Loader />,
-      defaultNotFoundComponent: () => <div>Not Found</div>,
-      context: { queryClient, convexClient: convex, convexQueryClient },
-      Wrap: ({ children }) => (
-        <ConvexProvider client={convexQueryClient.convexClient}>
-          {children}
-        </ConvexProvider>
-      ),
-    }),
+  const router = createTanStackRouter({
+    routeTree,
+    defaultPreload: "intent",
+    defaultPendingComponent: () => <Loader />,
+    defaultNotFoundComponent: () => <div>Not Found</div>,
+    context: { queryClient, convexQueryClient },
+  });
+
+  setupRouterSsrQueryIntegration({
+    router,
     queryClient,
-  );
+  });
+
   return router;
 }
 {{else}}