feat(web): use user store and auth service to handle logging in and persistenting user state

src/FiscalOS.Web/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "jwt-decode": "^4.0.0",
         "pinia": "^3.0.4",
+        "ts-results": "^3.3.0",
         "vue": "beta",
         "vue-router": "^5.0.2"
       },
@@ -2295,17 +2296,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
-      "integrity": "sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
+      "integrity": "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.55.0",
-        "@typescript-eslint/type-utils": "8.55.0",
-        "@typescript-eslint/utils": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/type-utils": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -2318,8 +2319,8 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.55.0",
-        "eslint": "^8.57.0 || ^9.0.0",
+        "@typescript-eslint/parser": "^8.56.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
@@ -2334,16 +2335,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.55.0.tgz",
-      "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
+      "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.55.0",
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -2354,19 +2355,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.55.0.tgz",
-      "integrity": "sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.0.tgz",
+      "integrity": "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.55.0",
-        "@typescript-eslint/types": "^8.55.0",
+        "@typescript-eslint/tsconfig-utils": "^8.56.0",
+        "@typescript-eslint/types": "^8.56.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -2381,14 +2382,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.55.0.tgz",
-      "integrity": "sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.0.tgz",
+      "integrity": "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0"
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2399,9 +2400,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.55.0.tgz",
-      "integrity": "sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.0.tgz",
+      "integrity": "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2416,15 +2417,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.55.0.tgz",
-      "integrity": "sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.0.tgz",
+      "integrity": "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0",
-        "@typescript-eslint/utils": "8.55.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -2436,14 +2437,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.55.0.tgz",
-      "integrity": "sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.0.tgz",
+      "integrity": "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2455,16 +2456,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.55.0.tgz",
-      "integrity": "sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.0.tgz",
+      "integrity": "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.55.0",
-        "@typescript-eslint/tsconfig-utils": "8.55.0",
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0",
+        "@typescript-eslint/project-service": "8.56.0",
+        "@typescript-eslint/tsconfig-utils": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "debug": "^4.4.3",
         "minimatch": "^9.0.5",
         "semver": "^7.7.3",
@@ -2496,16 +2497,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.55.0.tgz",
-      "integrity": "sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.0.tgz",
+      "integrity": "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.55.0",
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0"
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2515,19 +2516,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.55.0.tgz",
-      "integrity": "sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.0.tgz",
+      "integrity": "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.55.0",
-        "eslint-visitor-keys": "^4.2.1"
+        "@typescript-eslint/types": "8.56.0",
+        "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2538,13 +2539,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -3013,22 +3014,22 @@
       }
     },
     "node_modules/@vue/eslint-config-typescript": {
-      "version": "14.6.0",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.6.0.tgz",
-      "integrity": "sha512-UpiRY/7go4Yps4mYCjkvlIbVWmn9YvPGQDxTAlcKLphyaD77LjIu3plH4Y9zNT0GB4f3K5tMmhhtRhPOgrQ/bQ==",
+      "version": "14.7.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.7.0.tgz",
+      "integrity": "sha512-iegbMINVc+seZ/QxtzWiOBozctrHiF2WvGedruu2EbLujg9VuU0FQiNcN2z1ycuaoKKpF4m2qzB5HDEMKbxtIg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/utils": "^8.35.1",
+        "@typescript-eslint/utils": "^8.56.0",
         "fast-glob": "^3.3.3",
-        "typescript-eslint": "^8.35.1",
-        "vue-eslint-parser": "^10.2.0"
+        "typescript-eslint": "^8.56.0",
+        "vue-eslint-parser": "^10.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "peerDependencies": {
-        "eslint": "^9.10.0",
+        "eslint": "^9.10.0 || ^10.0.0",
         "eslint-plugin-vue": "^9.28.0 || ^10.0.0",
         "typescript": ">=4.8.4"
       },
@@ -4112,13 +4113,13 @@
       }
     },
     "node_modules/eslint-plugin-playwright": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-2.5.1.tgz",
-      "integrity": "sha512-q7oqVQTTfa3VXJQ8E+ln0QttPGrs/XmSO1FjOMzQYBMYF3btih4FIrhEYh34JF184GYDmq3lJ/n7CMa49OHBvA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-2.6.0.tgz",
+      "integrity": "sha512-Lo/na1ldsJdKA93OZC5lNdSyzTiJdaIpkxwPDx1PDnEc/Ogkt72il5TJ9J5MZSo4FlybM4h4rxPe/31sdD0MSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "globals": "^16.4.0"
+        "globals": "^17.3.0"
       },
       "engines": {
         "node": ">=16.9.0"
@@ -4128,9 +4129,9 @@
       }
     },
     "node_modules/eslint-plugin-playwright/node_modules/globals": {
-      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
-      "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.3.0.tgz",
+      "integrity": "sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6614,6 +6615,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-results": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/ts-results/-/ts-results-3.3.0.tgz",
+      "integrity": "sha512-FWqxGX2NHp5oCyaMd96o2y2uMQmSu8Dey6kvyuFdRJ2AzfmWo3kWa4UsPlCGlfQ/qu03m09ZZtppMoY8EMHuiA==",
+      "license": "MIT"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6642,16 +6649,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.55.0.tgz",
-      "integrity": "sha512-HE4wj+r5lmDVS9gdaN0/+iqNvPZwGfnJ5lZuz7s5vLlg9ODw0bIiiETaios9LvFI1U94/VBXGm3CB2Y5cNFMpw==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.56.0.tgz",
+      "integrity": "sha512-c7toRLrotJ9oixgdW7liukZpsnq5CZ7PuKztubGYlNppuTqhIoWfhgHo/7EU0v06gS2l/x0i2NEFK1qMIf0rIg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.55.0",
-        "@typescript-eslint/parser": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0",
-        "@typescript-eslint/utils": "8.55.0"
+        "@typescript-eslint/eslint-plugin": "8.56.0",
+        "@typescript-eslint/parser": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6661,7 +6668,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },

src/FiscalOS.Web/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "jwt-decode": "^4.0.0",
     "pinia": "^3.0.4",
+    "ts-results": "^3.3.0",
     "vue": "beta",
     "vue-router": "^5.0.2"
   },

src/FiscalOS.Web/src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
-
 </script>
 
 <template>

src/FiscalOS.Web/src/main.ts

@@ -3,9 +3,14 @@ import { createPinia } from "pinia";
 
 import App from "./App.vue";
 import router from "./router";
+import { ClientFactory, ClientFactoryKey } from "./services/client";
+import {  AuthServiceFactory, AuthServiceFactoryKey } from "./services/authService";
 
 const app = createApp(App);
 
+app.provide(ClientFactoryKey, new ClientFactory());
+app.provide(AuthServiceFactoryKey, new AuthServiceFactory());
+
 app.use(createPinia());
 app.use(router);
 

src/FiscalOS.Web/src/router/index.ts

@@ -1,3 +1,5 @@
+import { AuthService } from "@/services/authService";
+import { Client, ClientConfig } from "@/services/client";
 import { useUserStore } from "@/stores/userStore";
 import { createRouter, createWebHistory } from "vue-router";
 
@@ -25,20 +27,32 @@ const router = createRouter({
     },
     {
       path: '/',
-      beforeEnter: () => {
-        // TODO: Handle expired token
-        // Try to refresh
-        //  if refresh fails log out
-        //    redirect to login page
-        //  if refresh succeeds
-        //    log user in and allow
-        //    to pass
+      beforeEnter: async () => {
         const userStore = useUserStore();
 
         if (userStore.user === null) {
           return { path: '/public/login' }
         }
 
+        const isExpired = userStore.user.expiresAtInSeconds < Date.now() / 1000;
+
+        if (isExpired) {
+          const clientConfig = new ClientConfig(
+            { Authorization: `Bearer ${userStore.user.token}`},
+            true
+          );
+          const client = new Client(clientConfig);
+          const authService = new AuthService(client);
+          const refreshResult = await authService.refreshToken();
+
+          if (refreshResult.err) {
+            userStore.logUserOut();
+            return { path: '/public/login' }
+          }
+
+          userStore.logUserIn(refreshResult.val.accessToken);
+        }
+
         return true;
       },
       component: () => import('../views/HomeView.vue'),

src/FiscalOS.Web/src/views/LoginView.vue

@@ -1,30 +1,28 @@
 <script setup lang="ts">
-  import { useUserStore } from '@/stores/userStore';
-  import { useRouter } from 'vue-router';
+import { useAuthService } from '@/composables/useAuthService';
+import { useUserStore } from '@/stores/userStore';
+import { useRouter } from 'vue-router';
 
-  const { logUserIn } = useUserStore();
-  const router = useRouter();
+const router = useRouter();
+const userStore = useUserStore();
+const authService = useAuthService(userStore);
 
-  async function handleSubmit(e: SubmitEvent) {
-    const data = Object.fromEntries(new FormData(e.currentTarget as HTMLFormElement));
-    const response = await fetch('/api/auth/login', {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-      body: JSON.stringify(data),
-    });
+async function handleSubmit(e: SubmitEvent) {
+  const data = Object.fromEntries(new FormData(e.currentTarget as HTMLFormElement));
+  const loginResult = await authService.login(
+    data['username']!.toString(),
+    data['password']!.toString()
+  );
 
-    if (response.ok === false) {
-      alert('Failed to login');
-      return;
-    }
+  if (loginResult.err) {
 
-    const responseBody = await response.json();
-
-    logUserIn(responseBody.accessToken)
-    router.push('/');
+    alert(loginResult.val.join('\n'));
+    return;
   }
+
+  userStore.logUserIn(loginResult.val.accessToken);
+  router.push('/');
+}
 </script>
 
 <template>
@@ -32,11 +30,11 @@
   <form v-on:submit.prevent="handleSubmit">
     <div>
       <label for="username">Username</label>
-      <input type="text" name="username" id="username">
+      <input type="text" name="username" id="username" />
     </div>
     <div>
       <label for="password">Password</label>
-      <input type="password" name="password" id="password">
+      <input type="password" name="password" id="password" />
     </div>
     <div>
       <button type="submit">Login</button>