move nuxt middleware from server to nuxt

Dockerfile.dev

@@ -1,8 +1,8 @@
-# As a workaround we have to build on nodejs 18
-# nodejs 20 hangs on build with armv6/armv7
-FROM docker.io/library/node:20-alpine
+FROM docker.io/library/node:lts-alpine
 WORKDIR /app
 
+# update corepack
+RUN npm install --global corepack@latest
 # Install pnpm
 RUN corepack enable pnpm
 

package.json

@@ -5,5 +5,5 @@
     "dev": "docker compose -f docker-compose.dev.yml up --build",
     "build": "docker build -t wg-easy ."
   },
-  "packageManager": "pnpm@9.15.4"
+  "packageManager": "pnpm@10.2.0"
 }

src/app/middleware/auth.global.ts

@@ -0,0 +1,28 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  // api & setup handled server side
+  if (to.path.startsWith('/api/') || to.path.startsWith('/setup')) {
+    return;
+  }
+
+  const authStore = useAuthStore();
+  const userData = await authStore.getSession();
+
+  // skip login if already logged in
+  if (to.path === '/login') {
+    if (userData?.username) {
+      return navigateTo('/', { redirectCode: 302 });
+    }
+    return;
+  }
+  // Require auth for every page other than Login
+  if (!userData?.username) {
+    return navigateTo('/login', { redirectCode: 302 });
+  }
+
+  // Check for admin access
+  if (to.path.startsWith('/admin')) {
+    if (userData.role !== roles.ADMIN) {
+      return abortNavigation('Not allowed to access Admin Panel');
+    }
+  }
+});

src/app/stores/auth.ts

@@ -3,6 +3,17 @@ export const useAuthStore = defineStore('Auth', () => {
     method: 'get',
   });
 
+  async function getSession() {
+    try {
+      const { data } = await useFetch('/api/session', {
+        method: 'get',
+      });
+      return data.value;
+    } catch {
+      return null;
+    }
+  }
+
   /**
    * @throws if unsuccessful
    */
@@ -24,5 +35,5 @@ export const useAuthStore = defineStore('Auth', () => {
     return response.success;
   }
 
-  return { userData, login, logout, update };
+  return { userData, login, logout, update, getSession };
 });

src/package.json

@@ -20,27 +20,27 @@
   "dependencies": {
     "@eschricht/nuxt-color-mode": "^1.1.5",
     "@libsql/client": "^0.14.0",
-    "@nuxtjs/i18n": "^9.1.1",
+    "@nuxtjs/i18n": "^9.1.5",
     "@nuxtjs/tailwindcss": "^6.13.1",
     "@pinia/nuxt": "^0.9.0",
     "@tailwindcss/forms": "^0.5.10",
-    "apexcharts": "^4.3.0",
+    "apexcharts": "^4.4.0",
     "argon2": "^0.41.1",
     "basic-auth": "^2.0.1",
     "cidr-tools": "^11.0.2",
     "crc-32": "^1.2.2",
     "debug": "^4.4.0",
-    "drizzle-orm": "^0.38.4",
+    "drizzle-orm": "^0.39.1",
     "ip-bigint": "^8.2.0",
     "is-cidr": "^5.1.0",
     "is-ip": "^5.0.1",
     "js-sha256": "^0.11.0",
     "lowdb": "^7.0.1",
-    "nuxt": "^3.15.2",
-    "pinia": "^2.3.0",
+    "nuxt": "^3.15.4",
+    "pinia": "^2.3.1",
     "qrcode": "^1.5.4",
-    "radix-vue": "^1.9.12",
-    "semver": "^7.6.3",
+    "radix-vue": "^1.9.13",
+    "semver": "^7.7.1",
     "tailwindcss": "^3.4.17",
     "timeago.js": "^4.0.2",
     "vue": "latest",
@@ -48,17 +48,17 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.7.5",
+    "@nuxt/eslint-config": "^1.0.0",
     "@types/debug": "^4.1.12",
     "@types/qrcode": "^1.5.5",
     "@types/semver": "^7.5.8",
-    "drizzle-kit": "^0.30.2",
-    "eslint": "^9.18.0",
+    "drizzle-kit": "^0.30.4",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "^5.7.3",
     "vue-tsc": "^2.2.0"
   },
-  "packageManager": "pnpm@9.15.4"
+  "packageManager": "pnpm@10.2.0"
 }

src/server/middleware/auth.ts

@@ -1,36 +0,0 @@
-export default defineEventHandler(async (event) => {
-  // TODO: improve, wrapper or smth
-  const url = getRequestURL(event);
-  const session = await useWGSession(event);
-
-  // Api handled by session, Setup handled with setup middleware
-  if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/setup')) {
-    return;
-  }
-
-  if (url.pathname === '/login') {
-    if (session.data.userId) {
-      return sendRedirect(event, '/', 302);
-    }
-    return;
-  }
-
-  // Require auth for every page other than Login
-  // TODO: investigate /__nuxt_error (error page when unauthenticated)
-  if (!session.data.userId) {
-    return sendRedirect(event, '/login', 302);
-  }
-
-  if (url.pathname.startsWith('/admin')) {
-    const user = await Database.users.get(session.data.userId);
-    if (!user) {
-      return sendRedirect(event, '/login', 302);
-    }
-    if (user.role !== roles.ADMIN) {
-      throw createError({
-        statusCode: 403,
-        statusMessage: 'Not allowed to access Admin Panel',
-      });
-    }
-  }
-});