From 2834f3f8e88439a7f758dcddda8f87a4c1c61e59 Mon Sep 17 00:00:00 2001 From: Amir Zarrinkafsh Date: Wed, 11 Nov 2020 14:51:42 +1100 Subject: [PATCH] [BUGFIX] Fix re-rendering callbacks (#1445) https://github.com/authelia/authelia/pull/1403/commits/b34b10322bee7193b9ff6ba05001bcba7fc0745e introduced a regression where including deps in the associated useCallback functions would cause React to re-render components. This resulted in unexpected symptoms like multiple Duo push requests, even if a successful or errored request had already been received. Empty deps/no re-rendering for the respective callbacks is an expected result therefore we can safely ignore these issues the linter is suggesting needs to be fixed. --- .../LoginPortal/SecondFactor/OneTimePasswordMethod.tsx | 6 ++++-- .../LoginPortal/SecondFactor/PushNotificationMethod.tsx | 6 ++++-- .../views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx | 6 ++++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx index 935756e1..e4bae173 100644 --- a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx @@ -31,8 +31,10 @@ const OneTimePasswordMethod = function (props: Props) { const redirectionURL = useRedirectionURL(); const { onSignInSuccess, onSignInError } = props; - const onSignInErrorCallback = useCallback(onSignInError, [onSignInError]); - const onSignInSuccessCallback = useCallback(onSignInSuccess, [onSignInSuccess]); + /* eslint-disable react-hooks/exhaustive-deps */ + const onSignInErrorCallback = useCallback(onSignInError, []); + const onSignInSuccessCallback = useCallback(onSignInSuccess, []); + /* eslint-enable react-hooks/exhaustive-deps */ const signInFunc = useCallback(async () => { if (props.authenticationLevel === AuthenticationLevel.TwoFactor) { diff --git a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx index 8847d1b9..3a6a0100 100644 --- a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx @@ -30,8 +30,10 @@ const PushNotificationMethod = function (props: Props) { const mounted = useIsMountedRef(); const { onSignInSuccess, onSignInError } = props; - const onSignInErrorCallback = useCallback(onSignInError, [onSignInError]); - const onSignInSuccessCallback = useCallback(onSignInSuccess, [onSignInSuccess]); + /* eslint-disable react-hooks/exhaustive-deps */ + const onSignInErrorCallback = useCallback(onSignInError, []); + const onSignInSuccessCallback = useCallback(onSignInSuccess, []); + /* eslint-enable react-hooks/exhaustive-deps */ const signInFunc = useCallback(async () => { if (props.authenticationLevel === AuthenticationLevel.TwoFactor) { diff --git a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx index 8f4c99a0..97a4e22b 100644 --- a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx @@ -38,8 +38,10 @@ const SecurityKeyMethod = function (props: Props) { const [timerPercent, triggerTimer,] = useTimer(signInTimeout * 1000 - 500); const { onSignInSuccess, onSignInError } = props; - const onSignInErrorCallback = useCallback(onSignInError, [onSignInError]); - const onSignInSuccessCallback = useCallback(onSignInSuccess, [onSignInSuccess]); + /* eslint-disable react-hooks/exhaustive-deps */ + const onSignInErrorCallback = useCallback(onSignInError, []); + const onSignInSuccessCallback = useCallback(onSignInSuccess, []); + /* eslint-enable react-hooks/exhaustive-deps */ const doInitiateSignIn = useCallback(async () => { // If user is already authenticated, we don't initiate sign in process.