vite proxy configuration, onAuthChange store, auto login and some more

Author: aster-void

.env.sample

@@ -1,18 +1,18 @@
 # Config
-PUBLIC_SERVER_URL=http://localhost:4000
 PUBLIC_MOCK_DATA=true
-SERVER_PORT=4000 # optional, server port (alias: PORT, PUBLIC_SERVER_URL.port) (defaults to 4000 if none are specified)
 
-# Secrets
-PUBLIC_X_ANON_KEY=...
-X_API_KEY=...
+# 開発中 -> Vite: BASE_URL.port, Elysia: EXTERNAL_SERVER_PORT
+# プロダクション: Vite: - , Elysia: PORT ?? BASE_URL.port
+BASE_URL=http://localhost:3000
+EXTERNAL_SERVER_PORT=4000
 
+NODE_ENV=development
+
+# Database
 DATABASE_URL=file:../../local.db
 
+# Better Auth
 BETTER_AUTH_SECRET=...
-BETTER_AUTH_URL=http://localhost:4000
 
 GOOGLE_CLIENT_ID=...
 GOOGLE_CLIENT_SECRET=
-
-PUBLIC_WEB_URL=http://localhost:3000

docs/developer_readme.md

@@ -16,11 +16,11 @@ bun db push
 
 ```bash
 # 開発モードを実行するには、以下のコマンドを実行してください。
-# localhost:5173 に Vite サーバーが立ち上がるので、そこで確認してください。
+# $BASE_URL に Vite サーバーが立ち上がるので、そこで確認してください。
 bun dev
 
 # Storybookの使用
-# localhost:6006にStorybookが立ち上がるので、そこでUIを確認してください。
+# localhost:6006 にStorybookが立ち上がるので、そこでUIを確認してください。
 bun run storybook
 ```
 
@@ -36,28 +36,26 @@ bun check
 bun fix
 ```
 
-## モックモード
+## サーバー構成
 
-モックモードを実行するには、以下のコマンドを実行してください。
+### 1. 開発中
 
-```bash
-bun dev:mock
-```
+- Vite 開発サーバー (localhost:3000) -> すべてのリクエストはこのサーバーがプロキシ (ログインのリダイレクトを除く)
+- Elysia サーバー (localhost:4000) -> /api 以下のリクエストをプロキシされて受け取る
 
-このコマンドを実行すると、モックデータを使用してアプリケーションが実行されます。
+### 2. プロダクション
 
-## 関数やクラスの説明
+- Elysia サーバー (localhost:${PORT}) -> /api 以外は public/index.html を返す
 
-### 1. Userのデータを扱う場合 (src/app/utils/user.ts)
+## モックモード
 
-Userのデータは`User`クラスを使用して扱います。Userのデータは以下の場合があります。
+モックモードを実行するには、以下のコマンドを実行してください。
 
-- `bun dev:mock`を実行した場合
-  - Userはモックのデータが使用されます。
-- `bun dev`を実行した場合
-  - UserはlocalStorageに保存されたデータが使用されます。
+```bash
+PUBLIC_MOCK_DATA=true bun dev
+```
 
-ただ、まだユーザを登録する機能がないので、mockでユーザを作成する必要があります。
+このコマンドを実行すると、モックデータを使用してアプリケーションが実行されます。
 
 ## 推奨 VS Code 設定
 

packages/models/models.ts

@@ -13,8 +13,8 @@ import {
   Stream,
 } from "./atoms.ts";
 
-export type User = typeof User.static;
-export const User = t.Object({
+export type UserData = typeof UserData.static;
+export const UserData = t.Object({
   stream: Stream,
   grade: t.Number(),
   classNumber: t.Number(),

packages/server/app.ts

@@ -1,12 +1,13 @@
 import { cors } from "@elysiajs/cors";
 import { Elysia } from "elysia";
-import { betterAuth } from "@/lib/auth.ts";
+import { auth, betterAuth } from "./lib/auth.ts";
 import coursesRouter from "./router/courses.ts";
 import usersRouter from "./router/users.ts";
 
 export const app = new Elysia({
   prefix: "/api",
 })
+  .mount(auth.handler)
   .use(cors())
   .use(betterAuth)
   .use(coursesRouter)

packages/server/db/schema.ts

@@ -24,19 +24,9 @@ export const userData = sqliteTable("user_data", {
   stream: text("stream"),
   grade: integer("grade"),
   classNumber: integer("class_number"),
-});
-export const userCourse = sqliteTable("user_courses", {
-  id: text("id").primaryKey(),
-  userId: text("user_id")
-    .notNull()
-    .references(() => user.id, { onDelete: "cascade" }),
-  code: text("code").notNull(),
+  courses: text("courses", { mode: "json" }).notNull(),
 });
 export const userRelations = relations(user, ({ one }) => ({
-  courses: one(userCourse, {
-    fields: [user.id],
-    references: [userCourse.userId],
-  }),
   data: one(userData, {
     fields: [user.id],
     references: [userData.userId],

packages/server/lib/auth.ts

@@ -6,6 +6,7 @@ import * as schema from "../db/schema.ts";
 import { env } from "../lib/env.ts";
 
 export const auth = betterAuth({
+  baseURL: env.BASE_URL,
   database: drizzleAdapter(db, {
     provider: "sqlite",
     schema: schema,
@@ -16,27 +17,25 @@ export const auth = betterAuth({
       clientSecret: env.GOOGLE_CLIENT_SECRET,
     },
   },
-  trustedOrigins: [env.PUBLIC_WEB_URL],
+  trustedOrigins: [env.BASE_URL],
   advanced: {
     cookiePrefix: "x_utcode_syllabus_",
   },
 });
 
-const betterAuthMacro = new Elysia({ name: "better-auth" })
-  .mount(auth.handler)
-  .macro({
-    auth: {
-      async resolve({ status, request: { headers } }) {
-        const session = await auth.api.getSession({
-          headers,
-        });
-        if (!session) return status(401);
+const betterAuthMacro = new Elysia({ name: "better-auth" }).macro({
+  auth: {
+    async resolve({ status, request: { headers } }) {
+      const session = await auth.api.getSession({
+        headers,
+      });
+      if (!session) return status(401);
 
-        return {
-          user: session.user,
-          session: session.session,
-        };
-      },
+      return {
+        user: session.user,
+        session: session.session,
+      };
     },
-  });
+  },
+});
 export { betterAuthMacro as betterAuth };

packages/server/lib/env.ts

@@ -1,14 +1,20 @@
 import * as e from "./utils/environment.ts";
+import { panic } from "./utils/panic.ts";
 
 export const env = {
   DATABASE_URL: e.string("DATABASE_URL"),
-  PUBLIC_WEB_URL: e.string("PUBLIC_WEB_URL"),
   GOOGLE_CLIENT_ID: e.string("GOOGLE_CLIENT_ID"),
   GOOGLE_CLIENT_SECRET: e.string("GOOGLE_CLIENT_SECRET"),
 
-  SERVER_PORT: e.string_optional("SERVER_PORT"),
-  PORT: e.string_optional("PORT"),
-  PUBLIC_SERVER_URL: e.string_optional("PUBLIC_SERVER_URL"),
+  LISTEN_PORT: getListenPort() ?? panic("[env] Port to listen not found"),
+  BASE_URL: e.string("BASE_URL"),
 
   PUBLIC_MOCK_DATA: e.boolean("PUBLIC_MOCK_DATA"),
 };
+
+function getListenPort() {
+  if (e.string("NODE_ENV") === "development") {
+    return e.string_optional("EXTERNAL_SERVER_PORT");
+  }
+  return e.string_optional("PORT") ?? new URL(e.string("BASE_URL")).port;
+}

packages/server/lib/utils/environment.ts

@@ -19,3 +19,13 @@ export function boolean(name: string, fallback?: boolean): boolean {
   if (fallback !== undefined) return fallback;
   panic(`Environment variable ${name} not found`);
 }
+
+export function array(name: string, splitter: string): string[] {
+  return string(name).split(splitter);
+}
+export function array_optional(
+  name: string,
+  splitter: string,
+): string[] | undefined {
+  return string_optional(name)?.split(splitter);
+}

packages/server/router/users.ts

@@ -1,7 +1,11 @@
+import { CourseCode, UserData } from "@packages/models";
+import { Value } from "@sinclair/typebox/value";
 import { eq } from "drizzle-orm";
-import Elysia from "elysia";
-import { db } from "@/db/client";
-import { betterAuth } from "@/lib/auth.ts";
+import Elysia, { status, t } from "elysia";
+import { db } from "../db/client.ts";
+import { userData } from "../db/schema.ts";
+import { betterAuth } from "../lib/auth.ts";
+import type { SelectUser } from "../types.ts";
 
 const router = new Elysia({
   prefix: "/users",
@@ -14,14 +18,49 @@ const router = new Elysia({
         where: (user) => eq(user.id, currentUserId),
         with: {
           data: true,
-          courses: true,
         },
       });
-      return fullUser;
+      if (!fullUser) return status(404, "User not found");
+
+      try {
+        if (fullUser.data) {
+          Value.Assert(t.Array(CourseCode), fullUser.data.courses);
+        }
+        return <SelectUser>fullUser;
+      } catch {
+        // it's not recoverable - reset courses
+        console.error("Failed to parse courses:", fullUser.data?.courses);
+        await db
+          .update(userData)
+          .set({
+            courses: [],
+          })
+          .where(eq(userData.userId, currentUserId));
+        return status(500, "Internal server error: Failed to parse courses");
+      }
+    },
+    {
+      auth: true,
+    },
+  )
+  .put(
+    "/me/data",
+    async ({ user: { id: currentUserId }, body }) => {
+      await db
+        .update(userData)
+        .set({
+          stream: body.stream,
+          grade: body.grade,
+          classNumber: body.classNumber,
+          courses: body.courses,
+        })
+        .where(eq(userData.userId, currentUserId));
     },
     {
       auth: true,
+      body: UserData,
     },
   );
+// TODO: 画像を更新する
 
 export default router;

packages/server/serve.ts

@@ -1,15 +1,6 @@
 import { app } from "./app.ts";
 import { env } from "./lib/env.ts";
 
-const port =
-  env.SERVER_PORT ?? env.PORT ?? parsePort(env.PUBLIC_SERVER_URL) ?? "4000";
-
-app.listen(port, () =>
-  console.log(`Server started at http://localhost:${port}`),
+app.listen(env.LISTEN_PORT, () =>
+  console.log(`Server started at http://localhost:${env.LISTEN_PORT}`),
 );
-
-function parsePort(urlstr: string | undefined) {
-  if (!urlstr) return undefined;
-  const url = new URL(urlstr);
-  return url.port;
-}