WIP - added front end auth

frontend/composables/useApi.ts

@@ -1,5 +1,8 @@
 export const useApi = () => {
   const config = useRuntimeConfig()
+  const router = useRouter()
+  const { toast } = useToast()
+  const { isLoggedIn, logout } = useAuth()
 
   // Use current domain for API calls (same subdomain routing)
   const getApiBaseUrl = () => {
@@ -34,13 +37,44 @@ export const useApi = () => {
     return headers
   }
 
+  const handleResponse = async (response: Response) => {
+    if (response.status === 401) {
+      // Unauthorized - not authenticated
+      if (import.meta.client) {
+        logout()
+        toast.error('Your session has expired. Please login again.')
+        router.push('/login')
+      }
+      throw new Error('Unauthorized')
+    }
+
+    if (response.status === 403) {
+      // Forbidden - not authorized
+      if (import.meta.client) {
+        toast.error('You do not have permission to perform this action.')
+        // Redirect to home if logged in, otherwise to login
+        if (isLoggedIn()) {
+          router.push('/')
+        } else {
+          router.push('/login')
+        }
+      }
+      throw new Error('Forbidden')
+    }
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    return response.json()
+  }
+
   const api = {
     async get(path: string) {
       const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
         headers: getHeaders(),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
 
     async post(path: string, data: any) {
@@ -49,8 +83,7 @@ export const useApi = () => {
         headers: getHeaders(),
         body: JSON.stringify(data),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
 
     async put(path: string, data: any) {
@@ -59,8 +92,7 @@ export const useApi = () => {
         headers: getHeaders(),
         body: JSON.stringify(data),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
 
     async delete(path: string) {
@@ -68,8 +100,7 @@ export const useApi = () => {
         method: 'DELETE',
         headers: getHeaders(),
       })
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
-      return response.json()
+      return handleResponse(response)
     },
   }
 

frontend/composables/useAuth.ts

@@ -0,0 +1,32 @@
+export const useAuth = () => {
+  const tokenCookie = useCookie('token')
+  
+  const isLoggedIn = () => {
+    if (!import.meta.client) return false
+    const token = localStorage.getItem('token')
+    const tenantId = localStorage.getItem('tenantId')
+    return !!(token && tenantId)
+  }
+
+  const logout = () => {
+    if (import.meta.client) {
+      localStorage.removeItem('token')
+      localStorage.removeItem('tenantId')
+      localStorage.removeItem('user')
+    }
+    // Clear cookie for server-side check
+    tokenCookie.value = null
+  }
+
+  const getUser = () => {
+    if (!import.meta.client) return null
+    const userStr = localStorage.getItem('user')
+    return userStr ? JSON.parse(userStr) : null
+  }
+
+  return {
+    isLoggedIn,
+    logout,
+    getUser,
+  }
+}

frontend/composables/useToast.ts

@@ -0,0 +1,20 @@
+import { toast as sonnerToast } from 'vue-sonner'
+
+export const useToast = () => {
+  const toast = {
+    success: (message: string) => {
+      sonnerToast.success(message)
+    },
+    error: (message: string) => {
+      sonnerToast.error(message)
+    },
+    info: (message: string) => {
+      sonnerToast.info(message)
+    },
+    warning: (message: string) => {
+      sonnerToast.warning(message)
+    },
+  }
+
+  return { toast }
+}