Adrienne / Fix SSO triggering multiple times due to useeffect dependencies

packages/core/src/App/AppContent.tsx

@@ -73,7 +73,6 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
         is_client_store_initialized,
         isOAuth2Enabled,
         oAuthLogout,
-        prevent_single_login,
     });
 
     const [isWebPasskeysFFEnabled, isGBLoaded] = useGrowthbookIsOn({

packages/core/src/App/Containers/RootComponent/root-component.jsx

@@ -25,7 +25,14 @@ const RootComponent = observer(props => {
         setIsWalletsOnboardingTourGuideVisible,
         notification_messages_ui,
     } = ui;
-    const { has_wallet, logout, prevent_redirect_to_hub, is_client_store_initialized, setPreventSingleLogin } = client;
+    const {
+        has_wallet,
+        logout,
+        prevent_redirect_to_hub,
+        is_client_store_initialized,
+        prevent_single_login,
+        setPreventSingleLogin,
+    } = client;
 
     const { oAuthLogout } = useOauth2({ handleLogout: logout });
 
@@ -56,14 +63,15 @@ const RootComponent = observer(props => {
         }
 
         const shouldStayInDerivApp = !isHubRedirectionEnabled || !has_wallet || prevent_redirect_to_hub;
-        if (isHubRedirectionLoaded && is_client_store_initialized && shouldStayInDerivApp) {
+        if (prevent_single_login && isHubRedirectionLoaded && is_client_store_initialized && shouldStayInDerivApp) {
             setPreventSingleLogin(false);
         }
     }, [
         isHubRedirectionLoaded,
         isHubRedirectionEnabled,
         has_wallet,
         prevent_redirect_to_hub,
+        prevent_single_login,
         is_client_store_initialized,
     ]);
 

packages/hooks/src/__tests__/useSilentLoginAndLogout.spec.ts → packages/hooks/src/__tests__/useSilentLoginAndLogout.spec.tsx

@@ -1,9 +1,11 @@
+import React from 'react';
 import Cookies from 'js-cookie';
 
 import { requestOidcAuthentication } from '@deriv-com/auth-client';
 import { renderHook } from '@testing-library/react-hooks';
 
 import useSilentLoginAndLogout from '../useSilentLoginAndLogout';
+import { mockStore, StoreProvider } from '@deriv/stores';
 
 jest.mock('js-cookie', () => ({
     get: jest.fn(),
@@ -15,6 +17,12 @@ jest.mock('@deriv-com/auth-client', () => ({
 
 describe('useSilentLoginAndLogout', () => {
     const mockOAuthLogout = jest.fn();
+    const mockStoreData = mockStore({
+        client: { prevent_single_login: false },
+    });
+    const wrapper = ({ children }: { children: JSX.Element }) => (
+        <StoreProvider store={mockStoreData}>{children}</StoreProvider>
+    );
 
     beforeEach(() => {
         jest.clearAllMocks();
@@ -42,12 +50,14 @@ describe('useSilentLoginAndLogout', () => {
 
         jest.spyOn(Storage.prototype, 'getItem').mockReturnValue(JSON.stringify({}));
 
-        renderHook(() =>
-            useSilentLoginAndLogout({
-                is_client_store_initialized: true,
-                isOAuth2Enabled: true,
-                oAuthLogout: mockOAuthLogout,
-            })
+        renderHook(
+            () =>
+                useSilentLoginAndLogout({
+                    is_client_store_initialized: true,
+                    isOAuth2Enabled: true,
+                    oAuthLogout: mockOAuthLogout,
+                }),
+            { wrapper }
         );
 
         expect(requestOidcAuthentication).toHaveBeenCalledWith({
@@ -61,12 +71,14 @@ describe('useSilentLoginAndLogout', () => {
 
         jest.spyOn(Storage.prototype, 'getItem').mockReturnValue(JSON.stringify({}));
 
-        renderHook(() =>
-            useSilentLoginAndLogout({
-                is_client_store_initialized: true,
-                isOAuth2Enabled: true,
-                oAuthLogout: mockOAuthLogout,
-            })
+        renderHook(
+            () =>
+                useSilentLoginAndLogout({
+                    is_client_store_initialized: true,
+                    isOAuth2Enabled: true,
+                    oAuthLogout: mockOAuthLogout,
+                }),
+            { wrapper }
         );
 
         expect(requestOidcAuthentication).not.toHaveBeenCalled();
@@ -83,12 +95,14 @@ describe('useSilentLoginAndLogout', () => {
             value: { pathname: '/callback' },
         });
 
-        renderHook(() =>
-            useSilentLoginAndLogout({
-                is_client_store_initialized: true,
-                isOAuth2Enabled: true,
-                oAuthLogout: mockOAuthLogout,
-            })
+        renderHook(
+            () =>
+                useSilentLoginAndLogout({
+                    is_client_store_initialized: true,
+                    isOAuth2Enabled: true,
+                    oAuthLogout: mockOAuthLogout,
+                }),
+            { wrapper }
         );
 
         expect(requestOidcAuthentication).not.toHaveBeenCalled();
@@ -100,12 +114,14 @@ describe('useSilentLoginAndLogout', () => {
 
         jest.spyOn(Storage.prototype, 'getItem').mockReturnValue(JSON.stringify({ account1: {}, account2: {} }));
 
-        renderHook(() =>
-            useSilentLoginAndLogout({
-                is_client_store_initialized: true,
-                isOAuth2Enabled: true,
-                oAuthLogout: mockOAuthLogout,
-            })
+        renderHook(
+            () =>
+                useSilentLoginAndLogout({
+                    is_client_store_initialized: true,
+                    isOAuth2Enabled: true,
+                    oAuthLogout: mockOAuthLogout,
+                }),
+            { wrapper }
         );
 
         expect(requestOidcAuthentication).not.toHaveBeenCalled();
@@ -117,12 +133,14 @@ describe('useSilentLoginAndLogout', () => {
 
         jest.spyOn(Storage.prototype, 'getItem').mockReturnValue(JSON.stringify({ account1: {}, account2: {} }));
 
-        renderHook(() =>
-            useSilentLoginAndLogout({
-                is_client_store_initialized: true,
-                isOAuth2Enabled: true,
-                oAuthLogout: mockOAuthLogout,
-            })
+        renderHook(
+            () =>
+                useSilentLoginAndLogout({
+                    is_client_store_initialized: true,
+                    isOAuth2Enabled: true,
+                    oAuthLogout: mockOAuthLogout,
+                }),
+            { wrapper }
         );
 
         expect(requestOidcAuthentication).not.toHaveBeenCalled();

packages/hooks/src/useSilentLoginAndLogout.ts

@@ -1,8 +1,8 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import Cookies from 'js-cookie';
 
 import { requestOidcAuthentication } from '@deriv-com/auth-client';
-
+import { useStore } from '@deriv/stores';
 /**
  * Handles silent login and single logout logic for OAuth2.
  *
@@ -16,60 +16,53 @@ const useSilentLoginAndLogout = ({
     is_client_store_initialized,
     isOAuth2Enabled,
     oAuthLogout,
-    prevent_single_login,
 }: {
     is_client_store_initialized: boolean;
     isOAuth2Enabled: boolean;
     oAuthLogout: () => Promise<void>;
-    prevent_single_login?: boolean;
 }) => {
     const loggedState = Cookies.get('logged_state');
 
+    const { client } = useStore();
     const clientAccounts = JSON.parse(localStorage.getItem('client.accounts') || '{}');
     const isClientAccountsPopulated = Object.keys(clientAccounts).length > 0;
     const isSilentLoginExcluded =
         window.location.pathname.includes('callback') || window.location.pathname.includes('endpoint');
 
+    // state to manage and ensure OIDC callback functions are invoked once only
+    const isAuthenticating = useRef(false);
+    const isLoggingOut = useRef(false);
+    const { prevent_single_login } = client;
+
     useEffect(() => {
-        if (prevent_single_login) return;
+        if (prevent_single_login || !isOAuth2Enabled || !is_client_store_initialized || isSilentLoginExcluded) return;
         // NOTE: Remove this logic once social signup is intergated with OIDC
         const params = new URLSearchParams(window.location.search);
         const isUsingLegacyFlow = params.has('token1') && params.has('acct1');
         if (isUsingLegacyFlow && loggedState === 'false' && isOAuth2Enabled) {
             return;
         }
 
-        if (
-            !isUsingLegacyFlow &&
-            loggedState === 'true' &&
-            !isClientAccountsPopulated &&
-            isOAuth2Enabled &&
-            is_client_store_initialized &&
-            !isSilentLoginExcluded
-        ) {
+        if (!isUsingLegacyFlow && loggedState === 'true' && !isClientAccountsPopulated) {
             // Perform silent login
+            if (isAuthenticating.current) return;
+            isAuthenticating.current = true;
             requestOidcAuthentication({
                 redirectCallbackUri: `${window.location.origin}/callback`,
             });
         }
 
-        if (
-            !isUsingLegacyFlow &&
-            loggedState === 'false' &&
-            is_client_store_initialized &&
-            isOAuth2Enabled &&
-            isClientAccountsPopulated &&
-            !window.location.pathname.includes('callback')
-        ) {
+        if (!isUsingLegacyFlow && loggedState === 'false' && isClientAccountsPopulated) {
             // Perform single logout
+            if (isLoggingOut.current) return;
+            isLoggingOut.current = true;
             oAuthLogout();
         }
     }, [
         loggedState,
         isClientAccountsPopulated,
         is_client_store_initialized,
         isOAuth2Enabled,
-        oAuthLogout,
         isSilentLoginExcluded,
         prevent_single_login,
     ]);