feat(frontend): sidebar migration started

frontend/src/lib/authClient.ts

@@ -3,7 +3,8 @@ import { usernameClient } from "better-auth/client/plugins";
 import { create } from "zustand";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect } from "react";
-import { useRouter } from "@tanstack/react-router";
+import { redirect, useNavigate, useRouter } from "@tanstack/react-router";
+import { api } from "./axiosAPI";
 
 // ---- TYPES ----
 export type Session = typeof authClient.$Infer.Session | null;
@@ -24,7 +25,7 @@ export type UserRoles = {
 
 type UserRoleState = {
     userRoles: UserRoles[] | null;
-    fetchRoles: (userId: string) => Promise<void>;
+    fetchRoles: () => Promise<void>;
     clearRoles: () => void;
 };
 
@@ -37,14 +38,11 @@ export const useAuth = create<SessionState>((set) => ({
 
 export const useUserRoles = create<UserRoleState>((set) => ({
     userRoles: null,
-    fetchRoles: async (userId: string) => {
+    fetchRoles: async () => {
         try {
-            const res = await fetch(`/api/${userId}/roles`, {
-                credentials: "include",
-            });
-            if (!res.ok) throw new Error("Failed to fetch roles");
-            const roles = await res.json();
-            set({ userRoles: roles });
+            const res = await api.get("/api/user/roles");
+            const roles = res.data;
+            set({ userRoles: roles.data });
         } catch (err) {
             console.error("Error fetching roles:", err);
             set({ userRoles: null });
@@ -52,6 +50,59 @@ export const useUserRoles = create<UserRoleState>((set) => ({
     },
     clearRoles: () => set({ userRoles: null }),
 }));
+
+export function userAccess(
+    moduleName: string | null,
+    roles: UserRoles["role"] | UserRoles["role"][]
+): boolean {
+    const { userRoles } = useUserRoles();
+
+    if (!userRoles) return false;
+
+    const roleArray = Array.isArray(roles) ? roles : [roles];
+
+    return userRoles.some(
+        (m) =>
+            (moduleName ? m.module === moduleName : true) &&
+            roleArray.includes(m.role)
+    );
+}
+
+export async function checkUserAccess({
+    allowedRoles,
+    moduleName,
+}: {
+    allowedRoles: UserRoles["role"][];
+    moduleName?: string;
+    //location: { pathname: string; search: string };
+}) {
+    try {
+        // fetch roles from your API (credentials required)
+        const res = await api.get("/api/user/roles", { withCredentials: true });
+        const roles = res.data.data as UserRoles[];
+
+        const hasAccess = roles.some(
+            (r) =>
+                (moduleName ? r.module === moduleName : true) &&
+                allowedRoles.includes(r.role)
+        );
+
+        if (!hasAccess) {
+            throw redirect({
+                to: "/",
+                search: { from: location.pathname + location.search },
+            });
+        }
+
+        // return roles so the route component can use them if needed
+        return roles;
+    } catch {
+        throw redirect({
+            to: "/login",
+            search: { redirect: location.pathname + location.search },
+        });
+    }
+}
 // ---- BETTER AUTH CLIENT ----
 export const authClient = createAuthClient({
     baseURL: `${window.location.origin}/lst/api/auth`,
@@ -85,6 +136,9 @@ export async function signin(data: { username: string; password: string }) {
 
 export const useLogout = () => {
     const { clearSession } = useAuth();
+    const { clearRoles } = useUserRoles();
+    const navigate = useNavigate();
+
     const router = useRouter();
     const logout = async () => {
         await authClient.signOut();
@@ -92,7 +146,8 @@ export const useLogout = () => {
         router.invalidate();
         router.clearCache();
         clearSession();
-
+        clearRoles();
+        navigate({ to: "/" });
         window.location.reload();
     };