fix(cli): Add conditional rendering for private data based on API type

Author: AmanVarshney01

.changeset/moody-chefs-follow.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+Add conditional rendering for private data based on API type in dashboard page

apps/cli/src/helpers/project-generation/template-manager.ts

@@ -475,33 +475,16 @@ export async function setupAuthTemplate(
 			} else {
 			}
 		} else if (hasSvelteWeb) {
-			if (context.api === "orpc") {
-				const authWebSvelteSrc = path.join(
-					PKG_ROOT,
-					"templates/auth/web/svelte",
-				);
-				if (await fs.pathExists(authWebSvelteSrc)) {
-					await processAndCopyFiles(
-						"**/*",
-						authWebSvelteSrc,
-						webAppDir,
-						context,
-					);
-				} else {
-				}
+			const authWebSvelteSrc = path.join(PKG_ROOT, "templates/auth/web/svelte");
+			if (await fs.pathExists(authWebSvelteSrc)) {
+				await processAndCopyFiles("**/*", authWebSvelteSrc, webAppDir, context);
+			} else {
 			}
 		} else if (hasSolidWeb) {
-			if (context.api === "orpc") {
-				const authWebSolidSrc = path.join(PKG_ROOT, "templates/auth/web/solid");
-				if (await fs.pathExists(authWebSolidSrc)) {
-					await processAndCopyFiles(
-						"**/*",
-						authWebSolidSrc,
-						webAppDir,
-						context,
-					);
-				} else {
-				}
+			const authWebSolidSrc = path.join(PKG_ROOT, "templates/auth/web/solid");
+			if (await fs.pathExists(authWebSolidSrc)) {
+				await processAndCopyFiles("**/*", authWebSolidSrc, webAppDir, context);
+			} else {
 			}
 		}
 	}

apps/cli/templates/auth/web/nuxt/app/pages/dashboard.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+{{#if (eq api "orpc")}}
+import { useQuery } from '@tanstack/vue-query'
+{{/if}}
+const {$authClient} = useNuxtApp()
+
+definePageMeta({
+  middleware: ['auth']
+})
+
+const { $orpc } = useNuxtApp()
+
+const session = $authClient.useSession()
+
+{{#if (eq api "orpc")}}
+const privateData = useQuery($orpc.privateData.queryOptions())
+{{/if}}
+
+</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>
+    {{#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>
+    {{/if}}
+  </div>
+</template>

apps/cli/templates/auth/web/nuxt/app/pages/dashboard.vue.hbs

@@ -5,7 +5,9 @@ import { orpc } from "@/utils/orpc";
 {{#if (eq api "trpc")}}
 import { trpc } from "@/utils/trpc";
 {{/if}}
+{{#if ( or (eq api "orpc") (eq api "trpc"))}}
 import { useQuery } from "@tanstack/react-query";
+{{/if}}
 import { useEffect } from "react";
 import { useNavigate } from "react-router";
 
@@ -34,7 +36,9 @@ export default function Dashboard() {
     <div>
       <h1>Dashboard</h1>
       <p>Welcome {session?.user.name}</p>
+      {{#if ( or (eq api "orpc") (eq api "trpc"))}}
       <p>privateData: {privateData.data?.message}</p>
+      {{/if}}
     </div>
   );
 }

apps/cli/templates/auth/web/react/react-router/src/routes/dashboard.tsx.hbs

@@ -5,7 +5,9 @@ import { orpc } from "@/utils/orpc";
 {{#if (eq api "trpc")}}
 import { trpc } from "@/utils/trpc";
 {{/if}}
+{{#if ( or (eq api "orpc") (eq api "trpc"))}}
 import { useQuery } from "@tanstack/react-query";
+{{/if}}
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 
@@ -41,7 +43,9 @@ function RouteComponent() {
     <div>
       <h1>Dashboard</h1>
       <p>Welcome {session?.user.name}</p>
+    {{#if ( or (eq api "orpc") (eq api "trpc"))}}
       <p>privateData: {privateData.data?.message}</p>
+    {{/if}}
     </div>
   );
 }

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

@@ -1,11 +1,12 @@
 import { authClient } from "@/lib/auth-client";
 {{#if (eq api "trpc")}}
 import { useTRPC } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
 {{/if}}
 {{#if (eq api "orpc")}}
 import { orpc } from "@/utils/orpc";
-{{/if}}
 import { useQuery } from "@tanstack/react-query";
+{{/if}}
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 
@@ -45,7 +46,9 @@ function RouteComponent() {
     <div>
       <h1>Dashboard</h1>
       <p>Welcome {session?.user.name}</p>
+    {{#if ( or (eq api "orpc") (eq api "trpc"))}}
       <p>privateData: {privateData.data?.message}</p>
+    {{/if}}
     </div>
   );
 }

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

@@ -1,6 +1,8 @@
 import { authClient } from "@/lib/auth-client";
+{{#if (eq api "orpc")}}
 import { orpc } from "@/utils/orpc";
 import { useQuery } from "@tanstack/solid-query";
+{{/if}}
 import { createFileRoute } from "@tanstack/solid-router";
 import { createEffect, Show } from "solid-js";
 
@@ -12,7 +14,9 @@ function RouteComponent() {
   const session = authClient.useSession();
   const navigate = Route.useNavigate();
 
+{{#if (eq api "orpc")}}
   const privateData = useQuery(() => orpc.privateData.queryOptions());
+{{/if}}
 
   createEffect(() => {
     if (!session().data && !session().isPending) {
@@ -31,7 +35,9 @@ function RouteComponent() {
       <Show when={!session().isPending && session().data}>
         <h1>Dashboard</h1>
         <p>Welcome {session().data?.user.name}</p>
+        {{#if (eq api "orpc")}}
         <p>privateData: {privateData.data?.message}</p>
+        {{/if}}
       </Show>
     </div>
   );

apps/cli/templates/auth/web/solid/src/routes/dashboard.tsx renamed to apps/cli/templates/auth/web/solid/src/routes/dashboard.tsx.hbs

@@ -1,15 +1,13 @@
 <script lang="ts">
 	import { authClient } from '$lib/auth-client';
 	import { goto } from '$app/navigation';
-	import { queryClient } from '$lib/orpc';
 
 	const sessionQuery = authClient.useSession();
 
 	async function handleSignOut() {
 		await authClient.signOut({
 		fetchOptions: {
 			onSuccess: () => {
-				queryClient.invalidateQueries();
 				goto('/');
 			},
 			onError: (error) => {

apps/cli/templates/auth/web/svelte/src/components/UserMenu.svelte

@@ -2,13 +2,17 @@
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { authClient } from '$lib/auth-client';
+	{{#if (eq api "orpc")}}
 	import { orpc } from '$lib/orpc';
 	import { createQuery } from '@tanstack/svelte-query';
+	{{/if}}
 	import { get } from 'svelte/store';
 
 	const sessionQuery = authClient.useSession();
 
+	{{#if (eq api "orpc")}}
 	const privateDataQuery = createQuery(orpc.privateData.queryOptions());
+    {{/if}}
 
 	onMount(() => {
 		const { data: session, isPending } = get(sessionQuery);
@@ -21,11 +25,12 @@
 {#if $sessionQuery.isPending}
 	<div>Loading...</div>
 {:else if !$sessionQuery.data}
-	<!-- Redirecting... -->
 {:else}
 	<div>
 		<h1>Dashboard</h1>
 		<p>Welcome {$sessionQuery.data.user.name}</p>
+		{{#if (eq api "orpc")}}
 		<p>privateData: {$privateDataQuery.data?.message}</p>
+		{{/if}}
 	</div>
 {/if}