feat: updated

src/stores/authSore.ts

@@ -3,12 +3,19 @@ import Cookies from 'js-cookie'
 import axios from 'axios';
 import { ref } from 'vue';
 
+
+interface UserInfo {
+  name: string;
+  email: string;
+}
+
+
 const useAuthStore = defineStore('authStore', () => {
 
 
-  const isProduction = process.env.NODE_ENV === 'production';
+  const isProduction = import.meta.env.NODE_ENV === 'production';
 
-  const user_info = ref([])
+  const user_info = ref<UserInfo | null>(null);
 
   const setCookie = (key: string, value: string) => {
     Cookies.set(key, value, { expires: 1, sameSite: 'Lax', secure: isProduction });
@@ -46,7 +53,7 @@ const useAuthStore = defineStore('authStore', () => {
 
       // Remove the token from cookies and clear user info on the frontend
       removeCookie("token");
-      user_info.value = [];
+      user_info.value = null;
 
       location.reload();
 
@@ -62,7 +69,7 @@ const useAuthStore = defineStore('authStore', () => {
     if (token) {
       try {
         const res = await axios.post('http://localhost:5000/api/auth', { token });
-        user_info.value = res.data.data;
+        user_info.value = res.data.data as UserInfo;
         return true; // User is authenticated
       } catch (error) {
         logOut(); // Log out if there's an error (e.g., token is invalid)

src/views/HomeView.vue

@@ -3,28 +3,34 @@ import { Button } from '@/components/ui/button';
 import useAuthStore from '@/stores/authSore';
 import { onMounted, ref } from 'vue';
 
+const authStore = useAuthStore();
 
-const authStore = useAuthStore()
-const user = ref([])
-
-const checkAuth = async () => {
-  user.value = authStore.user_info
+interface User {
+  name: string;
+  email: string;
 }
 
+// Initialize `user` as a ref with an initial empty object
+const user = ref<User | null>(null);
+
+const checkAuth = async () => {
+  // Assuming `authStore.user_info` is of type `User`
+  user.value = authStore.user_info || null; 
+};
 
 onMounted(() => {
-  checkAuth()
-})
+  checkAuth();
+});
 </script>
 
 <template>
   <div class="flex p-40 flex-col items-center">
-    <div class="details mb-5">
-      Name: {{ user.name }}<br> 
+    <div class="details mb-5" v-if="user">
+      Name: {{ user.name }}<br>
       Email: {{ user.email }}
     </div>
     <div>
       <Button @click="authStore.logOut()">Logout</Button>
     </div>
   </div>
-</template>
+</template>

tsconfig.json

@@ -7,5 +7,8 @@
     {
       "path": "./tsconfig.app.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "types": ["node"]
+  }
 }