@kevinmarrec/create-app 0.4.0 → 0.6.0

package/template/backend/src/{server.ts → main.ts}

@@ -1,30 +1,22 @@
 import process from 'node:process'
 
-import { onError } from '@orpc/server'
-import { RPCHandler } from '@orpc/server/fetch'
-import { CORSPlugin } from '@orpc/server/plugins'
-
-import { cors, hostname, port } from './config/server'
-import { db } from './database'
-import { logger } from './logger'
-import { router } from './router'
-
-const rpcHandler = new RPCHandler(router, {
-  plugins: [new CORSPlugin(cors)],
-  interceptors: [
-    onError((error) => {
-      logger.error(error)
-    }),
-  ],
-})
+import { createBetterAuth } from '@backend/auth'
+import { db } from '@backend/database'
+import { createRpcHandler } from '@backend/orpc'
+import { router } from '@backend/orpc/router'
+import { logger } from '@backend/utils/logger'
+
+const auth = createBetterAuth({ db, logger })
+const rpcHandler = createRpcHandler(router)
 
 const server = Bun.serve({
-  hostname,
-  port,
+  hostname: import.meta.env.HOST ?? '0.0.0.0',
+  port: import.meta.env.PORT ?? 4000,
   async fetch(request) {
     const { matched, response } = await rpcHandler.handle(request, {
       prefix: '/rpc',
       context: {
+        auth,
         db,
         logger,
       },
@@ -43,6 +35,8 @@ const server = Bun.serve({
 
 logger.info(`Listening on ${server.url}`)
 
+// Graceful Shutdown
+
 async function gracefulShutdown() {
   logger.info('Gracefully shutting down...')
   await server.stop()

package/template/backend/src/orpc/index.ts

@@ -0,0 +1,65 @@
+import type { Auth } from '@backend/auth'
+import type { Database } from '@backend/database'
+import { requiredAuthMiddleware } from '@backend/orpc/middlewares'
+import type { Logger } from '@backend/utils/logger'
+import { onError, ORPCError, os, type Router } from '@orpc/server'
+import { RPCHandler } from '@orpc/server/fetch'
+import {
+  CORSPlugin,
+  RequestHeadersPlugin,
+  type RequestHeadersPluginContext,
+  ResponseHeadersPlugin,
+  type ResponseHeadersPluginContext,
+} from '@orpc/server/plugins'
+import { APIError } from 'better-auth/api'
+
+/* Context */
+
+export interface Context extends RequestHeadersPluginContext, ResponseHeadersPluginContext {
+  auth: Auth
+  db: Database
+  logger: Logger
+}
+
+/* RPC Handler */
+
+export function createRpcHandler<T extends Context>(router: Router<any, T>) {
+  return new RPCHandler<T>(router, {
+    plugins: [
+      new CORSPlugin({
+        credentials: true,
+        maxAge: 7200, // 2 hours https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Max-Age
+      }),
+      new RequestHeadersPlugin(),
+      new ResponseHeadersPlugin(),
+    ],
+    clientInterceptors: [
+      onError((error, { context }) => {
+        if (error instanceof APIError) {
+          throw new ORPCError(error.body?.code ?? 'INTERNAL_SERVER_ERROR', {
+            status: error.statusCode,
+            message: error.body?.message,
+          })
+        }
+
+        if (error instanceof ORPCError) {
+          throw error
+        }
+
+        context.logger.error(error)
+      }),
+    ],
+  })
+}
+
+/* Builder */
+
+export const pub = os
+  .$context<Context>()
+  .errors({
+    UNAUTHORIZED: { status: 401 },
+  })
+
+/** @beta */
+export const authed = pub
+  .use(requiredAuthMiddleware)

package/template/backend/src/orpc/middlewares/auth.ts

@@ -0,0 +1,33 @@
+import type { Context } from '@backend/orpc'
+import { ORPCError, os } from '@orpc/server'
+
+export const authMiddleware = os
+  .$context<Context>()
+  .middleware(async ({ context, next }) => {
+    const { headers, response: session } = await context.auth.api.getSession({
+      headers: context.reqHeaders ?? new Headers(),
+      returnHeaders: true,
+    })
+
+    headers.forEach((v, k) => context.resHeaders?.append(k, v))
+
+    return next({
+      context: {
+        user: session ? session.user : null,
+      },
+    })
+  })
+
+export const requiredAuthMiddleware = authMiddleware
+  .concat(async ({ context, next }) => {
+    if (!context.user) {
+      throw new ORPCError('UNAUTHORIZED')
+    }
+
+    return next({
+      context: {
+        user: context.user,
+      },
+    })
+  },
+  )

package/template/backend/src/orpc/middlewares/index.ts

@@ -0,0 +1 @@
+export * from './auth'

package/template/backend/src/orpc/router/auth.ts

@@ -0,0 +1,54 @@
+import { pub } from '@backend/orpc'
+import { authMiddleware } from '@backend/orpc/middlewares'
+import * as v from 'valibot'
+
+export const getCurrentUser = pub
+  .use(authMiddleware)
+  .handler(async ({ context }) => context.user)
+
+export const signUp = pub
+  .input(v.object({
+    name: v.string(),
+    email: v.pipe(v.string(), v.email()),
+    password: v.string(),
+    rememberMe: v.optional(v.boolean(), true),
+  }))
+  .handler(async ({ input, context: { resHeaders, auth } }) => {
+    const { headers, response } = await auth.api.signUpEmail({
+      body: input,
+      returnHeaders: true,
+    })
+
+    headers.forEach((v, k) => resHeaders?.append(k, v))
+
+    return response.user
+  })
+
+export const signIn = pub
+  .input(v.object({
+    email: v.pipe(v.string(), v.email()),
+    password: v.string(),
+    rememberMe: v.optional(v.boolean(), true),
+  }))
+  .handler(async ({ input, context: { resHeaders, auth } }) => {
+    const { headers, response } = await auth.api.signInEmail({
+      body: input,
+      returnHeaders: true,
+    })
+
+    headers.forEach((v, k) => resHeaders?.append(k, v))
+
+    return response.user
+  })
+
+export const signOut = pub
+  .handler(async ({ context: { auth, reqHeaders, resHeaders } }) => {
+    const { headers, response } = await auth.api.signOut({
+      headers: reqHeaders ?? new Headers(),
+      returnHeaders: true,
+    })
+
+    headers.forEach((v, k) => resHeaders?.append(k, v))
+
+    return response
+  })

package/template/backend/src/{router → orpc/router}/index.ts

@@ -1,9 +1,9 @@
-import { welcome } from './welcome'
+import * as auth from './auth'
 
 export type { RouterClient } from '@orpc/server'
 
 export const router = {
-  welcome,
+  auth,
 }
 
 export type Router = typeof router

package/template/backend/src/{logger.ts → utils/logger.ts}

@@ -1,9 +1,7 @@
 import pino from 'pino'
 
-import { level } from './config/logger'
-
 export const logger = pino({
-  level,
+  level: import.meta.env.LOG_LEVEL ?? 'info',
   base: {},
 })
 

package/template/frontend/package.json

@@ -9,26 +9,25 @@
     "preview": "vite preview --open"
   },
   "dependencies": {
-    "@kevinmarrec/vue-i18n": "^1.0.0",
-    "@orpc/client": "^1.8.6",
+    "@kevinmarrec/vue-i18n": "^1.1.0",
+    "@orpc/client": "^1.8.9",
     "@orpc/tanstack-query": "1.6.4",
-    "@tanstack/vue-query": "^5.85.6",
-    "@unhead/vue": "^2.0.14",
-    "@vueuse/core": "^13.9.0",
-    "unocss": "^66.5.0",
-    "vue": "^3.5.20"
+    "@tanstack/vue-query": "^5.89.0",
+    "@unhead/vue": "^2.0.17",
+    "unocss": "^66.5.1",
+    "vue": "^3.5.21"
   },
   "devDependencies": {
-    "@kevinmarrec/unocss-config": "^1.1.0",
-    "@kevinmarrec/vite-plugin-dark-mode": "^1.0.0",
+    "@kevinmarrec/unocss-config": "^1.3.0",
+    "@kevinmarrec/vite-plugin-dark-mode": "^1.1.0",
     "@modyfi/vite-plugin-yaml": "^1.1.1",
-    "@unhead/addons": "^2.0.14",
-    "@unocss/vite": "^66.5.0",
+    "@unhead/addons": "^2.0.17",
+    "@unocss/vite": "^66.5.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "beasties": "^0.3.5",
     "rollup-plugin-visualizer": "^6.0.3",
-    "vite": "^7.1.4",
-    "vite-plugin-vue-devtools": "^8.0.1",
+    "vite": "^7.1.6",
+    "vite-plugin-vue-devtools": "^8.0.2",
     "vite-ssg": "^28.1.0",
     "vite-tsconfig-paths": "^5.1.4"
   }

package/template/frontend/src/App.vue

@@ -1,25 +1,111 @@
 <script setup lang="ts">
-import { useHead, useI18n } from '@frontend/composables'
-import { useWelcome } from '@frontend/queries'
+import { useAuth, useHead, useI18n } from '@frontend/composables'
+import { ref } from 'vue'
 
 const { t } = useI18n()
-
 useHead({
   title: () => t('title'),
 })
 
-const { data: message } = useWelcome('world')
+const { user, signUp, signIn, signOut } = useAuth()
+
+const email = ref('')
+const password = ref('')
 </script>
 
 <template>
   <div class="grid h-full place-items-center">
     <div class="flex flex-col gap-4 items-center">
-      <h1 class="text-4xl font-bold">
-        {{ t('body.message') }}
-      </h1>
-      <h2 class="text-2xl text-gray-500">
-        {{ message }}
-      </h2>
+      <!-- Login Form (when user is not logged in) -->
+      <div v-if="!user" class="mx-auto max-w-md w-full">
+        <div class="p-8 rounded-lg bg-white shadow-lg dark:bg-gray-800">
+          <h2 class="text-2xl text-gray-900 font-bold mb-6 text-center dark:text-white">
+            Welcome Back
+          </h2>
+
+          <form class="space-y-4" @submit.prevent>
+            <div>
+              <label for="email" class="text-sm text-gray-700 font-medium mb-2 block dark:text-gray-300">
+                Email
+              </label>
+              <input
+                id="email"
+                v-model="email"
+                type="email"
+                class="px-3 py-2 border border-gray-300 rounded-md w-full shadow-sm dark:text-white focus:outline-none dark:border-gray-600 focus:border-blue-500 dark:bg-gray-700 focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your email"
+                required
+              >
+            </div>
+
+            <div>
+              <label for="password" class="text-sm text-gray-700 font-medium mb-2 block dark:text-gray-300">
+                Password
+              </label>
+              <input
+                id="password"
+                v-model="password"
+                type="password"
+                class="px-3 py-2 border border-gray-300 rounded-md w-full shadow-sm dark:text-white focus:outline-none dark:border-gray-600 focus:border-blue-500 dark:bg-gray-700 focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your password"
+                required
+              >
+            </div>
+
+            <div v-if="signIn.error.value || signUp.error.value" class="text-sm text-red-600 dark:text-red-400">
+              {{ signIn.error.value || signUp.error.value }}
+            </div>
+
+            <div class="flex space-x-3">
+              <button
+                :disabled="signIn.isPending.value"
+                class="text-white font-medium px-4 py-2 rounded-md bg-blue-600 flex-1 transition-colors duration-200 disabled:bg-blue-400 hover:bg-blue-700"
+                @click="signIn.mutate({ email, password })"
+              >
+                <span v-if="signIn.isPending.value">Signing In...</span>
+                <span v-else>Sign In</span>
+              </button>
+
+              <button
+                :disabled="signUp.isPending.value"
+                class="text-white font-medium px-4 py-2 rounded-md bg-green-600 flex-1 transition-colors duration-200 disabled:bg-green-400 hover:bg-green-700"
+                @click="signUp.mutate({ email, password, name: 'User' })"
+              >
+                <span v-if="signUp.isPending.value">Signing Up...</span>
+                <span v-else>Sign Up</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <!-- User Dashboard (when user is logged in) -->
+      <div v-else class="mx-auto max-w-md w-full">
+        <div class="p-8 text-center rounded-lg bg-white shadow-lg dark:bg-gray-800">
+          <div class="mb-6">
+            <div class="mx-auto mb-4 rounded-full flex h-20 w-20 items-center justify-center from-blue-500 to-purple-600 bg-gradient-to-r">
+              <span class="text-2xl text-white font-bold">
+                {{ user.name?.charAt(0).toUpperCase() || 'U' }}
+              </span>
+            </div>
+            <h2 class="text-2xl text-gray-900 font-bold dark:text-white">
+              Welcome, {{ user.name || 'User' }}!
+            </h2>
+            <p class="text-gray-600 mt-2 dark:text-gray-400">
+              {{ user.email }}
+            </p>
+          </div>
+
+          <button
+            :disabled="signOut.isPending.value"
+            class="text-white font-medium px-4 py-2 rounded-md bg-red-600 w-full transition-colors duration-200 disabled:bg-red-400 hover:bg-red-700"
+            @click="signOut.mutate({})"
+          >
+            <span v-if="signOut.isPending.value">Signing Out...</span>
+            <span v-else>Sign Out</span>
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/template/frontend/src/composables/auth.ts

@@ -0,0 +1,31 @@
+import { orpc } from '@frontend/lib/orpc'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+
+export function useAuth() {
+  const qc = useQueryClient()
+
+  const { data: user } = useQuery(orpc.auth.getCurrentUser.queryOptions({
+    retry: false,
+  }))
+
+  const signUp = useMutation(orpc.auth.signUp.mutationOptions({
+    onSuccess: () => qc.invalidateQueries({ queryKey: orpc.auth.getCurrentUser.queryKey() }),
+  }))
+
+  const signIn = useMutation(orpc.auth.signIn.mutationOptions({
+    onSuccess: () => qc.invalidateQueries({ queryKey: orpc.auth.getCurrentUser.queryKey() }),
+  }))
+
+  const signOut = useMutation(orpc.auth.signOut.mutationOptions({
+    onSuccess: () => {
+      qc.setQueryData<null>(orpc.auth.getCurrentUser.queryKey(), null)
+    },
+  }))
+
+  return {
+    user,
+    signUp,
+    signIn,
+    signOut,
+  }
+}

package/template/frontend/src/composables/index.ts

@@ -1,2 +1,3 @@
+export { useAuth } from './auth'
 export { useI18n } from '@kevinmarrec/vue-i18n'
 export { useHead } from '@unhead/vue'

package/template/frontend/src/lib/orpc.ts

@@ -1,10 +1,15 @@
-import type { Router, RouterClient } from '@backend/router'
+import type { Router, RouterClient } from '@backend/orpc/router'
 import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
 
 const link = new RPCLink({
   url: import.meta.env.VITE_API_URL,
+  fetch: (request, init) =>
+    globalThis.fetch(request, {
+      ...init,
+      credentials: 'include',
+    }),
 })
 
 const client: RouterClient<Router> = createORPCClient(link)

package/template/knip.config.ts

@@ -12,7 +12,7 @@ export default {
     },
     'backend': {
       drizzle: {
-        config: ['src/config/drizzle.ts'],
+        config: 'src/database/drizzle/config.ts',
       },
       ignoreDependencies: ['pino-pretty'],
     },

package/template/package.json

@@ -2,7 +2,7 @@
   "name": "app",
   "type": "module",
   "private": true,
-  "packageManager": "bun@1.2.21",
+  "packageManager": "bun@1.2.22",
   "engines": {
     "node": "lts/*"
   },
@@ -21,15 +21,15 @@
     "lint:inspect": "bunx @eslint/config-inspector"
   },
   "devDependencies": {
-    "@kevinmarrec/eslint-config": "^1.1.0",
-    "@kevinmarrec/stylelint-config": "^1.0.0",
-    "@kevinmarrec/tsconfig": "^1.0.0",
+    "@kevinmarrec/eslint-config": "^1.5.0",
+    "@kevinmarrec/stylelint-config": "^1.2.0",
+    "@kevinmarrec/tsconfig": "^1.1.0",
     "concurrently": "^9.2.1",
-    "eslint": "^9.34.0",
-    "knip": "^5.63.0",
-    "stylelint": "^16.23.1",
-    "taze": "^19.4.0",
+    "eslint": "^9.36.0",
+    "knip": "^5.63.1",
+    "stylelint": "^16.24.0",
+    "taze": "^19.7.0",
     "typescript": "~5.9.2",
-    "vue-tsc": "^3.0.6"
+    "vue-tsc": "^3.0.7"
   }
 }

package/template/backend/src/config/database.ts

@@ -1,11 +0,0 @@
-import * as v from 'valibot'
-
-const schema = v.object({
-  url: v.string(),
-})
-
-const config = v.parse(schema, {
-  url: import.meta.env.DATABASE_URL,
-})
-
-export const url = config.url

package/template/backend/src/config/drizzle.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'drizzle-kit'
-
-import { url } from './database'
-
-export default defineConfig({
-  dialect: 'sqlite',
-  dbCredentials: { url },
-  schema: './src/database/schema',
-  out: './src/database/migrations',
-})

package/template/backend/src/config/logger.ts

@@ -1,19 +0,0 @@
-import * as v from 'valibot'
-
-const schema = v.object({
-  level: v.optional(v.union([
-    v.literal('trace'),
-    v.literal('debug'),
-    v.literal('info'),
-    v.literal('warn'),
-    v.literal('error'),
-    v.literal('fatal'),
-    v.literal('silent'),
-  ]), 'info'),
-})
-
-const config = v.parse(schema, {
-  level: import.meta.env.LOG_LEVEL,
-})
-
-export const level = config.level

package/template/backend/src/config/server.ts

@@ -1,40 +0,0 @@
-import * as v from 'valibot'
-
-const schema = v.object({
-  cors: v.object({
-    origin: v.optional(
-      v.pipe(
-        v.string(),
-        v.minLength(1),
-        v.transform(value => value.split(',')),
-      ),
-      '*',
-    ),
-  }),
-  hostname: v.optional(
-    v.pipe(
-      v.string(),
-      v.minLength(1),
-    ),
-    'localhost',
-  ),
-  port: v.optional(v.pipe(
-    v.string(),
-    v.transform(value => +value),
-    v.number(),
-    v.minValue(3000),
-    v.maxValue(65535),
-  ), '4000'),
-})
-
-const config = v.parse(schema, {
-  cors: {
-    origin: import.meta.env.ALLOWED_ORIGINS,
-  },
-  hostname: import.meta.env.HOST,
-  port: import.meta.env.PORT,
-})
-
-export const cors = config.cors
-export const hostname = config.hostname
-export const port = config.port

package/template/backend/src/database/migrations/0000_white_bishop.sql

@@ -1,6 +0,0 @@
-CREATE TABLE `users` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`name` text NOT NULL,
-	`createdAt` integer NOT NULL,
-	`updatedAt` integer NOT NULL
-);

package/template/backend/src/lib/orpc.ts

@@ -1,10 +0,0 @@
-import type { Database } from '@backend/database'
-import type { Logger } from '@backend/logger'
-import { os } from '@orpc/server'
-
-interface Context {
-  db: Database
-  logger: Logger
-}
-
-export const pub = os.$context<Context>()

package/template/backend/src/router/welcome.ts

@@ -1,11 +0,0 @@
-import { users } from '@backend/database/schema'
-import { pub } from '@backend/lib/orpc'
-import * as v from 'valibot'
-
-export const welcome = pub
-  .input(v.string())
-  .output(v.string())
-  .handler(async ({ input, context: { db } }) => {
-    const count = await db.$count(users)
-    return `Hello ${input} (${count})`
-  })

package/template/frontend/src/queries/index.ts

@@ -1 +0,0 @@
-export * from './welcome'

package/template/frontend/src/queries/welcome.ts

@@ -1,10 +0,0 @@
-import { orpc } from '@frontend/lib/orpc'
-import { get } from '@frontend/utils'
-import { useQuery } from '@tanstack/vue-query'
-import { computed, type MaybeRef } from 'vue'
-
-export function useWelcome(text: MaybeRef<string>) {
-  return useQuery(computed(() => orpc.welcome.queryOptions({
-    input: get(text),
-  })))
-}

package/template/frontend/src/utils.ts

@@ -1 +0,0 @@
-export { get } from '@vueuse/core'