merge: #2752

2752: fix(web) further fix to login flow r=theoephraim a=theoephraim last fix stopped the user facing bug, but we were still calling connect twice and had some other unexpected behaviour around logout. Co-authored-by: Theo Ephraim <[email protected]>
systeminit · Sep 14, 2023 · 123c025 · 123c025
2 parents 18f17ca + cf3860a
commit 123c025
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/app/auth-portal/src/App.vue b/app/auth-portal/src/App.vue
@@ -285,7 +285,7 @@ watch([checkAuthReq, route], () => {
     }
   }
 
-  if (["print-legal"].includes(currentRouteName)) {
+  if (["print-legal", "logout", "logout-success"].includes(currentRouteName)) {
     return;
   }
 
@@ -294,8 +294,6 @@ watch([checkAuthReq, route], () => {
     if (
       ![
         "login",
-        "logout",
-        "logout-success",
         "signup",
         "404",
         "legal",

diff --git a/app/web/src/App.vue b/app/web/src/App.vue
@@ -1,10 +1,12 @@
 <!-- eslint-disable vue/no-multiple-template-root -->
 <template>
   <div class="font-sans">
+    <template v-if="route.name === 'auth-connect'">
+      <RouterView />
+    </template>
     <template
-      v-if="
+      v-else-if="
         !authStore.userIsLoggedInAndInitialized &&
-        route.name !== 'auth-connect' &&
         (!restoreAuthReqStatus.isRequested ||
           restoreAuthReqStatus.isPending ||
           reconnectAuthReqStatus.isPending)
@@ -14,7 +16,7 @@
     </template>
     <template v-else>
       <RealtimeConnectionStatus />
-      <router-view :key="selectedWorkspace?.pk" />
+      <RouterView :key="selectedWorkspace?.pk" />
       <Teleport to="body">
         <canvas
           id="confetti"
@@ -71,12 +73,16 @@ useHead(
 // check for auth token in local storage and initialize auth in store if found
 // this token will be automatically injected into API requests
 const authStore = useAuthStore();
-authStore.initFromStorage().then();
+const route = useRoute();
+if (route.name === "auth-connect") {
+  authStore.localLogout(false);
+} else {
+  authStore.initFromStorage().then();
+}
+
 const restoreAuthReqStatus = authStore.getRequestStatus("RESTORE_AUTH");
 const reconnectAuthReqStatus = authStore.getRequestStatus("AUTH_RECONNECT");
 
-const route = useRoute();
-
 const workspacesStore = useWorkspacesStore();
 const selectedWorkspace = computed(() => workspacesStore.selectedWorkspace);
 

diff --git a/app/web/src/store/auth.store.ts b/app/web/src/store/auth.store.ts
@@ -134,7 +134,7 @@ export const useAuthStore = defineStore("auth", {
         }
       }
     },
-    localLogout() {
+    localLogout(logoutAuthPortal = true) {
       storage.removeItem(AUTH_LOCAL_STORAGE_KEYS.USER_TOKEN);
       this.$patch({
         token: null,
@@ -143,7 +143,9 @@ export const useAuthStore = defineStore("auth", {
       });
       posthog.reset();
 
-      if (window) window.location.href = `${AUTH_PORTAL_URL}/logout`;
+      if (window && logoutAuthPortal) {
+        window.location.href = `${AUTH_PORTAL_URL}/logout`;
+      }
     },
 
     // split out so we can reuse for different login methods (password, oauth, magic link, signup, etc)