implemented authentication with sidebase/nuxt-auth

app.vue

@@ -7,14 +7,14 @@
 
 
 <script setup>
-import { createPinia } from "pinia";
-import piniaPluginPersistedState from "pinia-plugin-persistedstate"
+//import { createPinia } from "pinia";
+//import piniaPluginPersistedState from "pinia-plugin-persistedstate"
 
 
 //const layout = "empty";
 //const route = useRoute();
-  const pinia = createPinia();
-  pinia.use(piniaPluginPersistedState);
+//const pinia = createPinia();
+//pinia.use(piniaPluginPersistedState);
 
 
 useHead({

axios.config.js

@@ -1,14 +1,30 @@
-import axios from 'axios';
+import axios, {AxiosError} from 'axios';
+import clientsideConfig from './clientsideConfig'
 
 //create axios instance
 const Axios = axios.create({
-  // baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`,
+  //baseURL: `https://${serversideConfig.url}:${serversideConfig.port}/`,
+  baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
   headers: {
     // 'Accept': 'application/json', 
     'Content-Type': 'application/json',
     //Authorization: `Bearer`,
     Accept: "*",
   },
+  withCredentials: true,
+  credentials: true,
 })
 
+
+Axios.interceptors.response.use((response) => response, (error) => {
+
+  if (error instanceof AxiosError) {
+    console.error('Status: ', error.response?.status, '\nHeaders: '. error.response?.headers, '\nMessage: '. error.response?.data.message)
+  } else { console.error('Error: ', error); };
+
+  if (error.response?.status === 403) { window.location.href = '/login'; };
+
+  return Promise.reject(error);
+});
+
 export default Axios;

backend/controller/users.js

@@ -93,7 +93,15 @@ export const login = async (req, res, next) => {
                 }
                 if (bResult) {
                     // password match
-                    const token = jwt.sign(
+                    const authtoken = jwt.sign(
+                        {
+                            username: result[0].username,
+                            userId: result[0].id,
+                        },
+                        'SECRETTUEITKEY',
+                        { expiresIn: '300s' } // 5min
+                    );
+                    const refreshtoken = jwt.sign(
                         {
                             username: result[0].username,
                             userId: result[0].id,
@@ -115,7 +123,7 @@ export const login = async (req, res, next) => {
                     const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
                     return res.status(200).send({
                         message: 'Logged in!',
-                        token,
+                        token: { authToken: authtoken, refreshToken: refreshtoken },
                         user: result[0],
                     });
                 }

components/LoginForm.vue

@@ -50,6 +50,7 @@ import { ref } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../clientsideConfig.js';
 
+const { signIn } = useAuth()
 const router = useRouter();
 const darkMode = ref(true);
 const isError = ref(false);
@@ -62,13 +63,14 @@ const handleLogin = async () => {
   const username = document.getElementById('username-input').value;
   const password = document.getElementById('password-input').value;
 
-  const requestBody = {
+  //const requestBody = {
+  const credentials = {
     username: username,
     password: password,
   }
 
   try {
-    let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
+    /*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
 
     const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
     sessionToken.value = res.data.token;
@@ -80,7 +82,10 @@ const handleLogin = async () => {
     console.log(res.data.message)
 
     // sucessfully logged in
-    router.push('/home')
+    router.push('/home')*/
+    let res = await signIn( credentials, { callbackUrl: '/home' })
+    console.log("res", res)
+
   } catch (err) {
     // handle the error 
     console.log(err.response.statusText)

composables/UserObject.ts

@@ -0,0 +1,39 @@
+export var UserObjectDefinition: {
+    id: string;
+    username: string;
+    password: string;
+    registered: string;
+    lastLogin: string;
+    fullName: string;
+    email: string;
+    phonenumber: string;
+    address: string;
+    city: string;
+    postcode: string;
+    adminBool: boolean;
+    technician1Bool: boolean;
+    technician2Bool: boolean;
+    technicianMonitoringBool: boolean;
+    merchantBool: boolean;
+    internBool: boolean;
+}
+
+export interface UserObject {
+    id: string;
+    username: string;
+    password: string;
+    registered: string;
+    lastLogin: string;
+    fullName: string;
+    email: string;
+    phonenumber: string;
+    address: string;
+    city: string;
+    postcode: string;
+    adminBool: boolean;
+    technician1Bool: boolean;
+    technician2Bool: boolean;
+    technicianMonitoringBool: boolean;
+    merchantBool: boolean;
+    internBool: boolean;
+}

layouts/PageHeader.vue

@@ -2,7 +2,7 @@
     <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
         <img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
         <div class="profile">
-            <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
+            <pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']" id='uname'></pre>
             <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
                 <img id="picture" loading="lazy" src="" />
             </div>
@@ -12,19 +12,59 @@
 
 
 <script setup>
+import { useAuthStore } from '~/store/auth';
 import { ref } from 'vue';
 
 const darkMode = ref(true)
 
+//const auth = ref();
+const username = ref('username');
+
+onMounted(() => {
+    //auth.value = useAuthStore();
+    //username.value = auth.value.username;
+    try {
+        username.value = useAuthStore().username;
+    } finally {
+        document.getElementById('uname').innerHTML = username;
+    }
+});
+
+onUpdated(() => {
+    try {
+        username.value = useAuthStore().username;
+    } finally {
+        document.getElementById('uname').innerHTML = username;
+    }
+})
+
 </script>
 
+
 <script>
+import { useAuthStore } from '~/store/auth';
+
 export default {
   name: "PageHeader",
+  /*mounted() {
+    try {
+        const auth = useAuthStore();
+        const username = auth.username;
+        document.getElementById('uname').innerHTML = username;
+    } catch {
+        document.getElementById('uname').innerHTML = 'username'
+    }
+  },
+  updated() {
+    const auth = useAuthStore();
+    const username = auth.username;
+    document.getElementById('uname').innerHTML = username;
+  },*/
 }
 </script>
 
 
+
 <style scoped>
 * {
     box-sizing: border-box;

middleware/auth.js

@@ -1,12 +0,0 @@
-export default function ({ route, redirect }) {
-    // Check if user is not authenticated and trying to access a page other than /login
-    if (!isAuthenticated() && route.path !== '/login') {
-        return redirect('/login');
-    }
-}
-  
-function isAuthenticated() {
-    // Implement authentication logic 
-    return false
-    // Return true if authenticated, false otherwise
-}

nuxt-app/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

nuxt-app/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

nuxt-app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>

nuxt-app/nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true }
+})

nuxt-app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.10.3",
+    "vue": "^3.4.19",
+    "vue-router": "^4.3.0"
+  }
+}

nuxt-app/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

nuxt-app/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

nuxt.config.ts

@@ -1,15 +1,52 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import type {
-  NuxtPage
-} from 'nuxt/schema'
+import type { NuxtPage } from 'nuxt/schema'
+import clientsideConfig from './clientsideConfig'
+import { UserObjectDefinition } from './composables/UserObject'
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: [
     '@pinia/nuxt',
-  ],/*
-  buildModules: [
-    '@nuxtjs/composition-api/module',
+    '@sidebase/nuxt-auth',
+  ],
+  auth: {
+    //baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/.output/server/chunks/routes/api/auth`,
+    computed: {
+      origin: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      //pathname: '/server/chunks/routes/api/auth/',
+      //fullBaseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
+    },
+    //baseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
+    provider: {
+      type: 'refresh',
+      endpoints: { 
+        signIn: { path: '/login', method: 'post' },
+        signout: false,
+        signUp: { path: '/signup', method: 'post' },
+        getSession: { path: '/session', method: 'get' },
+        refresh: { path: '/refresh', method: 'post' } 
+      },
+      token: { 
+        signInResponseTokenPointer: '/token/authToken', 
+        maxAgeInSeconds: 300, // 5 min
+        sameSiteAttribute: 'lax'
+      },
+      refreshToken: { 
+        signInResponseRefreshTokenPointer: '/token/refreshToken',
+        maxAgeInSeconds: 604800, // 7 days
+        sameSiteAttribute: 'lax' 
+      },
+      // TODO: define UserObject
+      //sessionDataType:  UserObjectDefinition,
+    },
+    session: {
+      enableRefreshPeriodically: false,
+      enableRefreshOnWindowFocus: true,
+    },
+    globalAppMiddleware: true,
+  },
+  /*buildModules: [
+    //'@nuxtjs/composition-api/module',
     ['@pinia/nuxt', { disableVuex: false }],
   ],*/
   devServer: {
@@ -26,6 +63,19 @@ export default defineNuxtConfig({
       },
     }
   },
+  runtimeConfig: {
+    public: {
+      apiBase: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api`,
+      axios: {
+        browserBaseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      },
+    },
+    private: {
+      axios: {
+        baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      }
+    }
+  },
   // hooks: {
   //   'pages:extend'(pages) {
   //     function setMiddleware(pages: NuxtPage[]) {

package.json

@@ -7,17 +7,22 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "prepare": "nuxt prepare",
+    "cleanup": "nuxt cleanup"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@pinia/nuxt": "^0.5.1",
-    "nuxt": "^3.8.0",
+    "@sidebase/nuxt-auth": "^0.6.7",
+    "nuxt": "^3.10.3",
     "pinia": "^2.1.7",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
+    "@nuxt/module-builder": "^0.5.5",
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/node": "^20.11.24",
     "@vueform/toggle": "^2.1.4",
     "axios": "^1.6.7",
     "bcryptjs": "^2.4.3",
@@ -27,9 +32,12 @@
     "jsonwebtoken": "^9.0.2",
     "leading-trim": "^1.0.2",
     "mariadb": "^3.2.3",
+    "nuxi": "^3.10.1",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "typescript": "^5.3.3",
     "uuid": "^9.0.1",
     "vite": "^5.1.0",
+    "vue-tsc": "^2.0.5",
     "vuex": "^4.1.0"
   }
 }

pages/login.vue

@@ -17,7 +17,8 @@ import LoginForm from "../components/LoginForm.vue";
 
 definePageMeta({
   layout: 'empty',
-  title: 'Login'
+  title: 'Login',
+  auth: false,
 })
 
 const darkMode = ref(true)

plugins/vuex.js

@@ -108,6 +108,36 @@ const store = createStore({
             state.newVersion = ''
             state.newLicense = ''
         },
+
+        // functions to change the production order and maintenance visit pages
+        changeToTemplatelist(state) {
+            state.onTemplatelist = true
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToCustomerTemplatelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = true
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToTemplate(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToInstancelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = true
+            state.onInstance = false
+        },
         doDeleteAsset(state) {
             state.deleteAsset = true
         },

public/icons/actionbar-icons/Attachment-Icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11 5.5-4.8 4.6a4 4 0 0 1-1.9.9c-.9 0-1.6-.1-2.3-.6C1.4 9.8 1 9 1 8c.1-.7.6-1.5 1.2-2l4.7-4.5c.4-.4 1-.6 1.5-.6.6 0 1.2.2 1.6.6.4.3.6.8.6 1.4 0 .5-.2 1.2-.6 1.5L5.2 9.1c-.2.1-.7.5-1 .5-.4 0-1 0-1.3-.3-.4-.4-.5-.7-.4-1.2 0-.5.4-.9.6-1L7 3.4"/>
+</svg>

public/icons/actionbar-icons/Departments-Icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5 7v2c0 .6-.4 1-1 1H2a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3-5v2c0 .6-.4 1-1 1H5a1 1 0 0 1-1-1V2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3 5v2c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm-8 .5V6m3-3.5V1m3 6.5V6"/>
+</svg>

public/icons/actionbar-icons/Employees-Icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M7.5 5.5v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M9.3 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6 2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-5 3v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M2.8 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 9.9v-.5a3 3 0 1 1 6 0v.5"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 6.4A1.7 1.7 0 1 0 6 3a1.7 1.7 0 0 0 0 3.4Z"/>
+</svg>

server/api/auth/login.ts

@@ -0,0 +1,95 @@
+import axios, { AxiosError } from 'axios';
+import serversideConfig from '../../../serversideConfig';
+import https from 'https';
+
+let errorMsg = 'error';
+//const { data } = useAuthState()
+
+
+export default eventHandler(async (event) => {
+
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
+
+
+    const body = await readBody(event)
+
+    // get user object from backend
+    try {
+        let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
+            username: body.username,
+            password: body.password,
+        });
+        const sessionToken = res.data.token;
+        const user = res.data.user;
+
+        console.log('sessionToken: ', sessionToken);
+        console.log('user: ', user);
+
+        setResponseStatus(event, 200);
+        const resBody = {
+            token: sessionToken,
+            message: 'Login successful'
+        };
+        console.log('resBody: ', resBody);
+
+        return resBody;
+    } 
+    catch (err) {
+        if (axios.isAxiosError(err)) {
+            const axiosError = err as AxiosError;
+
+            if (axiosError.response) {
+                // Axios error
+                //console.error(axiosError.response.data.message);
+                //errorMsg = axiosError.response.data.message;
+            } else if (axiosError.request) {
+                // If error was caused by the request
+                console.error(axiosError.request);
+            } else {
+                // Other errors
+                console.error('Error', axiosError.message);
+            }
+        } else {
+            // No AxiosError
+            console.error('Error', err);
+        }
+    }
+    throw createError({
+        statusCode: 400,
+        statusMessage: errorMsg,
+    })
+
+
+})
+
+
+
+/*import { loginSuccessful, sessionToken, errorMsg } from "../../middleware/login";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    if (!loginSuccessful) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200);
+    //setResponseHeader(event, "Set-Cookie", sessionToken);
+    const resBody = {
+        token: sessionToken,
+        message: 'Login successful'
+    };
+    return resBody;
+})*/

server/api/auth/refresh.ts

@@ -0,0 +1,50 @@
+import { createError, eventHandler, readBody, sendRedirect } from 'h3';
+import jwt from 'jsonwebtoken';
+
+const SECRET = 'SECRETTUEITKEY'
+
+interface User {
+  username: string;
+  id: string;
+}
+
+interface JwtPayload extends User {
+  exp: number;
+}
+
+export default eventHandler(async (event) => {
+  const body = await readBody<{ refreshToken: string }>(event);
+
+  if (!body.refreshToken) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Unauthorized, no refreshToken in payload'
+    });
+  };
+
+  const decoded = jwt.verify(body.refreshToken, SECRET) as JwtPayload | undefined;
+
+  if (!decoded) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Unauthorized, refreshToken can`t be verified'
+    });
+  };
+
+
+  // decoded.userId exists on JwtPayload, TS falsely wants decoded.id
+  const user: User = {
+    username: decoded.username,
+    id: decoded.userId,
+  };
+
+  const authToken = jwt.sign( user, SECRET, { expiresIn: 60 * 5 }); // expires in 5 min
+  const refreshToken = jwt.sign( user, SECRET, {  expiresIn: 60 * 60 * 24 * 7 }); // expires in 7 days
+
+  return {
+    token: {
+      authToken,
+      refreshToken
+    }
+  };
+})

server/api/auth/session.ts

@@ -0,0 +1,36 @@
+import { createError, eventHandler, getRequestHeader, H3Event } from 'h3'
+import jwt from 'jsonwebtoken';
+
+const TOKEN_TYPE = 'Bearer'
+
+const extractToken = (authHeaderValue: string) => {
+  const [, token] = authHeaderValue.split(`${TOKEN_TYPE} `)
+  return token
+}
+
+const ensureAuth = (event: H3Event) => {
+  const authHeaderValue = getRequestHeader(event, 'authorization')
+  if (typeof authHeaderValue === 'undefined') {
+    throw createError({
+      statusCode: 403,
+      statusMessage:
+        'Need to pass valid Bearer-authorization header to access this endpoint'
+    })
+  }
+
+  const extractedToken = extractToken(authHeaderValue)
+  try {
+    return jwt.verify(extractedToken, 'SECRETTUEITKEY')
+  } catch (error) {
+    console.error("Login failed. Here's the raw error:", error)
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'You must be logged in to access this page'
+    })
+  }
+}
+
+export default eventHandler((event) => {
+  const user = ensureAuth(event)
+  return user
+})

server/api/auth/signup.ts

@@ -1,4 +1,4 @@
-import { errorMsg } from "../middleware/signUp.js";
+import { errorMsg } from "../../middleware/signUp.js";
 
 export default defineEventHandler(async (event) => {
 

server/api/login.ts

@@ -1,20 +0,0 @@
-import { loginSuccessful, sessionToken, errorMsg } from "../middleware/login";
-import { OutgoingMessage } from 'http';
-
-export default defineEventHandler(async (event) => {
-
-    if (!loginSuccessful) {
-        throw createError({
-            statusCode: 400,
-            statusMessage: errorMsg,
-        })
-    }
-
-    setResponseStatus(event, 200);
-    //setResponseHeader(event, "Set-Cookie", sessionToken);
-    const resBody = {
-        token: sessionToken,
-        message: 'Login successful'
-    };
-    return resBody;
-})

server/main.ts

@@ -1 +1 @@
-import { pinia } from '@/store'
+//import { pinia } from '@/store'

server/middleware/auth.global.js

@@ -1,63 +0,0 @@
-import { useAuthStore } from '~/store/auth';
-
-
-export default defineEventHandler (async (event) => { 
-    // Check if user is not authenticated and trying to access a page other than /login
-    let isAuthenticated = false;
-
-    if (event.path !== '/login' && event.path !== '/api/login') {
-    
-        //const reqUsername = getHeader(event, "Authorization");
-        //const reqCookie = getHeader(event, "Cookie");
-        const reqUsername = getCookie(event, 'user');
-        const reqToken = getCookie(event, 'token');
-        //console.log('getHeader: ', reqCookie);
-        console.log('getCookie user: ', reqUsername);
-        console.log('getCookie token: ', reqToken);
-
-        const auth = useAuthStore();
-        const authUsername = auth.username;
-        const authToken = auth.token;
-
-        console.log('auth user: ', authUsername);
-        console.log('auth token: ', authToken);
-
-        if (authUsername == reqUsername && authToken == reqToken) {
-            isAuthenticated = true;
-        }
-
-
-    if (!isAuthenticated) {
-        await sendRedirect(event, '/login');
-    }
-    }
-});
-  
-/*function isAuthenticated(event) {
-    // Implement authentication logic 
-    /*const auth = useAuthStore();
-    const authUsername = auth.username;
-    const authToken = auth.token;
-
-    const reqUsername = getHeader(event, 'Authorization');
-    const reqCookie = getHeader(event, 'Cookie');
-    const reqToken = useCookie('token');
-    console.log('getHeader: ', reqCookie);
-    console.log('useCookie: ', reqToken);
-
-    if (authUsername.equals(reqUsername) ) {
-        return true;
-    }*/
-
-    /*return false;
-    // Return true if authenticated, false otherwise
-}*/
-
-
-/*export default defineNuxtRouteMiddleware((to) => {
-    const auth = useAuthStore();
-    const authUsername = auth.username;
-    const authToken = auth.token;
-
-    const reqUsername = 
-})*/

server/middleware/login.ts

@@ -1,61 +0,0 @@
-import axios, { AxiosError } from 'axios';
-import serversideConfig from '../../serversideConfig';
-import https from 'https';
-import { useAuthStore } from '~/store/auth';
-
-let loginSuccessful = false;
-let sessionToken = 'token';
-let errorMsg = '';
-
-export default defineEventHandler(async (event) => {
-    loginSuccessful = false;
-    const agent = new https.Agent({
-        rejectUnauthorized: false,
-    });
-
-    const axiosInstance = axios.create({
-        headers: {
-            'Content-Type': 'application/json',
-            Accept: "*",
-        },
-        httpsAgent: agent
-    });
-
-    if (event.path.startsWith("/api/login")) {
-
-        const body = await readBody(event)
-
-        // get user object from backend
-        try {
-            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
-                username: body.username,
-                password: body.password,
-            });
-            sessionToken = res.data.token;
-            const auth = useAuthStore();
-            auth.createNewSession(res.data.user, sessionToken);
-            loginSuccessful = true;
-        } catch (err) {
-            if (axios.isAxiosError(err)) {
-                const axiosError = err as AxiosError;
-
-                if (axiosError.response) {
-                    // Axios error
-                    console.error(axiosError.response.data.message);
-                    errorMsg = axiosError.response.data.message;
-                } else if (axiosError.request) {
-                    // If error was caused by the request
-                    console.error(axiosError.request);
-                } else {
-                    // Other errors
-                    console.error('Error', axiosError.message);
-                }
-            } else {
-                // No AxiosError
-                console.error('Error', err);
-            }
-        }
-    }
-})
-
-export { loginSuccessful, sessionToken, errorMsg };

store/auth.ts

@@ -1,65 +0,0 @@
-import { defineStore } from 'pinia';
-
-
-export const useAuthStore = defineStore('auth', {
-  state: () => ({
-    userobject: null,
-    username: 'user',
-    token: 'token',
-    authenticated: false,
-  }),
-  actions: {
-    createNewSession( user: any, t: string ) {
-      this.userobject = user;
-      this.username = user.username; 
-      this.token = t; 
-      this.authenticated = true;
-    },
-    logUserOut() {
-      this.username = 'user';
-      this.token = 'token';
-      this.authenticated = false; 
-    },
-  },
-  persist: true,
-});
-
-
-/*interface UserPayloadInterface {
-    username: string;
-    password: string;
-  }
-
-  
-export const useAuthStore = defineStore('auth', {
-  state: () => ({
-    authenticated: false,
-    loading: false,
-  }),
-  actions: {
-    async authenticateUser({ username, password }: UserPayloadInterface) {
-      // useFetch from nuxt 3
-      const { data, pending }: any = await useFetch('https://dummyjson.com/auth/login', {
-        method: 'post',
-        headers: { 'Content-Type': 'application/json' },
-        body: {
-          username,
-          password,
-        },
-      });
-      this.loading = pending;
-
-      if (data.value) {
-        const token = useCookie('token'); // useCookie new hook in nuxt 3
-        token.value = data?.value?.token; // set token to cookie
-        this.authenticated = true; // set authenticated  state value to true
-      }
-    },
-    logUserOut() {
-      const token = useCookie('token'); // useCookie new hook in nuxt 3
-      this.authenticated = false; // set authenticated  state value to false
-      token.value = null; // clear the token cookie
-    },
-  },
-});*/
-

store/index.ts

@@ -1,4 +1,6 @@
 import { createPinia } from "pinia";
 import piniaPluginPersistedState from "pinia-plugin-persistedstate"
 
-export const pinia = createPinia().use(piniaPluginPersistedState);
+const pinia = createPinia().use(piniaPluginPersistedState);
+
+useNuxtApp().vueApp.use(pinia);