feat: add clerk auth support with convex (#548)

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

@@ -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/better-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>