create-better-t-stack 3.8.3 → 3.9.0-pr730.0ee9844

package/templates/auth/better-auth/convex/backend/convex/auth.ts.hbs

@@ -1,45 +1,44 @@
 import { createClient, type GenericCtx } from "@convex-dev/better-auth";
 {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
-import { convex } from "@convex-dev/better-auth/plugins";
+import { convex, crossDomain } from "@convex-dev/better-auth/plugins";
 import { expo } from "@better-auth/expo";
+{{else if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+import { convex, crossDomain } from "@convex-dev/better-auth/plugins";
 {{else}}
 import { convex } from "@convex-dev/better-auth/plugins";
 {{/if}}
-{{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
-import { crossDomain } from "@convex-dev/better-auth/plugins";
-{{/if}}
 import { components } from "./_generated/api";
 import { 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") (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+{{#if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
+const siteUrl = process.env.SITE_URL!;
+{{else if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
 const siteUrl = process.env.SITE_URL!;
 {{/if}}
 {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
 const nativeAppUrl = process.env.NATIVE_APP_URL || "mybettertapp://";
+const nativeSiteUrl = process.env.NATIVE_SITE_URL || "http://localhost:8081";
 {{/if}}
 
 export const authComponent = createClient<DataModel>(components.betterAuth);
 
-function createAuth(
-  ctx: GenericCtx<DataModel>,
-  { optionsOnly }: { optionsOnly?: boolean } = { optionsOnly: false }
-) {
+function createAuth(ctx: GenericCtx<DataModel>) {
   return betterAuth({
-    logger: {
-      disabled: optionsOnly,
-    },
     {{#if (and (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles")) (or (includes frontend "tanstack-start") (includes frontend "next")))}}
     baseURL: siteUrl,
-    trustedOrigins: [siteUrl, nativeAppUrl],
+    trustedOrigins: [siteUrl, nativeSiteUrl, nativeAppUrl],
+    {{else if (and (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles")) (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid")))}}
+    trustedOrigins: [siteUrl, nativeSiteUrl, nativeAppUrl],
     {{else if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
-    trustedOrigins: [nativeAppUrl],
+    trustedOrigins: [nativeSiteUrl, nativeAppUrl],
     {{else if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
     baseURL: siteUrl,
     trustedOrigins: [siteUrl],
-    {{else}}
+    {{else if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
     trustedOrigins: [siteUrl],
     {{/if}}
     database: authComponent.adapter(ctx),
@@ -50,11 +49,14 @@ function createAuth(
     plugins: [
       {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
       expo(),
-      {{/if}}
-      {{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+      crossDomain({ siteUrl: nativeSiteUrl }),
+      {{else if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
       crossDomain({ siteUrl }),
       {{/if}}
-      convex(),
+      convex({
+        authConfig,
+        jwksRotateOnTokenGenerationError: true,
+      }),
     ],
   });
 }
@@ -67,4 +69,4 @@ export const getCurrentUser = query({
   handler: async function (ctx, args) {
     return authComponent.getAuthUser(ctx);
   },
-});
+});

package/templates/auth/better-auth/convex/backend/convex/http.ts.hbs

@@ -3,10 +3,14 @@ import { authComponent, createAuth } from "./auth";
 
 const http = httpRouter();
 
-{{#if (or (includes frontend "tanstack-start") (includes frontend "next") (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
+{{#if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
+{{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
+authComponent.registerRoutes(http, createAuth, { cors: true });
+{{else}}
 authComponent.registerRoutes(http, createAuth);
+{{/if}}
 {{else}}
 authComponent.registerRoutes(http, createAuth, { cors: true });
 {{/if}}
 
-export default http;
+export default http;

package/templates/auth/better-auth/convex/native/base/lib/auth-client.ts.hbs

@@ -1,17 +1,22 @@
 import { createAuthClient } from "better-auth/react";
-import { convexClient } from "@convex-dev/better-auth/client/plugins";
+import { convexClient, crossDomainClient } from "@convex-dev/better-auth/client/plugins";
 import { expoClient } from "@better-auth/expo/client";
 import Constants from "expo-constants";
 import * as SecureStore from "expo-secure-store";
+import { Platform } from "react-native";
 
 export const authClient = createAuthClient({
   baseURL: process.env.EXPO_PUBLIC_CONVEX_SITE_URL,
   plugins: [
-    expoClient({
-      scheme: Constants.expoConfig?.scheme as string,
-      storagePrefix: Constants.expoConfig?.scheme as string,
-      storage: SecureStore,
-    }),
     convexClient(),
+    ...(Platform.OS === "web"
+      ? [crossDomainClient()]
+      : [
+          expoClient({
+            scheme: Constants.expoConfig?.scheme as string,
+            storagePrefix: Constants.expoConfig?.scheme as string,
+            storage: SecureStore,
+          }),
+        ]),
   ],
 });

package/templates/auth/better-auth/convex/web/react/next/src/app/api/auth/[...all]/route.ts.hbs

@@ -1,3 +1,3 @@
-import { nextJsHandler } from "@convex-dev/better-auth/nextjs";
+import { handler } from "@/lib/auth-server";
 
-export const { GET, POST } = nextJsHandler();
+export const { GET, POST } = handler;

package/templates/auth/better-auth/convex/web/react/next/src/components/user-menu.tsx.hbs

@@ -1,6 +1,7 @@
 import {
 	DropdownMenu,
 	DropdownMenuContent,
+	DropdownMenuGroup,
 	DropdownMenuItem,
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
@@ -18,30 +19,32 @@ export default function UserMenu() {
 
 	return (
 		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
+			<DropdownMenuTrigger>
 				<Button variant="outline">{user?.name}</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="bg-card">
-				<DropdownMenuLabel>My Account</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem>{user?.email}</DropdownMenuItem>
-				<DropdownMenuItem asChild>
-					<Button
-						variant="destructive"
-						className="w-full"
-						onClick={() => {
-							authClient.signOut({
-								fetchOptions: {
-									onSuccess: () => {
-										router.push("/dashboard");
+				<DropdownMenuGroup>
+					<DropdownMenuLabel>My Account</DropdownMenuLabel>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem>{user?.email}</DropdownMenuItem>
+					<DropdownMenuItem>
+						<Button
+							variant="destructive"
+							className="w-full"
+							onClick={() => {
+								authClient.signOut({
+									fetchOptions: {
+										onSuccess: () => {
+											router.push("/dashboard");
+										},
 									},
-								},
-							});
-						}}
-					>
-						Sign Out
-					</Button>
-				</DropdownMenuItem>
+								});
+							}}
+						>
+							Sign Out
+						</Button>
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
 			</DropdownMenuContent>
 		</DropdownMenu>
 	);

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

@@ -1,6 +1,14 @@
-import { createAuth } from "@{{projectName}}/backend/convex/auth";
-import { getToken as getTokenNextjs } from "@convex-dev/better-auth/nextjs";
+import { convexBetterAuthNextJs } from "@convex-dev/better-auth/nextjs";
 
-export const getToken = () => {
-    return getTokenNextjs(createAuth);
-};
+export const {
+  handler,
+  preloadAuthQuery,
+  isAuthenticated,
+  getToken,
+  fetchAuthQuery,
+  fetchAuthMutation,
+  fetchAuthAction,
+} = convexBetterAuthNextJs({
+  convexUrl: process.env.NEXT_PUBLIC_CONVEX_URL!,
+  convexSiteUrl: process.env.NEXT_PUBLIC_CONVEX_SITE_URL!,
+});

package/templates/auth/better-auth/convex/web/react/tanstack-router/src/components/user-menu.tsx.hbs

@@ -1,6 +1,7 @@
 import {
     DropdownMenu,
     DropdownMenuContent,
+    DropdownMenuGroup,
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
@@ -18,32 +19,34 @@ export default function UserMenu() {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger asChild>
+            <DropdownMenuTrigger>
                 <Button variant="outline">{user?.name}</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="bg-card">
-                <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>{user?.email}</DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                    <Button
-                        variant="destructive"
-                        className="w-full"
-                        onClick={() => {
-                            authClient.signOut({
-                                fetchOptions: {
-                                    onSuccess: () => {
-                                        navigate({
-                                            to: "/dashboard",
-                                        });
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>{user?.email}</DropdownMenuItem>
+                    <DropdownMenuItem>
+                        <Button
+                            variant="destructive"
+                            className="w-full"
+                            onClick={() => {
+                                authClient.signOut({
+                                    fetchOptions: {
+                                        onSuccess: () => {
+                                            navigate({
+                                                to: "/dashboard",
+                                            });
+                                        },
                                     },
-                                },
-                            });
-                        }}
-                    >
-                        Sign Out
-                    </Button>
-                </DropdownMenuItem>
+                                });
+                            }}
+                        >
+                            Sign Out
+                        </Button>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
             </DropdownMenuContent>
         </DropdownMenu>
     );

package/templates/auth/better-auth/convex/web/react/tanstack-start/src/components/user-menu.tsx.hbs

@@ -1,49 +1,48 @@
 import {
     DropdownMenu,
     DropdownMenuContent,
+    DropdownMenuGroup,
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { authClient } from "@/lib/auth-client";
-import { useNavigate } from "@tanstack/react-router";
 import { Button } from "./ui/button";
 import { useQuery } from "convex/react";
 import { api } from "@{{projectName}}/backend/convex/_generated/api";
 
 export default function UserMenu() {
-    const navigate = useNavigate();
     const user = useQuery(api.auth.getCurrentUser)
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger asChild>
+            <DropdownMenuTrigger>
                 <Button variant="outline">{user?.name}</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="bg-card">
-                <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>{user?.email}</DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                    <Button
-                        variant="destructive"
-                        className="w-full"
-                        onClick={() => {
-                            authClient.signOut({
-                                fetchOptions: {
-                                    onSuccess: () => {
-                                        navigate({
-                                            to: "/dashboard",
-                                        });
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>{user?.email}</DropdownMenuItem>
+                    <DropdownMenuItem>
+                        <Button
+                            variant="destructive"
+                            className="w-full"
+                            onClick={() => {
+                                authClient.signOut({
+                                    fetchOptions: {
+                                        onSuccess: () => {
+                                            location.reload();
+                                        },
                                     },
-                                },
-                            });
-                        }}
-                    >
-                        Sign Out
-                    </Button>
-                </DropdownMenuItem>
+                                });
+                            }}
+                        >
+                            Sign Out
+                        </Button>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
             </DropdownMenuContent>
         </DropdownMenu>
     );

package/templates/auth/better-auth/convex/web/react/tanstack-start/src/lib/auth-server.ts.hbs

@@ -1,6 +1,12 @@
-import { createAuth } from "@{{projectName}}/backend/convex/auth";
-import { setupFetchClient } from "@convex-dev/better-auth/react-start";
-import { getCookie } from "@tanstack/react-start/server";
+import { convexBetterAuthReactStart } from "@convex-dev/better-auth/react-start";
 
-export const { fetchQuery, fetchMutation, fetchAction } =
-	await setupFetchClient(createAuth, getCookie);
+export const {
+  handler,
+  getToken,
+  fetchAuthQuery,
+  fetchAuthMutation,
+  fetchAuthAction,
+} = convexBetterAuthReactStart({
+  convexUrl: process.env.VITE_CONVEX_URL!,
+  convexSiteUrl: process.env.VITE_CONVEX_SITE_URL!,
+});

package/templates/auth/better-auth/convex/web/react/tanstack-start/src/routes/api/auth/$.ts.hbs

@@ -1,11 +1,11 @@
-import { reactStartHandler } from "@convex-dev/better-auth/react-start";
 import { createFileRoute } from "@tanstack/react-router";
+import { handler } from "@/lib/auth-server";
 
 export const Route = createFileRoute("/api/auth/$")({
   server: {
     handlers: {
-      GET: ({ request }) => reactStartHandler(request),
-      POST: ({ request }) => reactStartHandler(request),
+      GET: ({ request }) => handler(request),
+      POST: ({ request }) => handler(request),
     },
   },
-});
+});

package/templates/auth/better-auth/fullstack/tanstack-start/src/routes/api/auth/$.ts.hbs

@@ -1,15 +1,11 @@
-import { auth } from '@{{projectName}}/auth'
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
+import { handler } from "@/lib/auth-server";
 
-export const Route = createFileRoute('/api/auth/$')({
+export const Route = createFileRoute("/api/auth/$")({
   server: {
     handlers: {
-      GET: ({ request }) => {
-        return auth.handler(request)
-      },
-      POST: ({ request }) => {
-        return auth.handler(request)
-      },
+      GET: ({ request }) => handler(request),
+      POST: ({ request }) => handler(request),
     },
   },
-})
+});

package/templates/auth/better-auth/web/react/base/src/lib/auth-client.ts.hbs

@@ -1,4 +1,3 @@
-import type { auth } from "@{{projectName}}/auth";
 import { createAuthClient } from "better-auth/react";
 {{#if (eq payments "polar")}}
 import { polarClient } from "@polar-sh/better-auth";

package/templates/auth/better-auth/web/react/next/src/components/user-menu.tsx.hbs

@@ -1,6 +1,7 @@
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -22,7 +23,7 @@ export default function UserMenu() {
 
   if (!session) {
     return (
-      <Button variant="outline" asChild>
+      <Button variant="outline">
         <Link href="/login">Sign In</Link>
       </Button>
     );
@@ -30,30 +31,32 @@ export default function UserMenu() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <Button variant="outline">{session.user.name}</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="bg-card">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Button
-            variant="destructive"
-            className="w-full"
-            onClick={() => {
-              authClient.signOut({
-                fetchOptions: {
-                  onSuccess: () => {
-                    router.push("/");
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+          <DropdownMenuItem>
+            <Button
+              variant="destructive"
+              className="w-full"
+              onClick={() => {
+                authClient.signOut({
+                  fetchOptions: {
+                    onSuccess: () => {
+                      router.push("/");
+                    },
                   },
-                },
-              });
-            }}
-          >
-            Sign Out
-          </Button>
-        </DropdownMenuItem>
+                });
+              }}
+            >
+              Sign Out
+            </Button>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/templates/auth/better-auth/web/react/react-router/src/components/user-menu.tsx.hbs

@@ -1,6 +1,7 @@
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -22,7 +23,7 @@ export default function UserMenu() {
 
   if (!session) {
     return (
-      <Button variant="outline" asChild>
+      <Button variant="outline">
         <Link to="/login">Sign In</Link>
       </Button>
     );
@@ -30,30 +31,32 @@ export default function UserMenu() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <Button variant="outline">{session.user.name}</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="bg-card">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Button
-            variant="destructive"
-            className="w-full"
-            onClick={() => {
-              authClient.signOut({
-                fetchOptions: {
-                  onSuccess: () => {
-                    navigate("/");
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+          <DropdownMenuItem>
+            <Button
+              variant="destructive"
+              className="w-full"
+              onClick={() => {
+                authClient.signOut({
+                  fetchOptions: {
+                    onSuccess: () => {
+                      navigate("/");
+                    },
                   },
-                },
-              });
-            }}
-          >
-            Sign Out
-          </Button>
-        </DropdownMenuItem>
+                });
+              }}
+            >
+              Sign Out
+            </Button>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/templates/auth/better-auth/web/react/{tanstack-start/src/components/user-menu.tsx → tanstack-router/src/components/user-menu.tsx.hbs}

@@ -1,6 +1,7 @@
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -22,7 +23,7 @@ export default function UserMenu() {
 
   if (!session) {
     return (
-      <Button variant="outline" asChild>
+      <Button variant="outline">
         <Link to="/login">Sign In</Link>
       </Button>
     );
@@ -30,32 +31,34 @@ export default function UserMenu() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <Button variant="outline">{session.user.name}</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="bg-card">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Button
-            variant="destructive"
-            className="w-full"
-            onClick={() => {
-              authClient.signOut({
-                fetchOptions: {
-                  onSuccess: () => {
-                    navigate({
-                      to: "/",
-                    });
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+          <DropdownMenuItem>
+            <Button
+              variant="destructive"
+              className="w-full"
+              onClick={() => {
+                authClient.signOut({
+                  fetchOptions: {
+                    onSuccess: () => {
+                      navigate({
+                        to: "/",
+                      });
+                    },
                   },
-                },
-              });
-            }}
-          >
-            Sign Out
-          </Button>
-        </DropdownMenuItem>
+                });
+              }}
+            >
+              Sign Out
+            </Button>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );