feat: update web ui

.gitignore

@@ -44,3 +44,4 @@ apps/core/dist
 
 drizzle/*.js
 packages/*/dist
+.vite

.vscode/settings.json

@@ -12,7 +12,10 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "editor.codeActionsOnSave": {},
   "material-icon-theme.activeIconPack": "nest",
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.experimental.updateImportsOnPaste": true,
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit"
+  }
+}

apps/core/.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {},
+  "material-icon-theme.activeIconPack": "nest",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.preferTypeOnlyAutoImports": false,
+}

apps/core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@meta-muse/core",
+  "name": "App (Core)",
   "version": "0.0.1",
   "private": true,
   "packageManager": "[email protected]",
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "@auth/drizzle-adapter": "1.4.1",
-    "@meta-muse/complied": "workspace:*",
-    "@meta-muse/drizzle": "workspace:*",
-    "@meta-muse/utils": "workspace:*",
+    "@packages/complied": "workspace:*",
+    "@packages/drizzle": "workspace:*",
+    "@packages/utils": "workspace:*",
     "@nestjs/cache-manager": "2.2.2",
     "@nestjs/common": "10.3.10",
     "@nestjs/config": "3.2.3",
@@ -37,7 +37,6 @@
     "@socket.io/redis-adapter": "8.3.0",
     "@socket.io/redis-emitter": "5.1.0",
     "axios": "1.7.2",
-    "bcryptjs": "2.4.3",
     "cache-manager": "5.7.2",
     "cache-manager-ioredis": "2.1.0",
     "chalk": "^4",
@@ -49,12 +48,9 @@
     "dotenv": "16.4.5",
     "dotenv-expand": "11.0.6",
     "drizzle-zod": "0.5.1",
-    "jsonwebtoken": "9.0.2",
     "lodash": "4.17.21",
     "nestjs-pretty-logger": "0.3.1",
     "nestjs-zod": "3.0.0",
-    "passport": "0.7.0",
-    "passport-jwt": "4.0.1",
     "redis": "4.6.15",
     "reflect-metadata": "0.2.2",
     "rxjs": "7.8.1",
@@ -66,11 +62,8 @@
   "devDependencies": {
     "@nestjs/cli": "10.4.2",
     "@nestjs/schematics": "10.1.2",
-    "@types/bcryptjs": "2.4.6",
     "@types/cache-manager": "4.0.6",
-    "@types/jsonwebtoken": "9.0.6",
     "@types/lodash": "4.17.6",
-    "@types/passport-jwt": "4.0.1",
     "@types/supertest": "6.0.2",
     "@types/ua-parser-js": "0.7.39",
     "fastify": "^4.28.1",

apps/core/src/common/guards/auth.guard.ts

@@ -1,6 +1,7 @@
 /* eslint-disable dot-notation */
 import { isTest } from '@core/global/env.global'
 import { AuthService } from '@core/modules/auth/auth.service'
+import { createNotifyManager } from '@core/shared/utils/schedule.util'
 
 import { getNestExecutionContextRequest } from '@core/transformers/get-req.transformer'
 import {

apps/core/src/main.ts

@@ -2,7 +2,7 @@
 import { name } from '../package.json'
 import { register } from './global/index.global'
 
-process.title = `${name}(${process.env.NODE_ENV || 'unknown'})`
+process.title = `${name} - ${process.env.NODE_ENV || 'unknown'}`
 async function main() {
   register()
   const { bootstrap } = await import('./bootstrap')

apps/core/src/modules/auth/auth.config.ts

@@ -1,6 +1,6 @@
 import { API_VERSION, AUTH } from '@core/app.config'
 import { isDev } from '@core/global/env.global'
-import { DrizzleAdapter, authjs } from '@meta-muse/complied'
+import { DrizzleAdapter, authjs } from '@packages/complied'
 
 import { db } from '@core/processors/database/database.service'
 import {
@@ -9,7 +9,7 @@ import {
   sessions,
   users,
   verificationTokens,
-} from '@meta-muse/drizzle/schema'
+} from '@packages/drizzle/schema'
 import { type ServerAuthConfig } from './auth.implement'
 
 const {
@@ -30,6 +30,9 @@ export const authConfig: ServerAuthConfig = {
       clientSecret: AUTH.github.clientSecret,
     }),
   ],
+  experimental: {
+    enableWebAuthn: true,
+  },
   adapter: DrizzleAdapter(db, {
     usersTable: users,
     accountsTable: accounts,

apps/core/src/modules/auth/auth.implement.deprated.ts

@@ -4,7 +4,7 @@ import {
   type Session,
   createActionURL,
   setEnvDefaults,
-} from '@meta-muse/complied'
+} from '@packages/complied'
 
 import { API_VERSION } from '@core/app.config'
 import { isDev } from '@core/global/env.global'

apps/core/src/modules/auth/auth.implement.ts

@@ -1,56 +1,15 @@
-import {
-  Auth,
-  createActionURL,
-  setEnvDefaults,
-  type AuthConfig,
-  type Session,
-} from '@meta-muse/complied'
+import { Auth, setEnvDefaults, type AuthConfig } from '@packages/complied'
 
-import { API_VERSION } from '@core/app.config'
-import { isDev } from '@core/global/env.global'
 import type { IncomingMessage, ServerResponse } from 'http'
-import { getRequest } from './req.util'
+import { getRequest } from './req.transformer'
 
-export type ServerAuthConfig = Omit<AuthConfig, 'raw'>
-export type GetSessionResult = Promise<Session | null>
-export async function getSessionBase(
-  req: IncomingMessage,
-  config: ServerAuthConfig,
-) {
-  setEnvDefaults(process.env, config)
-
-  const protocol = (req.headers['x-forwarded-proto'] || 'http') as string
-  const url = createActionURL(
-    'session',
-    protocol,
-    // @ts-expect-error
-
-    new Headers(req.headers),
-    process.env,
-    config.basePath,
-  )
-
-  const response = await Auth(
-    new Request(url, { headers: { cookie: req.headers.cookie ?? '' } }),
-    config,
-  )
-
-  const { status = 200 } = response
-
-  const data = await response.json()
-
-  if (!data || !Object.keys(data).length) return null
-  if (status === 200) return data
-}
-
-function getBasePath() {
-  return isDev ? '/auth' : `/api/v${API_VERSION}/auth`
+export type ServerAuthConfig = Omit<AuthConfig, 'basePath'> & {
+  basePath: string
 }
 
 export function CreateAuth(config: ServerAuthConfig) {
   return async (req: IncomingMessage, res: ServerResponse) => {
     try {
-      config.basePath = getBasePath()
       setEnvDefaults(process.env, config)
 
       const auth = await Auth(await toWebRequest(req), config)
@@ -64,7 +23,7 @@ export function CreateAuth(config: ServerAuthConfig) {
   }
 }
 
-export async function toWebRequest(req: IncomingMessage) {
+async function toWebRequest(req: IncomingMessage) {
   const host = req.headers.host || 'localhost'
   const protocol = req.headers['x-forwarded-proto'] || 'http'
   const base = `${protocol}://${host}`

apps/core/src/modules/auth/auth.service.ts

@@ -1,22 +1,56 @@
 import { Injectable } from '@nestjs/common'
-import { getSessionBase, ServerAuthConfig } from './auth.implement'
+import { ServerAuthConfig } from './auth.implement'
 
-import type { Session } from '@meta-muse/complied'
+import {
+  Auth,
+  createActionURL,
+  setEnvDefaults,
+  type Session,
+} from '@packages/complied'
 import { IncomingMessage } from 'http'
+import type { users } from '@packages/drizzle/schema'
 
 export interface SessionUser {
   sessionToken: string
   userId: string
   expires: string
+  user: typeof users.$inferSelect
 }
 @Injectable()
 export class AuthService {
   constructor(private readonly authConfig: ServerAuthConfig) {}
 
+  private async getSessionBase(req: IncomingMessage, config: ServerAuthConfig) {
+    setEnvDefaults(process.env, config)
+
+    const protocol = (req.headers['x-forwarded-proto'] || 'http') as string
+    const url = createActionURL(
+      'session',
+      protocol,
+      // @ts-expect-error
+
+      new Headers(req.headers),
+      process.env,
+      config.basePath,
+    )
+
+    const response = await Auth(
+      new Request(url, { headers: { cookie: req.headers.cookie ?? '' } }),
+      config,
+    )
+
+    const { status = 200 } = response
+
+    const data = await response.json()
+
+    if (!data || !Object.keys(data).length) return null
+    if (status === 200) return data
+  }
+
   getSessionUser(req: IncomingMessage) {
     const { authConfig } = this
     return new Promise<SessionUser | null>((resolve) => {
-      getSessionBase(req, {
+      this.getSessionBase(req, {
         ...authConfig,
         callbacks: {
           ...authConfig.callbacks,

apps/core/src/processors/database/database.service.ts

@@ -1,5 +1,5 @@
 import { DATABASE } from '@core/app.config'
-import { createDrizzle, migrateDb } from '@meta-muse/drizzle'
+import { createDrizzle, migrateDb } from '@packages/drizzle'
 import { Injectable, OnModuleInit } from '@nestjs/common'
 // const drizzleLogger = new Logger('')
 

apps/core/tsconfig.json

@@ -13,7 +13,7 @@
       "@core/*": [
         "./src/*"
       ],
-      "@meta-muse/utils": [
+      "@packages/utils": [
         "../../packages/utils"
       ]
     },

apps/web/index.html

@@ -1,13 +1,27 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
+
+    <script>
+      ;(function () {
+        var e =
+            window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches,
+          t = localStorage.getItem('theme') || '"system"'
+        t && t !== '"system"' && (document.documentElement.dataset.theme = t)
+        t &&
+          t === '"system"' &&
+          e &&
+          (document.documentElement.dataset.theme = 'dark')
+      })()
+    </script>
   </head>
-  <body>
-    <div id="root"></div>
+  <body class="flex min-h-screen flex-col">
+    <div id="root" class="flex min-h-full grow flex-col"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

apps/web/package.json

@@ -16,12 +16,16 @@
   },
   "dependencies": {
     "@auth/core": "0.34.1",
+    "@headlessui/react": "2.1.2",
+    "@packages/drizzle": "workspace:*",
+    "@radix-ui/react-avatar": "1.1.0",
     "@tanstack/react-query": "5.51.1",
     "clsx": "2.1.1",
     "framer-motion": "11.3.2",
     "immer": "10.1.1",
     "jotai": "2.9.0",
     "lodash-es": "4.17.21",
+    "next-themes": "0.3.0",
     "ofetch": "1.3.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",

apps/web/readme.md

@@ -10,6 +10,7 @@ This template provide toolchain below:
 - TailwindCSS 3
 - daisyui
 - React Router DOM (auto generated routes)
+- Auth.js
 
 # Usage
 
@@ -20,4 +21,3 @@ pnpm dev
 
 # Screenshot
 
-![](https://i.imgur.com/ftvsXYB.png)

apps/web/src/api/session.ts

@@ -0,0 +1,7 @@
+import type { Session } from '@auth/core/types'
+
+import { apiFetch } from '~/lib/api-fetch'
+
+export const getSession = async () => {
+  return apiFetch<Session>('/auth/session')
+}

apps/web/src/components/common/ErrorElement.tsx

@@ -35,12 +35,12 @@ export function ErrorElement() {
     <div className="m-auto flex min-h-full max-w-prose select-text flex-col p-8 pt-12">
       <div className="fixed inset-x-0 top-0 h-12" />
       <div className="center flex flex-col">
-        <i className="i-mgc-bug-cute-re size-12 text-red-400" />
+        <i className="i-mingcute-bug-fill size-12 text-red-400" />
         <h2 className="mt-12 text-2xl">
           Sorry, the app has encountered an error
         </h2>
       </div>
-      <h3 className="text-xl">{message}</h3>
+      <h3 className="my-4 text-xl">{message}</h3>
       {import.meta.env.DEV && stack ? (
         <div className="mt-4 cursor-text overflow-auto whitespace-pre rounded-md bg-red-50 p-4 text-left font-mono text-sm text-red-600">
           {attachOpenInEditor(stack)}

apps/web/src/hooks/biz/useSession.ts

@@ -1,12 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { users } from '@packages/drizzle/schema'
+
 import { apiFetch } from '~/lib/api-fetch'
 
 export const useSession = () => {
   const { data, isLoading, error } = useQuery({
     queryKey: ['auth', 'session'],
     queryFn: async () => {
-      return apiFetch('/users/me', {
+      return apiFetch<typeof users.$inferSelect>('/users/me', {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',