fix: rely on new auth endpoint to determine auth state

aminnausin · aminnausin · commit 6c1828b78cd9 · 2026-01-01T18:06:33.000-05:00
diff --git a/resources/js/App.vue b/resources/js/App.vue
@@ -13,17 +13,18 @@ import { storeToRefs } from 'pinia';
 import { useAppStore } from '@/stores/AppStore';
 import { RouterView } from 'vue-router';
 
-const toastPosition = ref<ToastPostion>();
-
 const { contextMenuItems, contextMenuStyle, contextMenuItemStyle } = storeToRefs(useAppStore());
 const { isFullscreen } = useFullscreen();
 
+const authStore = useAuthStore();
+
+const toastPosition = ref<ToastPostion>();
+
 async function loadUser() {
-    const authStore = useAuthStore();
     await authStore.fetchUser();
 }
 
-onMounted(async () => {
+onMounted(() => {
     useAppStore().initBrowserState();
 
     toastPosition.value = getScreenSize() === 'default' ? 'top-center' : 'bottom-left';
diff --git a/resources/js/service/records/useRecords.ts b/resources/js/service/records/useRecords.ts
@@ -7,6 +7,7 @@ import { useAuthStore } from '@/stores/AuthStore';
 import { queryClient } from '@/service/vue-query';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
+
 import api from './api';
 
 export function useRecordsLimited(limit = 10) {
diff --git a/resources/js/stores/AuthStore.ts b/resources/js/stores/AuthStore.ts
@@ -2,7 +2,6 @@ import type { UserResource } from '@/types/resources';
 
 import { authenticate } from '@/service/authAPI';
 import { defineStore } from 'pinia';
-import { AxiosError } from 'axios';
 import { toast } from '@aminnausin/cedar-ui';
 import { ref } from 'vue';
 
@@ -15,43 +14,37 @@ export const useAuthStore = defineStore('Auth', () => {
 
     const fetchUser = async (force: boolean = false): Promise<boolean> => {
         /*
-            Auth States:
+            Auth States (not very good):
 
-            1: Never logged in -> No token -> state is null
-            2: Logged in previously -> Token -> Token is invalid (ajax) -> State is false
-            3: Logged in previously -> Token -> Token is valid (ajax) -> State is true
-            4: State exists -> State is State (Logged in or out has already been checked)
+            1: Initial -> No checks have run -> State is null
+            2: Never logged in -> No State -> State is null
+            3: State exists -> State is State (Logged in or out has already been checked)
 
         */
 
-        if (!localStorage.getItem('auth-token')) return false; // no auth token
-
-        if (userData.value && !force) return true;
-
+        if (userData.value?.id && !force) return true; // Bad practice? Should I always check?
+        if (isLoadingUserData.value) return false;
         if (userFetchPromise) return userFetchPromise;
 
         userFetchPromise = (async () => {
             isLoadingUserData.value = true;
 
             try {
-                const localToken = localStorage.getItem('auth-token');
-                if (!localToken) {
-                    clearAuthState();
-                    return false;
-                }
-
-                const { data, status } = await authenticate(localToken);
+                const { data } = await authenticate();
 
-                if (status !== 200) {
-                    throw new AxiosError('Not Authenticated', status.toString());
+                if (data.isAuthenticated) {
+                    userData.value = data.user;
+                    return true;
                 }
 
-                userData.value = data.data?.user;
-                return true;
-            } catch (error) {
-                clearAuthState();
+                console.log('Clear auth state because not authenticated');
 
-                console.error('Authentication failed:', error);
+                clearAuthState(false);
+                return false;
+            } catch (error) {
+                // Only when network or server error
+                console.error(error);
+                clearAuthState(true);
                 return false;
             } finally {
                 isLoadingUserData.value = false;
@@ -64,12 +57,12 @@ export const useAuthStore = defineStore('Auth', () => {
 
     const clearAuthState = (showMessage: boolean = false, status = 401): void => {
         userData.value = null;
-        isLoadingUserData.value = false;
-        localStorage.removeItem('auth-token');
+        localStorage.removeItem('auth-token'); // Legacy: Clears existing auth-tokens. No auth-tokens are created ever again.
 
         if (!showMessage) return;
-        const message = status === 419 ? 'Session Expired' : `Authentication Failed (${status})`;
+        const message = `Login Expired${status ? ` (${status})` : ''}`;
 
+        // Can remove?
         toast.warning(message, {
             description: 'Please log in again.',
         });
