feat: login store moved to sessionStorage

front-nuxt/app/constants/session.constants.ts

@@ -0,0 +1 @@
+export const USER_SESSION_STORAGE_KEY = "userSession";

front-nuxt/app/middleware/auth.global.ts

@@ -1,8 +1,43 @@
+import { USER_SESSION_STORAGE_KEY } from "~/constants/session.constants";
+import type { User } from "~/stores/user";
+
 export default defineNuxtRouteMiddleware((to, from) => {
+    let session: string | null = null;
+
+    // Not secured routes
+    if (
+        to.path.startsWith("/favicon.ico") ||
+        to.path.startsWith("/assets/") ||
+        to.path.startsWith("/login")
+    ) {
+        return;
+    }
+
     const userStore = useUserStore();
-    console.log(
-        ">> Global Middleware from ",
-        from.query,
-        userStore.profile,
-    );
+    userStore.update({ id: "test", roles: ["admin"] });
+
+    // Recover user session
+    // NOTE: using the sessionStorage will not allow the user to have multiple tabs, to communicate them one can use the
+    //  broadcast channel: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
+    try {
+        session = sessionStorage.getItem(
+            USER_SESSION_STORAGE_KEY,
+        );
+    } catch (e) {
+        console.error(">> [!] Not in client");
+    }
+
+    // Manage secured routes
+    if (session) {
+        const user = JSON.parse(session) as User;
+        if (
+            user.apiSession?.exp &&
+            user.apiSession.exp > Date.now()
+        ) {
+            // try refresh token
+            // else just redirect to login
+        }
+    }
+
+    console.log(">> Global Middleware from ", from.path);
 });

front-nuxt/app/middleware/login.ts

@@ -1,3 +1,3 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-    console.log(">> Middleware from ", from.query);
-})
+    console.log(">> Login middleware from ", from.path);
+});

front-nuxt/app/stores/user.ts

@@ -1,3 +1,5 @@
+import { USER_SESSION_STORAGE_KEY } from "~/constants/session.constants";
+
 type Role = "user" | "manager" | "admin";
 
 interface ApiSession {
@@ -6,7 +8,7 @@ interface ApiSession {
     refreshToken?: string;
 }
 
-interface User {
+export interface User {
     id: string;
     roles: Role[];
     image?: string;
@@ -15,13 +17,7 @@ interface User {
 }
 
 export const useUserStore = defineStore("user", {
-    state: (): User => {
-        const user = useCookie("userSession", {
-            default: (): User => ({ id: "-1", roles: [] }),
-            watch: false,
-        });
-        return user.value;
-    },
+    state: (): User => ({ id: "-1", roles: [] }),
     getters: {
         profile: (state) => ({
             id: state.id,
@@ -32,11 +28,17 @@ export const useUserStore = defineStore("user", {
     },
     actions: {
         persist() {
-            const user = useCookie("userSession", {
-                default: (): User => ({ id: "-1", roles: [] }),
-                watch: false,
-            });
-            user.value ||= this.profile;
+            try {
+                sessionStorage.setItem(
+                    USER_SESSION_STORAGE_KEY,
+                    JSON.stringify(this.profile),
+                );
+            } catch (e) {
+                console.error(
+                    ">> [!] user-store - Sessions storage access on server",
+                    e,
+                );
+            }
         },
         update(user: User) {
             this.$state = user;