create-better-t-stack 2.45.4 → 2.46.0-canary.85c43fef

package/templates/auth/better-auth/convex/web/react/tanstack-start/src/components/sign-up-form.tsx.hbs

@@ -0,0 +1,158 @@
+import { authClient } from "@/lib/auth-client";
+import { useForm } from "@tanstack/react-form";
+import { useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+import z from "zod";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+export default function SignUpForm({
+    onSwitchToSignIn,
+}: {
+    onSwitchToSignIn: () => void;
+}) {
+    const navigate = useNavigate({
+        from: "/",
+    });
+
+    const form = useForm({
+        defaultValues: {
+            email: "",
+            password: "",
+            name: "",
+        },
+        onSubmit: async ({ value }) => {
+            await authClient.signUp.email(
+                {
+                    email: value.email,
+                    password: value.password,
+                    name: value.name,
+                },
+                {
+                    onSuccess: () => {
+                        navigate({
+                            to: "/dashboard",
+                        });
+                        toast.success("Sign up successful");
+                    },
+                    onError: (error) => {
+                        toast.error(error.error.message || error.error.statusText);
+                    },
+                },
+            );
+        },
+        validators: {
+            onSubmit: z.object({
+                name: z.string().min(2, "Name must be at least 2 characters"),
+                email: z.email("Invalid email address"),
+                password: z.string().min(8, "Password must be at least 8 characters"),
+            }),
+        },
+    });
+
+    return (
+        <div className="mx-auto w-full mt-10 max-w-md p-6">
+            <h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
+
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    form.handleSubmit();
+                }}
+                className="space-y-4"
+            >
+                <div>
+                    <form.Field name="name">
+                        {(field) => (
+                            <div className="space-y-2">
+                                <Label htmlFor={field.name}>Name</Label>
+                                <Input
+                                    id={field.name}
+                                    name={field.name}
+                                    value={field.state.value}
+                                    onBlur={field.handleBlur}
+                                    onChange={(e) => field.handleChange(e.target.value)}
+                                />
+                                {field.state.meta.errors.map((error) => (
+                                    <p key={error?.message} className="text-red-500">
+                                        {error?.message}
+                                    </p>
+                                ))}
+                            </div>
+                        )}
+                    </form.Field>
+                </div>
+
+                <div>
+                    <form.Field name="email">
+                        {(field) => (
+                            <div className="space-y-2">
+                                <Label htmlFor={field.name}>Email</Label>
+                                <Input
+                                    id={field.name}
+                                    name={field.name}
+                                    type="email"
+                                    value={field.state.value}
+                                    onBlur={field.handleBlur}
+                                    onChange={(e) => field.handleChange(e.target.value)}
+                                />
+                                {field.state.meta.errors.map((error) => (
+                                    <p key={error?.message} className="text-red-500">
+                                        {error?.message}
+                                    </p>
+                                ))}
+                            </div>
+                        )}
+                    </form.Field>
+                </div>
+
+                <div>
+                    <form.Field name="password">
+                        {(field) => (
+                            <div className="space-y-2">
+                                <Label htmlFor={field.name}>Password</Label>
+                                <Input
+                                    id={field.name}
+                                    name={field.name}
+                                    type="password"
+                                    value={field.state.value}
+                                    onBlur={field.handleBlur}
+                                    onChange={(e) => field.handleChange(e.target.value)}
+                                />
+                                {field.state.meta.errors.map((error) => (
+                                    <p key={error?.message} className="text-red-500">
+                                        {error?.message}
+                                    </p>
+                                ))}
+                            </div>
+                        )}
+                    </form.Field>
+                </div>
+
+                <form.Subscribe>
+                    {(state) => (
+                        <Button
+                            type="submit"
+                            className="w-full"
+                            disabled={!state.canSubmit || state.isSubmitting}
+                        >
+                            {state.isSubmitting ? "Submitting..." : "Sign Up"}
+                        </Button>
+                    )}
+                </form.Subscribe>
+            </form>
+
+            <div className="mt-4 text-center">
+                <Button
+                    variant="link"
+                    onClick={onSwitchToSignIn}
+                    className="text-indigo-600 hover:text-indigo-800"
+                >
+                    Already have an account? Sign In
+                </Button>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,50 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    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>
+                <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",
+                                        });
+                                    },
+                                },
+                            });
+                        }}
+                    >
+                        Sign Out
+                    </Button>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

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

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

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

@@ -0,0 +1,5 @@
+import { createAuth } from "convex/auth";
+import { setupFetchClient } from "@convex-dev/better-auth/react-start";
+
+export const { fetchQuery, fetchMutation, fetchAction } =
+  setupFetchClient(createAuth);

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

@@ -0,0 +1,11 @@
+import { reactStartHandler } from '@convex-dev/better-auth/react-start'
+import { createServerFileRoute } from '@tanstack/react-start/server'
+
+export const ServerRoute = createServerFileRoute('/api/auth/$').methods({
+    GET: ({ request }) => {
+        return reactStartHandler(request)
+    },
+    POST: ({ request }) => {
+        return reactStartHandler(request)
+    },
+})

package/templates/auth/better-auth/convex/web/react/tanstack-start/src/routes/dashboard.tsx.hbs

@@ -0,0 +1,43 @@
+import SignInForm from "@/components/sign-in-form";
+import SignUpForm from "@/components/sign-up-form";
+import UserMenu from "@/components/user-menu";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  Authenticated,
+  AuthLoading,
+  Unauthenticated,
+  useQuery,
+} from "convex/react";
+import { useState } from "react";
+
+export const Route = createFileRoute("/dashboard")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const [showSignIn, setShowSignIn] = useState(false);
+  const privateData = useQuery(api.privateData.get);
+
+  return (
+    <>
+      <Authenticated>
+        <div>
+          <h1>Dashboard</h1>
+          <p>privateData: {privateData?.message}</p>
+          <UserMenu />
+        </div>
+      </Authenticated>
+      <Unauthenticated>
+        {showSignIn ? (
+          <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+        ) : (
+          <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+        )}
+      </Unauthenticated>
+      <AuthLoading>
+        <div>Loading...</div>
+      </AuthLoading>
+    </>
+  );
+}

package/templates/auth/better-auth/server/base/src/lib/auth.ts.hbs

@@ -1,12 +1,16 @@
 {{#if (eq orm "prisma")}}
-import { betterAuth } from "better-auth";
+import { betterAuth, type BetterAuthOptions } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
 {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
 import { expo } from "@better-auth/expo";
 {{/if}}
+{{#if (eq payments "polar")}}
+import { polar, checkout, portal } from "@polar-sh/better-auth";
+import { polarClient } from "./payments";
+{{/if}}
 import prisma from "../db";
 
-export const auth = betterAuth({
+export const auth = betterAuth<BetterAuthOptions>({
   database: prismaAdapter(prisma, {
     {{#if (eq database "postgres")}}provider: "postgresql"{{/if}}
     {{#if (eq database "sqlite")}}provider: "sqlite"{{/if}}
@@ -28,24 +32,54 @@ export const auth = betterAuth({
       secure: true,
       httpOnly: true,
     },
-  }
+  },
+  {{#if (eq payments "polar")}}
+  plugins: [
+    polar({
+      client: polarClient,
+      createCustomerOnSignUp: true,
+      enableCustomerPortal: true,
+      use: [
+        checkout({
+          products: [
+            {
+              productId: "your-product-id",
+              slug: "pro",
+            },
+          ],
+          successUrl: process.env.POLAR_SUCCESS_URL,
+          authenticatedUsersOnly: true,
+        }),
+        portal(),
+      ],
+    }),
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    expo(),
+    {{/if}}
+  ],
+  {{else}}
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-  , plugins: [expo()]
+  plugins: [expo()],
+  {{/if}}
   {{/if}}
 });
 {{/if}}
 
 {{#if (eq orm "drizzle")}}
 {{#if (or (eq runtime "bun") (eq runtime "node"))}}
-import { betterAuth } from "better-auth";
+import { betterAuth, type BetterAuthOptions } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
 import { expo } from "@better-auth/expo";
 {{/if}}
+{{#if (eq payments "polar")}}
+import { polar, checkout, portal } from "@polar-sh/better-auth";
+import { polarClient } from "./payments";
+{{/if}}
 import { db } from "../db";
 import * as schema from "../db/schema/auth";
 
-export const auth = betterAuth({
+export const auth = betterAuth<BetterAuthOptions>({
   database: drizzleAdapter(db, {
     {{#if (eq database "postgres")}}provider: "pg",{{/if}}
     {{#if (eq database "sqlite")}}provider: "sqlite",{{/if}}
@@ -68,23 +102,53 @@ export const auth = betterAuth({
       httpOnly: true,
     },
   },
+  {{#if (eq payments "polar")}}
+  plugins: [
+    polar({
+      client: polarClient,
+      createCustomerOnSignUp: true,
+      enableCustomerPortal: true,
+      use: [
+        checkout({
+          products: [
+            {
+              productId: "your-product-id",
+              slug: "pro",
+            },
+          ],
+          successUrl: process.env.POLAR_SUCCESS_URL,
+          authenticatedUsersOnly: true,
+        }),
+        portal(),
+      ],
+    }),
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    expo(),
+    {{/if}}
+  ],
+  {{else}}
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
   plugins: [expo()],
   {{/if}}
+  {{/if}}
 });
 {{/if}}
 
 {{#if (eq runtime "workers")}}
-import { betterAuth } from "better-auth";
+import { betterAuth, type BetterAuthOptions } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
 import { expo } from "@better-auth/expo";
 {{/if}}
+{{#if (eq payments "polar")}}
+import { polar, checkout, portal } from "@polar-sh/better-auth";
+import { polarClient } from "./payments";
+{{/if}}
 import { db } from "../db";
 import * as schema from "../db/schema/auth";
 import { env } from "cloudflare:workers";
 
-export const auth = betterAuth({
+export const auth = betterAuth<BetterAuthOptions>({
   database: drizzleAdapter(db, {
     {{#if (eq database "postgres")}}provider: "pg",{{/if}}
     {{#if (eq database "sqlite")}}provider: "sqlite",{{/if}}
@@ -109,22 +173,49 @@ export const auth = betterAuth({
       httpOnly: true,
     },
   },
+  {{#if (eq payments "polar")}}
+  plugins: [
+    polar({
+      client: polarClient,
+      createCustomerOnSignUp: true,
+      enableCustomerPortal: true,
+      use: [
+        checkout({
+          products: [
+            {
+              productId: "your-product-id",
+              slug: "pro",
+            },
+          ],
+          successUrl: env.POLAR_SUCCESS_URL,
+          authenticatedUsersOnly: true,
+        }),
+        portal(),
+      ],
+    }),
+  ],
+  {{else}}
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
   plugins: [expo()],
   {{/if}}
+  {{/if}}
 });
 {{/if}}
 {{/if}}
 
 {{#if (eq orm "mongoose")}}
-import { betterAuth } from "better-auth";
+import { betterAuth, type BetterAuthOptions } from "better-auth";
 import { mongodbAdapter } from "better-auth/adapters/mongodb";
 {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
 import { expo } from "@better-auth/expo";
 {{/if}}
+{{#if (eq payments "polar")}}
+import { polar, checkout, portal } from "@polar-sh/better-auth";
+import { polarClient } from "./payments";
+{{/if}}
 import { client } from "../db";
 
-export const auth = betterAuth({
+export const auth = betterAuth<BetterAuthOptions>({
   database: mongodbAdapter(client),
   trustedOrigins: [
     process.env.CORS_ORIGIN || "",
@@ -141,20 +232,50 @@ export const auth = betterAuth({
       secure: true,
       httpOnly: true,
     },
-  }
+  },
+  {{#if (eq payments "polar")}}
+  plugins: [
+    polar({
+      client: polarClient,
+      createCustomerOnSignUp: true,
+      enableCustomerPortal: true,
+      use: [
+        checkout({
+          products: [
+            {
+              productId: "your-product-id",
+              slug: "pro",
+            },
+          ],
+          successUrl: process.env.POLAR_SUCCESS_URL,
+          authenticatedUsersOnly: true,
+        }),
+        portal(),
+      ],
+    }),
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    expo(),
+    {{/if}}
+  ],
+  {{else}}
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-  , plugins: [expo()]
+  plugins: [expo()],
+  {{/if}}
   {{/if}}
 });
 {{/if}}
 
 {{#if (eq orm "none")}}
-import { betterAuth } from "better-auth";
+import { betterAuth, type BetterAuthOptions } from "better-auth";
 {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
 import { expo } from "@better-auth/expo";
 {{/if}}
+{{#if (eq payments "polar")}}
+import { polar, checkout, portal } from "@polar-sh/better-auth";
+import { polarClient } from "./payments";
+{{/if}}
 
-export const auth = betterAuth({
+export const auth = betterAuth<BetterAuthOptions>({
   database: "", // Invalid configuration
   trustedOrigins: [
     process.env.CORS_ORIGIN || "",
@@ -171,9 +292,35 @@ export const auth = betterAuth({
       secure: true,
       httpOnly: true,
     },
-  }
+  },
+  {{#if (eq payments "polar")}}
+  plugins: [
+    polar({
+      client: polarClient,
+      createCustomerOnSignUp: true,
+      enableCustomerPortal: true,
+      use: [
+        checkout({
+          products: [
+            {
+              productId: "your-product-id",
+              slug: "pro",
+            },
+          ],
+          successUrl: process.env.POLAR_SUCCESS_URL,
+          authenticatedUsersOnly: true,
+        }),
+        portal(),
+      ],
+    }),
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    expo(),
+    {{/if}}
+  ],
+  {{else}}
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-  , plugins: [expo()]
+  plugins: [expo()],
+  {{/if}}
   {{/if}}
 });
 {{/if}}

package/templates/auth/better-auth/web/nuxt/app/pages/dashboard.vue.hbs

@@ -11,9 +11,28 @@ definePageMeta({
 const { $orpc } = useNuxtApp()
 
 const session = $authClient.useSession()
+{{#if (eq payments "polar")}}
+const customerState = ref<any>(null)
+{{/if}}
 
 {{#if (eq api "orpc")}}
-const privateData = useQuery($orpc.privateData.queryOptions())
+const privateData = useQuery({
+  ...$orpc.privateData.queryOptions(),
+  enabled: computed(() => !!session.value?.data?.user)
+})
+{{/if}}
+
+{{#if (eq payments "polar")}}
+onMounted(async () => {
+  if (session.value?.data) {
+    const { data } = await $authClient.customer.state()
+    customerState.value = data
+  }
+})
+
+const hasProSubscription = computed(() => 
+  customerState.value?.activeSubscriptions?.length! > 0
+)
 {{/if}}
 
 </script>
@@ -27,7 +46,22 @@ const privateData = useQuery($orpc.privateData.queryOptions())
     {{#if (eq api "orpc")}}
     <div v-if="privateData.status.value === 'pending'">Loading private data...</div>
     <div v-else-if="privateData.status.value === 'error'">Error loading private data: \{{ privateData.error.value?.message }}</div>
-    <p v-else-if="privateData.data.value">Private Data: \{{ privateData.data.value.message }}</p>
+    <p v-else-if="privateData.data.value">API: \{{ privateData.data.value.message }}</p>
+    {{/if}}
+    {{#if (eq payments "polar")}}
+    <p class="mb-2">Plan: \{{ hasProSubscription ? "Pro" : "Free" }}</p>
+    <UButton 
+      v-if="hasProSubscription"
+      @click="() => { $authClient.customer.portal() }"
+    >
+      Manage Subscription
+    </UButton>
+    <UButton 
+      v-else
+      @click="() => { $authClient.checkout({ slug: 'pro' }) }"
+    >
+      Upgrade to Pro
+    </UButton>
     {{/if}}
   </div>
 </template>

package/templates/auth/better-auth/web/nuxt/app/plugins/auth-client.ts.hbs

@@ -0,0 +1,22 @@
+import { createAuthClient } from "better-auth/vue";
+{{#if (eq payments "polar")}}
+import { polarClient } from "@polar-sh/better-auth";
+{{/if}}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  const serverUrl = config.public.serverURL;
+
+  const authClient = createAuthClient({
+    baseURL: serverUrl,
+    {{#if (eq payments "polar")}}
+    plugins: [polarClient()],
+    {{/if}}
+  });
+
+  return {
+    provide: {
+      authClient: authClient,
+    },
+  };
+});

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

@@ -1,4 +1,7 @@
 import { createAuthClient } from "better-auth/react";
+{{#if (eq payments "polar")}}
+import { polarClient } from "@polar-sh/better-auth";
+{{/if}}
 
 export const authClient = createAuthClient({
   baseURL:
@@ -7,4 +10,7 @@ export const authClient = createAuthClient({
     {{else}}
       import.meta.env.VITE_SERVER_URL,
     {{/if}}
+{{#if (eq payments "polar")}}
+  plugins: [polarClient()]
+{{/if}}
 });