From 929e62f88455a9f4034d4ed7679eecdaf9be573b Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 10:16:31 +0000 Subject: [PATCH 1/7] revert useEffect causing multiple user creations --- .../cloud/services/auth/AuthService.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx index 248154205c21d..d62714cd5b9df 100644 --- 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, useEffect, useMemo, useRef } from "react"; +import React, { useCallback, useContext, useMemo, useRef } from "react"; import { useQueryClient } from "react-query"; import { useEffectOnce } from "react-use"; import { Observable, Subject } from "rxjs"; @@ -160,23 +160,6 @@ export const AuthenticationProvider: React.FC> }); }); - 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( From 446a6853d1ae0cf4e0696f3322ffd19296c8ac39 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 10:46:04 +0000 Subject: [PATCH 2/7] keep auto logout behavior --- .../cloud/services/auth/AuthService.tsx | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx index d62714cd5b9df..5a491e540dfa2 100644 --- 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"; @@ -147,9 +147,8 @@ export const AuthenticationProvider: React.FC> const stateRef = useRef(state); stateRef.current = state; - useEffectOnce(() => { - return auth.onAuthStateChanged(async (currentUser) => { - // We want to run this effect only once on initial page opening + const onAuthStateChange = useCallback( + async (currentUser) => { if (!stateRef.current.inited) { if (stateRef.current.currentUser === null && currentUser) { await onAfterAuth(currentUser); @@ -157,9 +156,35 @@ export const AuthenticationProvider: React.FC> authInited(); } } + }, + [onAfterAuth, authInited] + ); + + useEffectOnce(() => { + return auth.onAuthStateChanged(async (currentUser) => { + // We want to run this effect only once on initial page opening + onAuthStateChange(currentUser); }); }); + // Check auth state on window focus, in case the user logged out in a different tab + useEffect(() => { + const onFocus = async () => { + return auth.onAuthStateChanged(async (currentUser) => { + if (!currentUser) { + loggedOut(); + } else { + onAuthStateChange(currentUser); + } + }); + }; + + window.addEventListener("focus", onFocus); + return () => { + window.removeEventListener("focus", onFocus); + }; + }, [auth, loggedOut, onAfterAuth, onAuthStateChange]); + const queryClient = useQueryClient(); const ctx: AuthContextApi = useMemo( From f042dafa3241a5d19be4aafd9eb42d511f2b7d09 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 11:28:19 +0000 Subject: [PATCH 3/7] add type information --- airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx index 5a491e540dfa2..dc0637ddc3d08 100644 --- a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx @@ -148,7 +148,7 @@ export const AuthenticationProvider: React.FC> stateRef.current = state; const onAuthStateChange = useCallback( - async (currentUser) => { + async (currentUser: FirebaseUser | null) => { if (!stateRef.current.inited) { if (stateRef.current.currentUser === null && currentUser) { await onAfterAuth(currentUser); From e1b31289ba2d768f0f6866064ddc7ab5ed9d0937 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 11:34:12 +0000 Subject: [PATCH 4/7] remove unnecessary async keyword --- .../src/packages/cloud/services/auth/AuthService.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx index dc0637ddc3d08..b13035ee58cc9 100644 --- a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx @@ -169,8 +169,8 @@ export const AuthenticationProvider: React.FC> // Check auth state on window focus, in case the user logged out in a different tab useEffect(() => { - const onFocus = async () => { - return auth.onAuthStateChanged(async (currentUser) => { + const onFocus = () => { + return auth.onAuthStateChanged((currentUser) => { if (!currentUser) { loggedOut(); } else { From cfecb0379d887db9eff3b47f9b3a4fa1c34a53c4 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 11:36:28 +0000 Subject: [PATCH 5/7] remove more unnecessary async keywords --- .../src/packages/cloud/services/auth/AuthService.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx index b13035ee58cc9..03f41b2a2ae80 100644 --- a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx @@ -148,10 +148,10 @@ export const AuthenticationProvider: React.FC> stateRef.current = state; const onAuthStateChange = useCallback( - async (currentUser: FirebaseUser | null) => { + (currentUser: FirebaseUser | null) => { if (!stateRef.current.inited) { if (stateRef.current.currentUser === null && currentUser) { - await onAfterAuth(currentUser); + onAfterAuth(currentUser); } else { authInited(); } @@ -161,7 +161,7 @@ export const AuthenticationProvider: React.FC> ); useEffectOnce(() => { - return auth.onAuthStateChanged(async (currentUser) => { + return auth.onAuthStateChanged((currentUser) => { // We want to run this effect only once on initial page opening onAuthStateChange(currentUser); }); From 2ffbc350089df6ffba1dc79c79f68fb5bbdac253 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 15:58:27 +0000 Subject: [PATCH 6/7] revert aut logout behavior --- .../cloud/services/auth/AuthService.tsx | 33 +++---------------- 1 file changed, 4 insertions(+), 29 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx index 03f41b2a2ae80..bc107ea3ff1da 100644 --- 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, useEffect, useMemo, useRef } from "react"; +import React, { useCallback, useContext, useMemo, useRef } from "react"; import { useQueryClient } from "react-query"; import { useEffectOnce } from "react-use"; import { Observable, Subject } from "rxjs"; @@ -147,8 +147,9 @@ export const AuthenticationProvider: React.FC> const stateRef = useRef(state); stateRef.current = state; - const onAuthStateChange = useCallback( - (currentUser: FirebaseUser | null) => { + useEffectOnce(() => { + return auth.onAuthStateChanged((currentUser) => { + // We want to run this effect only once on initial page opening if (!stateRef.current.inited) { if (stateRef.current.currentUser === null && currentUser) { onAfterAuth(currentUser); @@ -156,35 +157,9 @@ export const AuthenticationProvider: React.FC> authInited(); } } - }, - [onAfterAuth, authInited] - ); - - useEffectOnce(() => { - return auth.onAuthStateChanged((currentUser) => { - // We want to run this effect only once on initial page opening - onAuthStateChange(currentUser); }); }); - // Check auth state on window focus, in case the user logged out in a different tab - useEffect(() => { - const onFocus = () => { - return auth.onAuthStateChanged((currentUser) => { - if (!currentUser) { - loggedOut(); - } else { - onAuthStateChange(currentUser); - } - }); - }; - - window.addEventListener("focus", onFocus); - return () => { - window.removeEventListener("focus", onFocus); - }; - }, [auth, loggedOut, onAfterAuth, onAuthStateChange]); - const queryClient = useQueryClient(); const ctx: AuthContextApi = useMemo( From 1bb697df7d4982be51f16e727a81cecad54a53c9 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 16:02:50 +0000 Subject: [PATCH 7/7] revert changes --- .../src/packages/cloud/services/auth/AuthService.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx index bc107ea3ff1da..d62714cd5b9df 100644 --- a/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx @@ -148,11 +148,11 @@ export const AuthenticationProvider: React.FC> stateRef.current = state; useEffectOnce(() => { - return auth.onAuthStateChanged((currentUser) => { + return auth.onAuthStateChanged(async (currentUser) => { // We want to run this effect only once on initial page opening if (!stateRef.current.inited) { if (stateRef.current.currentUser === null && currentUser) { - onAfterAuth(currentUser); + await onAfterAuth(currentUser); } else { authInited(); }