chore(proxy): add use stream

chore(auth): change auth-store into a setup store

Author: Benoit Ngo

apps/front/src/app.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <NuxtErrorBoundary @error="mHandleError">
-      <NuxtLayout v-if="!isPendingAuth || authStore.isAuthenticated">
+      <NuxtLayout v-if="!isMePending || isAuthenticated">
         <NuxtPage />
       </NuxtLayout>
     </NuxtErrorBoundary>
@@ -10,6 +10,7 @@
 <script setup lang="ts">
 import { watchEffect } from "vue";
 import { useAuthUser } from "~/store/auth";
+import { storeToRefs } from "pinia";
 
 const authStore = useAuthUser();
 
@@ -18,23 +19,21 @@ const route = useRoute();
 const mHandleError = (e: unknown) => {
   logger.error("Primary error boundary", e);
 };
-const isPendingAuth = computed(() => authStore.isPending);
+const { isAuthenticated, isMePending, authUrl } = storeToRefs(authStore);
 // Doing this here instead than in the middleware allow reactivity on the auth user
 watchEffect(async () => {
-  if (isPendingAuth.value) {
+  if (isMePending.value) {
     return;
   }
   const shouldRedirectToLogin =
-    !authStore.isAuthenticated &&
-    authStore.authUrl &&
-    route.name !== "auth-login";
+    !isAuthenticated.value && authUrl.value && route.fullPath !== authUrl.value;
   if (shouldRedirectToLogin) {
-    await navigateTo(authStore.authUrl, { external: true });
+    return navigateTo(authUrl.value, { external: true });
   }
   const shouldRedirectToHomepage =
-    authStore.isAuthenticated && route.name === "auth-login";
+    isAuthenticated.value && route.fullPath === authUrl.value;
   if (shouldRedirectToHomepage) {
-    await navigateTo("/");
+    return navigateTo("/");
   }
 });
 </script>

apps/front/src/components/layout/AppHeader.vue

@@ -13,5 +13,5 @@ import { useAuthUser } from "~/store/auth";
 
 const authStore = useAuthUser();
 
-const username = authStore.authUser?.username || "";
+const username = authStore.me.email || "";
 </script>

apps/front/src/components/user/UserForm.vue

@@ -30,7 +30,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { User } from "~/types/user";
+import { User } from "~/types/User";
 
 defineProps<
   Omit<User, "id"> & {

apps/front/src/composables/api/auth/useMe.ts

@@ -1,5 +1,5 @@
 import { POST } from "~/constants/http";
-import { User } from "~/types/user";
+import { User } from "~/types/User";
 import { Ref } from "vue";
 import useBasicError from "~/composables/useBasicError";
 

apps/front/src/composables/api/user/useCreateUser.ts

@@ -1,4 +1,4 @@
-import { User } from "~/types/user";
+import { User } from "~/types/User";
 import { DELETE } from "~/constants/http";
 
 export default function useDeleteUser() {

apps/front/src/composables/api/user/useDeleteUser.ts

@@ -1,5 +1,5 @@
 import { GET } from "~/constants/http";
-import { User } from "~/types/user";
+import { User } from "~/types/User";
 import useAppFetch from "~/composables/useAppFetch";
 
 export default async function useGetUser(userId: string) {

apps/front/src/composables/api/user/useGetUser.ts

@@ -1,4 +1,4 @@
-import { User } from "~/types/user";
+import { User } from "~/types/User";
 import { GET } from "~/constants/http";
 import useAppFetch from "~/composables/useAppFetch";
 

apps/front/src/composables/api/user/useListUsers.ts

@@ -1,5 +1,5 @@
 import { PUT } from "~/constants/http";
-import { User, UserId } from "~/types/user";
+import { User, UserId } from "~/types/User";
 import useBasicError from "~/composables/useBasicError";
 
 type UserInput = Omit<User, "id">;

apps/front/src/composables/api/user/useUpdateUser.ts

@@ -12,7 +12,6 @@ export default function useAppFetch<T>(
   const defaults: UseFetchOptions<T | undefined | unknown> = {
     $fetch: $appFetch as $Fetch<unknown, NitroFetchRequest>,
   };
-
   // for nice deep defaults, please use unjs/defu
   const params = defu(options, defaults);