fix: pwa, firebase and auth initial load issues

app/pages/canvas/index.vue

@@ -87,9 +87,9 @@ const createNewCanvas = () => {
 
 // Redirect to specific canvas if ID is provided
 onMounted(() => {
-  if (auth.user) {
+  if (auth.isAuthenticated.value) {
     // Load user's canvases
-    console.log('Loading canvases for user:', auth.user.email)
+    console.log('Loading canvases for user:', auth.user.value?.email)
   }
 })
 </script>

app/pages/canvases.vue

@@ -119,10 +119,19 @@ definePageMeta({
 
 const auth = useAuth()
 const user = computed(() => auth.user)
-const authFetch = (url, opts = {}) => $fetch(url, {
-  ...opts,
-  headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
-})
+const authFetch = async (url, opts = {}) => {
+  try {
+    return await $fetch(url, {
+      ...opts,
+      headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
+    })
+  } catch (error) {
+    if (error.response?.status === 401) {
+      auth.logout()
+    }
+    throw error
+  }
+}
 
 const canvases = ref([])
 const userGroups = ref([])
@@ -287,5 +296,13 @@ const getGroupName = (groupId) => {
   return group?.name || 'Unknown Group'
 }
 
-onMounted(loadData)
+onMounted(() => {
+  if (auth.isAuthenticated.value) {
+    loadData()
+  }
+})
+
+watch(() => auth.isAuthenticated.value, (isAuth) => {
+  if (isAuth) loadData()
+})
 </script>

app/pages/profile.vue

@@ -170,10 +170,19 @@ definePageMeta({
 
 const auth = useAuth()
 const route = useRoute()
-const authFetch = (url, opts = {}) => $fetch(url, {
-  ...opts,
-  headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
-})
+const authFetch = async (url, opts = {}) => {
+  try {
+    return await $fetch(url, {
+      ...opts,
+      headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
+    })
+  } catch (error) {
+    if (error.response?.status === 401) {
+      auth.logout()
+    }
+    throw error
+  }
+}
 
 const profileId = computed(() => route.params.id || auth.user.value?.id)
 const currentUserId = computed(() => auth.user.value?.id || '')
@@ -329,6 +338,14 @@ const followButtonClass = computed(() => {
     : 'bg-blue-600 hover:bg-blue-500 text-white'
 })
 
-onMounted(loadProfile)
+onMounted(() => {
+  if (auth.isAuthenticated.value) {
+    loadProfile()
+  }
+})
+
+watch(() => auth.isAuthenticated.value, (isAuth) => {
+  if (isAuth) loadProfile()
+})
 watch(profileId, loadProfile)
 </script>