create-better-t-stack 2.0.11 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "2.0.11",
+  "version": "2.1.0",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "type": "module",
   "license": "MIT",

package/templates/api/orpc/native/utils/orpc.ts.hbs

@@ -0,0 +1,49 @@
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { createORPCReactQueryUtils } from "@orpc/react-query";
+import type { RouterUtils } from "@orpc/react-query";
+import type { RouterClient } from "@orpc/server";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createContext, useContext } from "react";
+import type { appRouter } from "../../server/src/routers";
+{{#if auth}}
+import { authClient } from "@/lib/auth-client";
+{{/if}}
+
+type ORPCReactUtils = RouterUtils<RouterClient<typeof appRouter>>;
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      console.log(error)
+    },
+  }),
+});
+
+export const link = new RPCLink({
+  url: `${process.env.EXPO_PUBLIC_SERVER_URL}/rpc`,
+  {{#if auth}}
+  headers() {
+    const headers = new Map<string, string>();
+    const cookies = authClient.getCookie();
+    if (cookies) {
+      headers.set("Cookie", cookies);
+    }
+    return Object.fromEntries(headers);
+  },
+  {{/if}}
+});
+
+export const client: RouterClient<typeof appRouter> = createORPCClient(link);
+
+export const orpc = createORPCReactQueryUtils(client);
+
+export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined);
+
+export function useORPC(): ORPCReactUtils {
+  const orpc = useContext(ORPCContext);
+  if (!orpc) {
+    throw new Error("ORPCContext is not set up properly");
+  }
+  return orpc;
+}

package/templates/api/orpc/web/nuxt/app/plugins/orpc.ts.hbs

@@ -0,0 +1,35 @@
+import { defineNuxtPlugin, useRuntimeConfig } from '#app'
+import type { RouterClient } from '@orpc/server'
+import type { appRouter } from "../../../server/src/routers/index";
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { createORPCVueQueryUtils } from '@orpc/vue-query'
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig()
+  const serverUrl = config.public.serverURL
+
+  const rpcUrl = `${serverUrl}/rpc`;
+
+  const rpcLink = new RPCLink({
+    url: rpcUrl,
+    {{#if auth}}
+    fetch(url, options) {
+        return fetch(url, {
+        ...options,
+        credentials: "include",
+        });
+    },
+    {{/if}}
+  })
+
+
+  const client: RouterClient<typeof appRouter> = createORPCClient(rpcLink)
+  const orpcUtils = createORPCVueQueryUtils(client)
+
+  return {
+    provide: {
+      orpc: orpcUtils
+    }
+  }
+})

package/templates/{auth/native/utils/trpc.ts → api/trpc/native/utils/trpc.ts.hbs}

@@ -1,4 +1,6 @@
+{{#if auth}}
 import { authClient } from "@/lib/auth-client";
+{{/if}}
 import { QueryClient } from "@tanstack/react-query";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
@@ -10,6 +12,7 @@ const trpcClient = createTRPCClient<AppRouter>({
 	links: [
 		httpBatchLink({
 			url: `${process.env.EXPO_PUBLIC_SERVER_URL}/trpc`,
+			{{#if auth}}
 			headers() {
 				const headers = new Map<string, string>();
 				const cookies = authClient.getCookie();
@@ -18,6 +21,7 @@ const trpcClient = createTRPCClient<AppRouter>({
 				}
 				return Object.fromEntries(headers);
 			},
+			{{/if}}
 		}),
 	],
 });

package/templates/api/trpc/web/{base → react/base}/src/utils/trpc.ts.hbs

@@ -3,7 +3,7 @@
 import { QueryCache, QueryClient } from '@tanstack/react-query';
 import { createTRPCClient, httpBatchLink } from '@trpc/client';
 import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
-import type { AppRouter } from '../../../server/src/routers'; {{! Adjust path if necessary }}
+import type { AppRouter } from '../../../server/src/routers';
 import { toast } from 'sonner';
 
 export const queryClient = new QueryClient({

package/templates/auth/native/app/(drawer)/{index.tsx → index.tsx.hbs}

@@ -5,11 +5,22 @@ import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { Container } from "@/components/container";
 import { SignIn } from "@/components/sign-in";
 import { SignUp } from "@/components/sign-up";
+{{#if (eq api "orpc")}}
+import { queryClient, orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
 import { queryClient, trpc } from "@/utils/trpc";
+{{/if}}
 
 export default function Home() {
+	{{#if (eq api "orpc")}}
+	const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+	const privateData = useQuery(orpc.privateData.queryOptions());
+	{{/if}}
+	{{#if (eq api "trpc")}}
 	const healthCheck = useQuery(trpc.healthCheck.queryOptions());
 	const privateData = useQuery(trpc.privateData.queryOptions());
+	{{/if}}
 	const { data: session } = authClient.useSession();
 
 	return (

package/templates/auth/native/components/{sign-in.tsx → sign-in.tsx.hbs}

@@ -1,5 +1,10 @@
 import { authClient } from "@/lib/auth-client";
+{{#if (eq api "trpc")}}
 import { queryClient } from "@/utils/trpc";
+{{/if}}
+{{#if (eq api "orpc")}}
+import { queryClient } from "@/utils/orpc";
+{{/if}}
 import { useState } from "react";
 import {
 	ActivityIndicator,
@@ -85,4 +90,4 @@ export function SignIn() {
 			</TouchableOpacity>
 		</View>
 	);
-}
+}

package/templates/auth/native/components/{sign-up.tsx → sign-up.tsx.hbs}

@@ -1,5 +1,10 @@
 import { authClient } from "@/lib/auth-client";
+{{#if (eq api "trpc")}}
 import { queryClient } from "@/utils/trpc";
+{{/if}}
+{{#if (eq api "orpc")}}
+import { queryClient } from "@/utils/orpc";
+{{/if}}
 import { useState } from "react";
 import {
 	ActivityIndicator,

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

@@ -1,6 +1,9 @@
 {{#if (eq orm "prisma")}}
 import { betterAuth } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
+{{#if (includes frontend "native")}}
+import { expo } from "@better-auth/expo";
+{{/if}}
 import prisma from "../../prisma";
 
 export const auth = betterAuth({
@@ -9,14 +12,27 @@ export const auth = betterAuth({
     {{#if (eq database "sqlite")}}provider: "sqlite"{{/if}}
     {{#if (eq database "mysql")}}provider: "mysql"{{/if}}
   }),
-  trustedOrigins: [process.env.CORS_ORIGIN || ""],
-  emailAndPassword: { enabled: true }
+  trustedOrigins: [
+    process.env.CORS_ORIGIN || "",{{#if (includes frontend "native")}}
+    "my-better-t-app://",{{/if}}
+  ],
+  emailAndPassword: {
+    enabled: true,
+  }
+
+  {{~#if (includes frontend "native")}}
+  ,
+  plugins: [expo()]
+  {{/if~}}
 });
 {{/if}}
 
 {{#if (eq orm "drizzle")}}
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
+{{#if (includes frontend "native")}}
+import { expo } from "@better-auth/expo";
+{{/if}}
 import { db } from "../db";
 import * as schema from "../db/schema/auth";
 
@@ -25,19 +41,42 @@ export const auth = betterAuth({
     {{#if (eq database "postgres")}}provider: "pg",{{/if}}
     {{#if (eq database "sqlite")}}provider: "sqlite",{{/if}}
     {{#if (eq database "mysql")}}provider: "mysql",{{/if}}
-    schema: schema
+    schema: schema,
   }),
-  trustedOrigins: [process.env.CORS_ORIGIN || ""],
-  emailAndPassword: { enabled: true }
+  trustedOrigins: [
+    process.env.CORS_ORIGIN || "",{{#if (includes frontend "native")}}
+    "my-better-t-app://",{{/if}}
+  ],
+  emailAndPassword: {
+    enabled: true,
+  }
+
+  {{~#if (includes frontend "native")}}
+  ,
+  plugins: [expo()]
+  {{/if~}}
 });
 {{/if}}
 
 {{#if (eq orm "none")}}
 import { betterAuth } from "better-auth";
+{{#if (includes frontend "native")}}
+import { expo } from "@better-auth/expo";
+{{/if}}
 
 export const auth = betterAuth({
-  database: "",
-  trustedOrigins: [process.env.CORS_ORIGIN || ""],
-  emailAndPassword: { enabled: true }
+  database: "", // Invalid configuration
+  trustedOrigins: [
+    process.env.CORS_ORIGIN || "",{{#if (includes frontend "native")}}
+    "my-better-t-app://", // Use hardcoded scheme{{/if}}
+  ],
+  emailAndPassword: {
+    enabled: true,
+  }
+
+  {{~#if (includes frontend "native")}}
+  ,
+  plugins: [expo()]
+  {{/if~}}
 });
-{{/if}}
+{{/if}}

package/templates/auth/web/nuxt/app/components/SignInForm.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { z } from 'zod'
+// import { authClient } from "~/lib/auth-client";
+const {$authClient} = useNuxtApp()
+import type { FormSubmitEvent } from '#ui/types'
+
+const emit = defineEmits(['switchToSignUp'])
+
+const toast = useToast()
+const loading = ref(false)
+
+const schema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive({
+  email: '',
+  password: '',
+})
+
+async function onSubmit (event: FormSubmitEvent<Schema>) {
+  loading.value = true
+  try {
+    await $authClient.signIn.email(
+      {
+        email: event.data.email,
+        password: event.data.password,
+      },
+      {
+        onSuccess: () => {
+          toast.add({ title: 'Sign in successful' })
+          navigateTo('/dashboard', { replace: true })
+        },
+        onError: (error) => {
+          toast.add({ title: 'Sign in failed', description: error.error.message })
+        },
+      },
+    )
+  } catch (error: any) {
+     toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full mt-10 max-w-md p-6">
+    <h1 class="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+
+    <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+      <UFormField label="Email" name="email">
+        <UInput v-model="state.email" type="email" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Password" name="password">
+        <UInput v-model="state.password" type="password" class="w-full" />
+      </UFormField>
+
+      <UButton type="submit" block :loading="loading">
+        Sign In
+      </UButton>
+    </UForm>
+
+    <div class="mt-4 text-center">
+      <UButton
+        variant="link"
+        @click="$emit('switchToSignUp')"
+        class="text-primary hover:text-primary-dark"
+      >
+        Need an account? Sign Up
+      </UButton>
+    </div>
+  </div>
+</template>

package/templates/auth/web/nuxt/app/components/SignUpForm.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '#ui/types'
+// import { authClient } from "~/lib/auth-client";
+const {$authClient} = useNuxtApp()
+
+const emit = defineEmits(['switchToSignIn'])
+
+const toast = useToast()
+const loading = ref(false)
+
+const schema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive({
+  name: '',
+  email: '',
+  password: '',
+})
+
+async function onSubmit (event: FormSubmitEvent<Schema>) {
+  loading.value = true
+  try {
+    await $authClient.signUp.email(
+      {
+        name: event.data.name,
+        email: event.data.email,
+        password: event.data.password,
+      },
+      {
+        onSuccess: () => {
+          toast.add({ title: 'Sign up successful' })
+          navigateTo('/dashboard', { replace: true })
+        },
+        onError: (error) => {
+          toast.add({ title: 'Sign up failed', description: error.error.message })
+        },
+      },
+    )
+  } catch (error: any) {
+     toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full mt-10 max-w-md p-6">
+    <h1 class="mb-6 text-center text-3xl font-bold">Create Account</h1>
+
+    <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+       <UFormField label="Name" name="name">
+        <UInput v-model="state.name" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Email" name="email">
+        <UInput v-model="state.email" type="email" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Password" name="password">
+        <UInput v-model="state.password" type="password" class="w-full" />
+      </UFormField>
+
+      <UButton type="submit" block :loading="loading">
+        Sign Up
+      </UButton>
+    </UForm>
+
+    <div class="mt-4 text-center">
+      <UButton
+        variant="link"
+        @click="$emit('switchToSignIn')"
+        class="text-primary hover:text-primary-dark"
+      >
+        Already have an account? Sign In
+      </UButton>
+    </div>
+  </div>
+</template>

package/templates/auth/web/nuxt/app/components/UserMenu.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+// import { authClient } from "~/lib/auth-client";
+const {$authClient} = useNuxtApp()
+const session = $authClient.useSession()
+const toast = useToast()
+
+const handleSignOut = async () => {
+  try {
+    await $authClient.signOut({
+      fetchOptions: {
+        onSuccess: async () => {
+          toast.add({ title: 'Signed out successfully' })
+          await navigateTo('/', { replace: true, external: true })
+        },
+        onError: (error) => {
+           toast.add({ title: 'Sign out failed', description: error?.error?.message || 'Unknown error'})
+        }
+      },
+    })
+  } catch (error: any) {
+     toast.add({ title: 'An unexpected error occurred during sign out', description: error.message || 'Please try again.'})
+  }
+}
+</script>
+
+<template>
+  <div>
+    <USkeleton v-if="session.isPending" class="h-9 w-24" />
+
+    <UButton v-else-if="!session.data" variant="outline" to="/login">
+      Sign In
+    </UButton>
+
+    <UButton
+      v-else
+      variant="solid"
+      icon="i-lucide-log-out"
+      label="Sign out"
+      @click="handleSignOut()"
+    />
+  </div>
+</template>

package/templates/auth/web/nuxt/app/middleware/auth.ts

@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (import.meta.server) return
+
+  const { $authClient } = useNuxtApp()
+  const session = $authClient.useSession()
+
+  if (session.value.isPending || !session.value) {
+    if (to.path === "/dashboard") {
+      return navigateTo("/login");
+    }
+  }
+});

package/templates/auth/web/nuxt/app/pages/dashboard.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+const {$authClient} = useNuxtApp()
+
+definePageMeta({
+  middleware: ['auth']
+})
+
+const { $orpc } = useNuxtApp()
+
+const session = $authClient.useSession()
+
+const privateData = useQuery($orpc.privateData.queryOptions())
+
+</script>
+
+<template>
+  <div class="container mx-auto p-4">
+      <h1 class="text-2xl font-bold mb-4">Dashboard</h1>
+     <div v-if="session?.data?.user">
+        <p class="mb-2">Welcome {{ session.data.user.name }}</p>
+     </div>
+        <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>
+  </div>
+</template>

package/templates/auth/web/nuxt/app/pages/login.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { $authClient } = useNuxtApp();
+import SignInForm from "~/components/SignInForm.vue";
+import SignUpForm from "~/components/SignUpForm.vue";
+
+const session = $authClient.useSession();
+const showSignIn = ref(true);
+
+watchEffect(() => {
+  if (!session?.value.isPending && session?.value.data) {
+    navigateTo("/dashboard", { replace: true });
+  }
+});
+</script>
+
+<template>
+  <div>
+    <Loader v-if="session.isPending" />
+    <div v-else-if="!session.data">
+      <SignInForm v-if="showSignIn" @switch-to-sign-up="showSignIn = false" />
+      <SignUpForm v-else @switch-to-sign-in="showSignIn = true" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+import { createAuthClient } from "better-auth/vue";
+
+export default defineNuxtPlugin(nuxtApp => {
+  const config = useRuntimeConfig()
+  const serverUrl = config.public.serverURL
+
+  const authClient = createAuthClient({
+    baseURL: serverUrl
+  })
+
+  return {
+    provide: {
+      authClient: authClient
+    }
+  }
+})

package/templates/backend/express/src/index.ts.hbs

@@ -39,6 +39,8 @@ app.use(
 app.all("/api/auth{/*path}", toNodeHandler(auth));
 {{/if}}
 
+app.use(express.json())
+
 {{#if (eq api "trpc")}}
 app.use(
   "/trpc",

package/templates/examples/ai/web/nuxt/app/pages/ai.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useChat } from '@ai-sdk/vue'
+
+const config = useRuntimeConfig()
+const serverUrl = config.public.serverURL
+
+const { messages, input, handleSubmit } = useChat({
+  api: `${serverUrl}/ai`,
+})
+
+const messagesEndRef = ref<null | HTMLDivElement>(null)
+
+watch(messages, async () => {
+  await nextTick()
+  messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
+})
+
+// Helper: Concatenate all text parts for a message
+function getMessageText(message: any) {
+  return message.parts
+    .filter((part: any) => part.type === 'text')
+    .map((part: any) => part.text)
+    .join('')
+}
+</script>
+
+<template>
+  <div class="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
+    <div class="overflow-y-auto space-y-4 pb-4">
+      <div v-if="messages.length === 0" class="text-center text-muted-foreground mt-8">
+        Ask me anything to get started!
+      </div>
+      <div
+        v-for="message in messages"
+        :key="message.id"
+        :class="[
+          'p-3 rounded-lg',
+          message.role === 'user' ? 'bg-primary/10 ml-8' : 'bg-secondary/20 mr-8'
+        ]"
+      >
+        <p class="text-sm font-semibold mb-1">
+          {{ message.role === 'user' ? 'You' : 'AI Assistant' }}
+        </p>
+        <div class="whitespace-pre-wrap">{{ getMessageText(message) }}</div>
+      </div>
+      <div ref="messagesEndRef" />
+    </div>
+
+    <form @submit.prevent="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
+      <UInput
+        name="prompt"
+        v-model="input"
+        placeholder="Type your message..."
+        class="flex-1"
+        autocomplete="off"
+        autofocus
+      />
+      <UButton type="submit" color="primary" size="md" square>
+        <UIcon name="i-lucide-send" class="w-5 h-5" />
+      </UButton>
+    </form>
+  </div>
+</template>