🪟 🎉 Verify auth status on tab focus (#21175)

airbytehq · Jan 12, 2023 · 80f3c4e · 80f3c4e
1 parent 2dc5b2f
commit 80f3c4e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx
@@ -1,5 +1,5 @@
 import { User as FirebaseUser } from "firebase/auth";
-import React, { useCallback, useContext, useMemo, useRef } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import { useQueryClient } from "react-query";
 import { useEffectOnce } from "react-use";
 import { Observable, Subject } from "rxjs";
@@ -160,6 +160,23 @@ export const AuthenticationProvider: React.FC<React.PropsWithChildren<unknown>>
     });
   });
 
+  useEffect(() => {
+    const onFocus = async () => {
+      return auth.onAuthStateChanged(async (currentUser) => {
+        if (!currentUser) {
+          loggedOut();
+        } else {
+          await onAfterAuth(currentUser);
+        }
+      });
+    };
+
+    window.addEventListener("focus", onFocus);
+    return () => {
+      window.removeEventListener("focus", onFocus);
+    };
+  }, [auth, loggedOut, onAfterAuth]);
+
   const queryClient = useQueryClient();
 
   const ctx: AuthContextApi = useMemo(

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx b/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx
@@ -54,7 +54,13 @@ export const Auth: React.FC = () => {
               <Route path={CloudRoutes.FirebaseAction} element={<FirebaseActionRoute />} />
               <Route
                 path="*"
-                element={<Navigate to={`${CloudRoutes.Login}${loggedOut ? "" : `?from=${pathname}`}`} />}
+                element={
+                  <Navigate
+                    to={`${CloudRoutes.Login}${
+                      loggedOut && pathname.includes("/settings/account") ? "" : `?from=${pathname}`
+                    }`}
+                  />
+                }
               />
             </Routes>
           </Suspense>