tvi-cli 0.1.4

package/templates/api/trpc/server/base/src/lib/context.ts.hbs

@@ -0,0 +1,127 @@
+{{#if (eq backend 'next')}}
+import type { NextRequest } from "next/server";
+{{#if auth}}
+import { auth } from "./auth";
+{{/if}}
+
+export async function createContext(req: NextRequest) {
+{{#if auth}}
+  const session = await auth.api.getSession({
+    headers: req.headers,
+  });
+  return {
+    session,
+  };
+{{else}}
+  // No auth configured
+  return {
+    session: null,
+  };
+{{/if}}
+}
+
+{{else if (eq backend 'hono')}}
+import type { Context as HonoContext } from "hono";
+{{#if auth}}
+import { auth } from "./auth";
+{{/if}}
+
+export type CreateContextOptions = {
+  context: HonoContext;
+};
+
+export async function createContext({ context }: CreateContextOptions) {
+{{#if auth}}
+  const session = await auth.api.getSession({
+    headers: context.req.raw.headers,
+  });
+  return {
+    session,
+  };
+{{else}}
+  // No auth configured
+  return {
+    session: null,
+  };
+{{/if}}
+}
+
+{{else if (eq backend 'elysia')}}
+import type { Context as ElysiaContext } from "elysia";
+{{#if auth}}
+import { auth } from "./auth";
+{{/if}}
+
+export type CreateContextOptions = {
+  context: ElysiaContext;
+};
+
+export async function createContext({ context }: CreateContextOptions) {
+{{#if auth}}
+  const session = await auth.api.getSession({
+    headers: context.request.headers,
+  });
+  return {
+    session,
+  };
+{{else}}
+  // No auth configured
+  return {
+    session: null,
+  };
+{{/if}}
+}
+
+{{else if (eq backend 'express')}}
+import type { CreateExpressContextOptions } from "@trpc/server/adapters/express";
+{{#if auth}}
+import { fromNodeHeaders } from "better-auth/node";
+import { auth } from "./auth";
+{{/if}}
+
+export async function createContext(opts: CreateExpressContextOptions) {
+{{#if auth}}
+	const session = await auth.api.getSession({
+		headers: fromNodeHeaders(opts.req.headers),
+	});
+	return {
+		session,
+	};
+{{else}}
+  // No auth configured
+	return {
+		session: null,
+	};
+{{/if}}
+}
+
+{{else if (eq backend 'fastify')}}
+import type { CreateFastifyContextOptions } from "@trpc/server/adapters/fastify";
+{{#if auth}}
+import { fromNodeHeaders } from "better-auth/node";
+import { auth } from "./auth";
+{{/if}}
+
+export async function createContext({ req, res }: CreateFastifyContextOptions) {
+{{#if auth}}
+  const session = await auth.api.getSession({
+    headers: fromNodeHeaders(req.headers),
+  });
+  return { session };
+{{else}}
+  // No auth configured
+	return {
+		session: null,
+	};
+{{/if}}
+}
+
+{{else}}
+export async function createContext() {
+  return {
+    session: null,
+  };
+}
+{{/if}}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

package/templates/api/trpc/server/base/src/lib/trpc.ts.hbs

@@ -0,0 +1,26 @@
+import { initTRPC, TRPCError } from "@trpc/server";
+import type { Context } from "./context";
+
+export const t = initTRPC.context<Context>().create();
+
+export const router = t.router;
+
+export const publicProcedure = t.procedure;
+
+{{#if auth}}
+export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
+  if (!ctx.session) {
+    throw new TRPCError({
+      code: "UNAUTHORIZED",
+      message: "Authentication required",
+      cause: "No session",
+    });
+  }
+  return next({
+    ctx: {
+      ...ctx,
+      session: ctx.session,
+    },
+  });
+});
+{{/if}}

package/templates/api/trpc/server/next/src/app/trpc/[trpc]/route.ts

@@ -0,0 +1,14 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { appRouter } from '@/routers';
+import { createContext } from '@/lib/context';
+import { NextRequest } from 'next/server';
+
+function handler(req: NextRequest) {
+  return fetchRequestHandler({
+    endpoint: '/trpc',
+    req,
+    router: appRouter,
+    createContext: () => createContext(req)
+  });
+}
+export { handler as GET, handler as POST };

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

@@ -0,0 +1,97 @@
+{{#if (includes frontend 'next')}}
+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';
+import { toast } from 'sonner';
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      {{#if (includes frontend 'next')}}
+      url: `${process.env.NEXT_PUBLIC_SERVER_URL}/trpc`,
+      {{else}}
+      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+      {{/if}}
+      {{#if auth}}
+      fetch(url, options) {
+        return fetch(url, {
+          ...options,
+          credentials: "include",
+        });
+      },
+      {{/if}}
+    }),
+  ],
+})
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});
+
+{{else if (includes frontend 'tanstack-start')}}
+import { createTRPCContext } from "@trpc/tanstack-react-query";
+import type { AppRouter } from "../../../server/src/routers";
+
+export const { TRPCProvider, useTRPC, useTRPCClient } =
+  createTRPCContext<AppRouter>();
+
+{{else}}
+import type { AppRouter } from "../../../server/src/routers";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import { toast } from "sonner";
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+export const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+      {{#if auth}}
+      fetch(url, options) {
+        return fetch(url, {
+          ...options,
+          credentials: "include",
+        });
+      },
+      {{/if}}
+    }),
+  ],
+});
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});
+{{/if}}

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

@@ -0,0 +1,13 @@
+import { createAuthClient } from "better-auth/react";
+import { expoClient } from "@better-auth/expo/client";
+import * as SecureStore from "expo-secure-store";
+
+export const authClient = createAuthClient({
+  baseURL: process.env.EXPO_PUBLIC_SERVER_URL,
+  plugins: [
+    expoClient({
+      storagePrefix: "my-tvi-app",
+      storage: SecureStore,
+    }),
+  ],
+});

package/templates/auth/native/nativewind/app/(drawer)/index.tsx.hbs

@@ -0,0 +1,95 @@
+import { authClient } from "@/lib/auth-client";
+import { useQuery } from "@tanstack/react-query";
+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 (
+		<Container>
+			<ScrollView className="flex-1">
+				<View className="px-4">
+					<Text className="font-mono text-foreground text-3xl font-bold mb-4">
+						TVI
+					</Text>
+					{session?.user ? (
+						<View className="mb-6 p-4 bg-card rounded-lg border border-border">
+							<View className="flex-row justify-between items-center mb-2">
+								<Text className="text-foreground text-base">
+									Welcome,{" "}
+									<Text className="font-medium">{session.user.name}</Text>
+								</Text>
+							</View>
+							<Text className="text-muted-foreground text-sm mb-4">
+								{session.user.email}
+							</Text>
+
+							<TouchableOpacity
+								className="bg-destructive py-2 px-4 rounded-md self-start"
+								onPress={() => {
+									authClient.signOut();
+									queryClient.invalidateQueries();
+								}}
+							>
+								<Text className="text-white font-medium">Sign Out</Text>
+							</TouchableOpacity>
+						</View>
+					) : null}
+					<View className="mb-6 rounded-lg border border-border p-4">
+						<Text className="mb-3 font-medium text-foreground">API Status</Text>
+						<View className="flex-row items-center gap-2">
+							<View
+								className={`h-3 w-3 rounded-full ${
+									healthCheck.data ? "bg-green-500" : "bg-red-500"
+								}`}
+							/>
+							<Text className="text-muted-foreground">
+								{healthCheck.isLoading
+									? "Checking..."
+									: healthCheck.data
+										? "Connected to API"
+										: "API Disconnected"}
+							</Text>
+						</View>
+					</View>
+					<View className="mb-6 rounded-lg border border-border p-4">
+						<Text className="mb-3 font-medium text-foreground">
+							Private Data
+						</Text>
+						{privateData && (
+							<View>
+								<Text className="text-muted-foreground">
+									{privateData.data?.message}
+								</Text>
+							</View>
+						)}
+					</View>
+					{!session?.user && (
+						<>
+							<SignIn />
+							<SignUp />
+						</>
+					)}
+				</View>
+			</ScrollView>
+		</Container>
+	);
+}

package/templates/auth/native/nativewind/components/sign-in.tsx.hbs

@@ -0,0 +1,93 @@
+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,
+	Text,
+	TextInput,
+	TouchableOpacity,
+	View,
+} from "react-native";
+
+export function SignIn() {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleLogin = async () => {
+		setIsLoading(true);
+		setError(null);
+
+		await authClient.signIn.email(
+			{
+				email,
+				password,
+			},
+			{
+				onError: (error) => {
+					setError(error.error?.message || "Failed to sign in");
+					setIsLoading(false);
+				},
+				onSuccess: () => {
+					setEmail("");
+					setPassword("");
+					queryClient.refetchQueries();
+				},
+				onFinished: () => {
+					setIsLoading(false);
+				},
+			},
+		);
+	};
+
+	return (
+		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
+			<Text className="text-lg font-semibold text-foreground mb-4">
+				Sign In
+			</Text>
+
+			{error && (
+				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
+					<Text className="text-destructive text-sm">{error}</Text>
+				</View>
+			)}
+
+			<TextInput
+				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				placeholderTextColor="#9CA3AF"
+				keyboardType="email-address"
+				autoCapitalize="none"
+			/>
+
+			<TextInput
+				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Password"
+				value={password}
+				onChangeText={setPassword}
+				placeholderTextColor="#9CA3AF"
+				secureTextEntry
+			/>
+
+			<TouchableOpacity
+				onPress={handleLogin}
+				disabled={isLoading}
+				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
+			>
+				{isLoading ? (
+					<ActivityIndicator size="small" color="#fff" />
+				) : (
+					<Text className="text-primary-foreground font-medium">Sign In</Text>
+				)}
+			</TouchableOpacity>
+		</View>
+	);
+}

package/templates/auth/native/nativewind/components/sign-up.tsx.hbs

@@ -0,0 +1,104 @@
+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,
+	Text,
+	TextInput,
+	TouchableOpacity,
+	View,
+} from "react-native";
+
+export function SignUp() {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleSignUp = async () => {
+		setIsLoading(true);
+		setError(null);
+
+		await authClient.signUp.email(
+			{
+				name,
+				email,
+				password,
+			},
+			{
+				onError: (error) => {
+					setError(error.error?.message || "Failed to sign up");
+					setIsLoading(false);
+				},
+				onSuccess: () => {
+					setName("");
+					setEmail("");
+					setPassword("");
+					queryClient.refetchQueries();
+				},
+				onFinished: () => {
+					setIsLoading(false);
+				},
+			},
+		);
+	};
+
+	return (
+		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
+			<Text className="text-lg font-semibold text-foreground mb-4">
+				Create Account
+			</Text>
+
+			{error && (
+				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
+					<Text className="text-destructive text-sm">{error}</Text>
+				</View>
+			)}
+
+			<TextInput
+				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Name"
+				value={name}
+				onChangeText={setName}
+				placeholderTextColor="#9CA3AF"
+			/>
+
+			<TextInput
+				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				placeholderTextColor="#9CA3AF"
+				keyboardType="email-address"
+				autoCapitalize="none"
+			/>
+
+			<TextInput
+				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
+				placeholder="Password"
+				value={password}
+				onChangeText={setPassword}
+				placeholderTextColor="#9CA3AF"
+				secureTextEntry
+			/>
+
+			<TouchableOpacity
+				onPress={handleSignUp}
+				disabled={isLoading}
+				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
+			>
+				{isLoading ? (
+					<ActivityIndicator size="small" color="#fff" />
+				) : (
+					<Text className="text-primary-foreground font-medium">Sign Up</Text>
+				)}
+			</TouchableOpacity>
+		</View>
+	);
+}