fix(logout): Refreshing /me instead of removing it. That allow to quitly redirect user without displaying toasters

Author: Benoit Ngo

apps/front/src/app.vue

@@ -20,19 +20,26 @@ const route = useRoute();
 
 const { isAuthenticated, isMePending, authUrl } = storeToRefs(authStore);
 // Doing this here instead than in the middleware allow reactivity on the auth user
-watchEffect(async () => {
-  if (isMePending.value) {
-    return;
+watchEffect(
+  async () => {
+    if (isMePending.value) {
+      return;
+    }
+    const shouldRedirectToLogin =
+      !isAuthenticated.value &&
+      authUrl.value &&
+      route.fullPath !== authUrl.value;
+    if (shouldRedirectToLogin) {
+      return navigateTo(authUrl.value, { external: true });
+    }
+    const shouldRedirectToHomepage =
+      isAuthenticated.value && route.fullPath === authUrl.value;
+    if (shouldRedirectToHomepage) {
+      return navigateTo("/");
+    }
+  },
+  {
+    flush: "pre",
   }
-  const shouldRedirectToLogin =
-    !isAuthenticated.value && authUrl.value && route.fullPath !== authUrl.value;
-  if (shouldRedirectToLogin) {
-    return navigateTo(authUrl.value, { external: true });
-  }
-  const shouldRedirectToHomepage =
-    isAuthenticated.value && route.fullPath === authUrl.value;
-  if (shouldRedirectToHomepage) {
-    return navigateTo("/");
-  }
-});
+);
 </script>

apps/front/src/components/form/RegisterPasswordInput.vue

@@ -57,7 +57,7 @@
 defineOptions({
   inheritAttrs: false,
 });
-const props = defineProps<{
+defineProps<{
   inputId: string;
 }>();
 </script>

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

@@ -3,10 +3,10 @@
     <div class="col-2 col-offset-8"></div>
     <div class="col-2">
       <p
-        v-if="username"
+        v-if="authStore.me?.email"
         v-t="{
           path: 'components.layout.appHeader.welcome',
-          args: { username },
+          args: { username: authStore.me.email },
         }"
       ></p>
     </div>
@@ -16,6 +16,4 @@
 import { useAuthUser } from "~/store/auth";
 
 const authStore = useAuthUser();
-
-const username = authStore.me.email || "";
 </script>

apps/front/src/store/auth.ts

@@ -21,15 +21,22 @@ const logout = (fetcher: AppFetch<any>) => {
 };
 
 export const useAuthUser = defineStore("auth-store", () => {
-  const me = ref();
+  const me: Ref<null | User> = ref(null);
   const { error, resetError, setError } = useBasicError();
   const isMePending = ref(false);
   const authUrl = ref("/auth/login");
   const refresh = async ($appFetch: AppFetch<User | undefined>) => {
     resetError();
     isMePending.value = true;
     try {
-      const res = await $appFetch("auth/me");
+      const res = await $appFetch("auth/me", {
+        // This override the default behavior of onResponse interceptor from $appFetch
+        // Because when logout, the next /me gonna answer 401 but you dont want to display any errors
+        onResponse: () => {},
+      });
+      if (!res) {
+        throw createError("res expect a value");
+      }
       me.value = res;
     } catch (exception: any) {
       isMePending.value = false;
@@ -48,7 +55,7 @@ export const useAuthUser = defineStore("auth-store", () => {
   };
   const logoutUser = async (fetch: AppFetch<any>) => {
     await logout(fetch);
-    resetAuth();
+    await refresh(fetch);
   };
 
   return {