feat: auth session managed on sessionStorage

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

@@ -1,43 +1,45 @@
 import { USER_SESSION_STORAGE_KEY } from "~/constants/session.constants";
 import type { User } from "~/stores/user";
 
+const LOGIN_ROUTE = "/login";
+
 export default defineNuxtRouteMiddleware((to, from) => {
     let session: string | null = null;
 
-    // Not secured routes
+    // Not secured route// Recover user session
     if (
         to.path.startsWith("/favicon.ico") ||
         to.path.startsWith("/assets/") ||
-        to.path.startsWith("/login")
+        to.path.startsWith(LOGIN_ROUTE)
     ) {
         return;
     }
 
-    const userStore = useUserStore();
-    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
+    //  broadcast channel, although its not the safest way: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
     try {
         session = sessionStorage.getItem(
             USER_SESSION_STORAGE_KEY,
         );
+
+        // Manage secured routes
+        if (session) {
+            const user = JSON.parse(session) as User;
+            if (
+                user.apiSession?.exp &&
+                user.apiSession.exp > Date.now()
+            ) {
+                // try refresh token if it exists
+                // else just redirect to login
+                return navigateTo(LOGIN_ROUTE);
+            }
+        } else {
+            return navigateTo(LOGIN_ROUTE);
+        }
     } 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/stores/user.ts

@@ -13,11 +13,15 @@ export interface User {
     roles: Role[];
     image?: string;
     name?: string;
-    apiSession?: ApiSession;
+    apiSession: ApiSession;
 }
 
 export const useUserStore = defineStore("user", {
-    state: (): User => ({ id: "-1", roles: [] }),
+    state: (): User => ({
+        id: "-1",
+        roles: [],
+        apiSession: { accessToken: "" },
+    }),
     getters: {
         profile: (state) => ({
             id: state.id,
@@ -25,13 +29,14 @@ export const useUserStore = defineStore("user", {
             image: state.image,
             roles: state.roles,
         }),
+        token: (state) => state.apiSession?.accessToken,
     },
     actions: {
         persist() {
             try {
                 sessionStorage.setItem(
                     USER_SESSION_STORAGE_KEY,
-                    JSON.stringify(this.profile),
+                    JSON.stringify(this.token),
                 );
             } catch (e) {
                 console.error(
@@ -40,9 +45,13 @@ export const useUserStore = defineStore("user", {
                 );
             }
         },
-        update(user: User) {
+        setUser(user: User) {
             this.$state = user;
             this.persist();
         },
+        updateToken(token: ApiSession["accessToken"]) {
+            this.apiSession.accessToken = token;
+            this.persist();
+        },
     },
 });