fix(cli): improve better-auth and polar implementation in tanstack start (#629)

Author: AmanVarshney01

apps/cli/templates/auth/better-auth/web/react/tanstack-start/src/functions/get-user.ts.hbs

@@ -0,0 +1,6 @@
+import { authMiddleware } from "@/middleware/auth";
+import { createServerFn } from "@tanstack/react-start";
+
+export const getUser = createServerFn({ method: "GET" }).middleware([authMiddleware]).handler(async ({ context }) => {
+    return context.session
+})

apps/cli/templates/auth/better-auth/web/react/tanstack-start/src/middleware/auth.ts.hbs

@@ -0,0 +1,12 @@
+import { auth } from "@{{projectName}}/auth";
+import { createMiddleware } from "@tanstack/react-start";
+
+
+export const authMiddleware = createMiddleware().server(async ({ next, request }) => {
+    const session = await auth.api.getSession({
+        headers: request.headers,
+    })
+    return next({
+        context: { session }
+    })
+})

apps/cli/templates/auth/better-auth/web/react/tanstack-start/src/routes/dashboard.tsx.hbs

@@ -1,69 +1,84 @@
+import { getUser } from "@/functions/get-user";
+{{#if (eq payments "polar") }}
 import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth-client";
-{{#if (eq api "trpc")}}
+import { getPayment } from "@/functions/get-payment";
+{{/if}}
+{{#if (eq api "trpc") }}
 import { useTRPC } from "@/utils/trpc";
 import { useQuery } from "@tanstack/react-query";
 {{/if}}
-{{#if (eq api "orpc")}}
+{{#if (eq api "orpc") }}
 import { orpc } from "@/utils/orpc";
 import { useQuery } from "@tanstack/react-query";
 {{/if}}
 import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/dashboard")({
-	component: RouteComponent,
-	beforeLoad: async () => {
-		const session = await authClient.getSession();
-		if (!session.data) {
-			redirect({
-				to: "/login",
-				throw: true
-			});
-		}
-		{{#if (eq payments "polar")}}
-		const {data: customerState} = await authClient.customer.state()
-		return { session, customerState };
-		{{else}}
-		return { session };
-		{{/if}}
-	}
+  component: RouteComponent,
+  beforeLoad: async () => {
+    const session = await getUser();
+    {{#if (eq payments "polar") }}
+    const customerState = await getPayment();
+    return { session, customerState };
+    {{else}}
+    return { session };
+    {{/if}}
+  },
+  loader: async ({ context }) => {
+    if (!context.session) {
+      throw redirect({
+        to: "/login",
+      });
+    }
+  },
 });
 
 function RouteComponent() {
-	const { session{{#if (eq payments "polar")}}, customerState{{/if}} } = Route.useRouteContext();
+  const { session{{#if (eq payments "polar") }}, customerState{{/if}} } = Route.useRouteContext();
 
-	{{#if (eq api "trpc")}}
-	const trpc = useTRPC();
-	const privateData = useQuery(trpc.privateData.queryOptions());
-	{{/if}}
-	{{#if (eq api "orpc")}}
-	const privateData = useQuery(orpc.privateData.queryOptions());
-	{{/if}}
+  {{#if (eq api "trpc") }}
+  const trpc = useTRPC();
+  const privateData = useQuery(trpc.privateData.queryOptions());
+  {{/if}}
+  {{#if (eq api "orpc") }}
+  const privateData = useQuery(orpc.privateData.queryOptions());
+  {{/if}}
 
-	{{#if (eq payments "polar")}}
-	const hasProSubscription = customerState?.activeSubscriptions?.length! > 0
-    console.log("Active subscriptions:", customerState?.activeSubscriptions)
-	{{/if}}
+  {{#if (eq payments "polar") }}
+  const hasProSubscription = (customerState?.activeSubscriptions?.length ?? 0) > 0;
+  // For debugging: console.log("Active subscriptions:", customerState?.activeSubscriptions);
+  {{/if}}
 
-	return (
-		<div>
-			<h1>Dashboard</h1>
-			<p>Welcome {session.data?.user.name}</p>
-			{{#if ( or (eq api "orpc") (eq api "trpc"))}}
-			<p>API: {privateData.data?.message}</p>
-			{{/if}}
-			{{#if (eq payments "polar")}}
-			<p>Plan: {hasProSubscription ? "Pro" : "Free"}</p>
-			{hasProSubscription ? (
-				<Button onClick={async () => await authClient.customer.portal()}>
-					Manage Subscription
-				</Button>
-			) : (
-				<Button onClick={async () => await authClient.checkout({ slug: "pro" })}>
-					Upgrade to Pro
-				</Button>
-			)}
-			{{/if}}
-		</div>
-	);
-}
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Welcome {session?.user.name}</p>
+      {{#if (eq api "trpc") }}
+      <p>API: {privateData.data?.message}</p>
+      {{else if (eq api "orpc") }}
+      <p>API: {privateData.data?.message}</p>
+      {{/if}}
+      {{#if (eq payments "polar") }}
+      <p>Plan: {hasProSubscription ? "Pro" : "Free"}</p>
+      {hasProSubscription ? (
+        <Button
+          onClick={async function handlePortal() {
+            await authClient.customer.portal();
+          }}
+        >
+          Manage Subscription
+        </Button>
+      ) : (
+        <Button
+          onClick={async function handleUpgrade() {
+            await authClient.checkout({ slug: "pro" });
+          }}
+        >
+          Upgrade to Pro
+        </Button>
+      )}
+      {{/if}}
+    </div>
+  );
+}

apps/cli/templates/payments/polar/web/react/tanstack-start/src/functions/get-payment.ts.hbs

@@ -0,0 +1,15 @@
+import { authClient } from "@/lib/auth-client";
+import { authMiddleware } from "@/middleware/auth";
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeaders } from "@tanstack/react-start/server";
+
+export const getPayment = createServerFn({ method: "GET" })
+    .middleware([authMiddleware])
+    .handler(async () => {
+        const { data: customerState } = await authClient.customer.state({
+            fetchOptions: {
+                headers: getRequestHeaders()
+            }
+        });
+        return customerState;
+    });