From 5576a4c293efb48671d868cb84614a7a82f5525c Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@deriv.com>
Date: Thu, 12 Dec 2024 11:37:03 +0800
Subject: [PATCH 1/3] feat: oidc implementation

---
 package-lock.json                             | 30 ++++++++-------
 package.json                                  |  2 +-
 .../UserNavbarItem/item.desktop.tsx           | 38 ++++++++++++++++++-
 .../Apiexplorer/LoginDialog/index.tsx         |  7 +++-
 src/features/Callback/CallbackPage.tsx        | 17 +++++++++
 src/features/Callback/index.ts                |  2 +
 src/features/Login/Login.tsx                  |  8 +++-
 .../dashboard/__tests__/dashboard.test.tsx    |  5 +++
 src/features/dashboard/dashboard.tsx          |  3 +-
 src/hooks/useHandleLogin/index.tsx            | 35 +++++++++++++++++
 .../useLogout/__tests__/useLogout.test.tsx    | 13 +++++++
 src/hooks/useLogout/index.tsx                 | 13 +++----
 src/pages/auth.tsx                            |  5 ++-
 src/pages/callback.tsx                        | 26 +++++++++++++
 src/utils/__tests__/utils.test.ts             | 31 ++++++++++++++-
 src/utils/index.ts                            | 26 +++++++++++--
 16 files changed, 227 insertions(+), 34 deletions(-)
 create mode 100644 src/features/Callback/CallbackPage.tsx
 create mode 100644 src/features/Callback/index.ts
 create mode 100644 src/hooks/useHandleLogin/index.tsx
 create mode 100644 src/pages/callback.tsx

diff --git a/package-lock.json b/package-lock.json
index 5d70b9391..cab213a02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
-  "name": "deriv-api-docs",
+  "name": "@deriv/deriv-api-docs",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "deriv-api-docs",
+      "name": "@deriv/deriv-api-docs",
       "version": "1.0.0",
       "dependencies": {
         "@deriv-com/analytics": "^1.22.1",
-        "@deriv-com/auth-client": "^1.0.29",
+        "@deriv-com/auth-client": "^1.3.1",
         "@deriv-com/quill-ui": "^1.16.21",
         "@deriv/deriv-api": "^1.0.11",
         "@deriv/ui": "^0.8.0",
@@ -2599,12 +2599,16 @@
       }
     },
     "node_modules/@deriv-com/auth-client": {
-      "version": "1.0.29",
-      "resolved": "https://registry.npmjs.org/@deriv-com/auth-client/-/auth-client-1.0.29.tgz",
-      "integrity": "sha512-4iBxaSKM9hu6qVHGUr4MHtik59j1ZIuvveRnSqAbqQgcQGzKfSLRwGJ53P/5lVByh9fIIyICpuxbTgaaYA4eXg==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@deriv-com/auth-client/-/auth-client-1.3.3.tgz",
+      "integrity": "sha512-LXp890lIZjZjSIs1OzHZCET/qQp9ACdLnbKOMXFAvqleNlUFZstlIhZIDYHTMorU3pclh3oG/wErZwRLNTMxkw==",
       "dependencies": {
-        "@deriv-com/utils": "^0.0.37",
+        "@deriv-com/utils": "^0.0.42",
+        "js-cookie": "3.0.5",
         "oidc-client-ts": "^3.1.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "^4.27.3"
       }
     },
     "node_modules/@deriv-com/quill-tokens": {
@@ -2688,9 +2692,9 @@
       }
     },
     "node_modules/@deriv-com/utils": {
-      "version": "0.0.37",
-      "resolved": "https://registry.npmjs.org/@deriv-com/utils/-/utils-0.0.37.tgz",
-      "integrity": "sha512-+ngUvT+OqwblBoqkHcsbLtljjwOGIjjMpo5xLS5fwyhtNvBe8Rcq+140QV1j0xq9vlm2kmcowEKIVBq33imFmg=="
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@deriv-com/utils/-/utils-0.0.42.tgz",
+      "integrity": "sha512-4JhTpg0sQWCq94RSMGpuT/09bYSV8yO3WdunM2R84qxWNitRH/i4k/xfdleRVzX+xLSmMmJWlkbD6NAlP8U5eg=="
     },
     "node_modules/@deriv/api-types": {
       "version": "1.0.292",
@@ -6472,9 +6476,9 @@
       }
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
-      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz",
+      "integrity": "sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==",
       "cpu": [
         "x64"
       ],
diff --git a/package.json b/package.json
index 6c854c79a..5a7c8fda2 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@deriv-com/quill-ui": "^1.16.21",
     "@deriv-com/analytics": "^1.22.1",
-    "@deriv-com/auth-client": "^1.0.29",
+    "@deriv-com/auth-client": "^1.3.1",
     "@deriv/deriv-api": "^1.0.11",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-spring/web": "^9.7.3",
diff --git a/src/components/UserNavbarItem/item.desktop.tsx b/src/components/UserNavbarItem/item.desktop.tsx
index 7bbd9594d..8e3c4c894 100644
--- a/src/components/UserNavbarItem/item.desktop.tsx
+++ b/src/components/UserNavbarItem/item.desktop.tsx
@@ -12,6 +12,8 @@ import useDeviceType from '@site/src/hooks/useDeviceType';
 
 import { IUserNavbarItemProps } from './item.types';
 import styles from './UserNavbarItem.module.scss';
+import Cookies from 'js-cookie';
+import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
 
 interface IActionProps {
   handleClick: () => void;
@@ -62,12 +64,16 @@ const DashboardActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) =>
 const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) => {
   const signedInButtonClasses = clsx('navbar__item', styles.UserNavbarItem, styles.SignedInButton);
 
+  const { handleLogin } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
   return (
     <nav className='right-navigation'>
       <Button
         variant='secondary'
         color='black'
-        onClick={handleClick}
+        onClick={handleLogin}
         className={signedInButtonClasses}
         data-testid='sa_login'
       >
@@ -88,7 +94,6 @@ const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) =>
 };
 
 const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => {
-  const { logout } = useLogout();
   const { deviceType } = useDeviceType();
   const isDesktop = deviceType === 'desktop';
 
@@ -96,6 +101,35 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
     location.assign(authUrl);
   };
 
+  const { handleLogin, isOAuth2Enabled } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
+  const { logout } = useLogout();
+
+  const loggedState = Cookies.get('logged_state');
+
+  const loginAccountsSessionStorage = JSON.parse(sessionStorage.getItem('login-accounts'));
+
+  const isLoginAccountsPopulated =
+    loginAccountsSessionStorage && loginAccountsSessionStorage.length > 0;
+
+  React.useEffect(() => {
+    if (
+      loggedState === 'true' &&
+      isOAuth2Enabled &&
+      !isLoginAccountsPopulated &&
+      (!window.location.pathname.includes('callback') ||
+        !window.location.pathname.includes('endpoint'))
+    ) {
+      console.log('isLoginAccountsPopulated', !isLoginAccountsPopulated);
+      handleLogin();
+    }
+    if (loggedState === 'false' && isOAuth2Enabled && isLoginAccountsPopulated) {
+      logout();
+    }
+  }, [isOAuth2Enabled, loggedState, logout, handleLogin, isLoginAccountsPopulated]);
+
   return is_logged_in ? (
     <DashboardActions handleClick={logout} isDesktop={isDesktop} />
   ) : (
diff --git a/src/features/Apiexplorer/LoginDialog/index.tsx b/src/features/Apiexplorer/LoginDialog/index.tsx
index fad17a52d..dc72af6ed 100644
--- a/src/features/Apiexplorer/LoginDialog/index.tsx
+++ b/src/features/Apiexplorer/LoginDialog/index.tsx
@@ -4,6 +4,7 @@ import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import styles from './LoginDialog.module.scss';
 import Translate, { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
 
 type TLoginDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -25,6 +26,10 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
     location.assign(getUrl(currentLocale));
   };
 
+  const { handleLogin } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
   const handleSignUp = () => {
     location.assign('https://deriv.com/signup/');
   };
@@ -57,7 +62,7 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
               <Button color='tertiary' onClick={handleSignUp} className={styles.btn}>
                 <Translate>Sign up</Translate>
               </Button>
-              <Button color='primary' onClick={handleClick} className={styles.btn}>
+              <Button color='primary' onClick={handleLogin} className={styles.btn}>
                 <Translate>Log in</Translate>
               </Button>
             </div>
diff --git a/src/features/Callback/CallbackPage.tsx b/src/features/Callback/CallbackPage.tsx
new file mode 100644
index 000000000..e1bbcd403
--- /dev/null
+++ b/src/features/Callback/CallbackPage.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Callback } from '@deriv-com/auth-client';
+import { transformAccountsFromResponseBody } from '@site/src/utils';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+const CallbackPage = () => {
+  const { updateLoginAccounts } = useAuthContext();
+  return (
+    <Callback
+      onSignInSuccess={(tokens) => {
+        const accounts = transformAccountsFromResponseBody(tokens);
+        updateLoginAccounts(accounts);
+        window.location.href = '/';
+      }}
+    />
+  );
+};
+export default CallbackPage;
diff --git a/src/features/Callback/index.ts b/src/features/Callback/index.ts
new file mode 100644
index 000000000..fa3eb6afe
--- /dev/null
+++ b/src/features/Callback/index.ts
@@ -0,0 +1,2 @@
+import CallbackPage from './CallbackPage';
+export default CallbackPage;
diff --git a/src/features/Login/Login.tsx b/src/features/Login/Login.tsx
index ff119d368..e6c1b31c3 100644
--- a/src/features/Login/Login.tsx
+++ b/src/features/Login/Login.tsx
@@ -5,6 +5,7 @@ import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import Footer from '@site/src/components/Footer';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
 
 export const Login = () => {
   const { getUrl } = useLoginUrl();
@@ -15,6 +16,11 @@ export const Login = () => {
   const handleClick = () => {
     window.location.assign(getUrl(currentLocale));
   };
+
+  const { handleLogin } = useHandleLogin({
+    onClickLogin: handleClick,
+  });
+
   return (
     <div>
       <div className={styles.login} data-testid='login'>
@@ -26,7 +32,7 @@ export const Login = () => {
             </Translate>
           </Text>
           <div className={styles.action}>
-            <Button color='primary' onClick={handleClick}>
+            <Button color='primary' onClick={handleLogin}>
               <Translate>Log In</Translate>
             </Button>
           </div>
diff --git a/src/features/dashboard/__tests__/dashboard.test.tsx b/src/features/dashboard/__tests__/dashboard.test.tsx
index 3346a7321..8ce7a2f4d 100644
--- a/src/features/dashboard/__tests__/dashboard.test.tsx
+++ b/src/features/dashboard/__tests__/dashboard.test.tsx
@@ -48,6 +48,11 @@ mockReactTable.mockImplementation(() => ({
   headerGroups: [],
 }));
 
+jest.mock('@docusaurus/BrowserOnly', () => ({
+  __esModule: true,
+  default: ({ children }: { children: () => JSX.Element }) => children(),
+}));
+
 describe('AppManager', () => {
   it('shows the login screen', () => {
     mockUseAuthContext.mockImplementation(() => ({
diff --git a/src/features/dashboard/dashboard.tsx b/src/features/dashboard/dashboard.tsx
index 438f44da7..af5b04ad8 100644
--- a/src/features/dashboard/dashboard.tsx
+++ b/src/features/dashboard/dashboard.tsx
@@ -3,6 +3,7 @@ import useAuthContext from '@site/src/hooks/useAuthContext';
 import useAppManager from '@site/src/hooks/useAppManager';
 import ManageDashboard from './manage-dashboard';
 import { Login } from '../Login/Login';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 const Dashboard = () => {
   const { is_logged_in } = useAuthContext();
@@ -16,7 +17,7 @@ const Dashboard = () => {
   }, [setIsDashboard]);
 
   if (is_logged_in) return <ManageDashboard />;
-  return <Login />;
+  return <BrowserOnly>{() => <Login />}</BrowserOnly>;
 };
 
 export default Dashboard;
diff --git a/src/hooks/useHandleLogin/index.tsx b/src/hooks/useHandleLogin/index.tsx
new file mode 100644
index 000000000..667819d37
--- /dev/null
+++ b/src/hooks/useHandleLogin/index.tsx
@@ -0,0 +1,35 @@
+import useGrowthbookGetFeatureValue from '../useGrowthbookGetFeatureValue/';
+import {
+  requestOidcAuthentication,
+  TOAuth2EnabledAppList,
+  useIsOAuth2Enabled,
+} from '@deriv-com/auth-client';
+/**
+ * Handles the new login flow for the user using OIDC.
+ *
+ * If the user is not logged in and OAuth2 is enabled, it will redirect the user to the
+ * OAuth2 authorization page from the OIDC config endpoint. If OAuth2 is not enabled it will
+ * redirect the user to the legacy oauth url coming from the onClickLogin callback.
+ *
+ * @param {Object} props - The props object.
+ * @param {Function} props.onClickLogin - The callback to be called when the user is logged in.
+ * @returns {Object} - An object with the `handleLogin` function.
+ */
+export const useHandleLogin = ({ onClickLogin }: { onClickLogin?: () => void }) => {
+  const [OAuth2EnabledApps, OAuth2EnabledAppsInitialised] =
+    useGrowthbookGetFeatureValue<TOAuth2EnabledAppList>({
+      featureFlag: 'hydra_be',
+    });
+  const isOAuth2Enabled = useIsOAuth2Enabled(OAuth2EnabledApps, OAuth2EnabledAppsInitialised);
+  const handleLogin = async () => {
+    if (isOAuth2Enabled) {
+      await requestOidcAuthentication({
+        redirectCallbackUri: `${window.location.origin}/callback`,
+      });
+    }
+    if (onClickLogin) {
+      onClickLogin();
+    }
+  };
+  return { handleLogin, isOAuth2Enabled };
+};
diff --git a/src/hooks/useLogout/__tests__/useLogout.test.tsx b/src/hooks/useLogout/__tests__/useLogout.test.tsx
index e48b7039f..4e0dd64ec 100644
--- a/src/hooks/useLogout/__tests__/useLogout.test.tsx
+++ b/src/hooks/useLogout/__tests__/useLogout.test.tsx
@@ -23,6 +23,19 @@ mockUseAuthContext.mockImplementation(() => ({
   updateCurrentLoginAccount: mockUpdateCurrentLoginAccount,
 }));
 
+jest.mock('@deriv-com/auth-client', () => ({
+  OAuth2Logout: jest.fn((WSLogoutAndRedirect) => {
+    const mockIframe = document.createElement('iframe');
+    mockIframe.id = 'logout-iframe';
+    document.body.appendChild(mockIframe);
+    setTimeout(() => {
+      const event = new MessageEvent('message', { data: 'logout_complete' });
+      window.dispatchEvent(event);
+    }, 100);
+    WSLogoutAndRedirect();
+  }),
+}));
+
 const logout_response = {
   logout: 1,
   req_id: 1,
diff --git a/src/hooks/useLogout/index.tsx b/src/hooks/useLogout/index.tsx
index a495567ed..a91829396 100644
--- a/src/hooks/useLogout/index.tsx
+++ b/src/hooks/useLogout/index.tsx
@@ -1,15 +1,10 @@
 import apiManager from '@site/src/configs/websocket';
 import { useCallback } from 'react';
 import useAuthContext from '../useAuthContext';
-import useGrowthbookGetFeatureValue from '../useGrowthbookGetFeatureValue';
-import { useOAuth2, TOAuth2EnabledAppList } from '@deriv-com/auth-client';
+import { OAuth2Logout } from '@deriv-com/auth-client';
 
 const useLogout = () => {
   const { updateLoginAccounts, updateCurrentLoginAccount } = useAuthContext();
-  const [OAuth2EnabledApps, OAuth2EnabledAppsInitialised] =
-    useGrowthbookGetFeatureValue<TOAuth2EnabledAppList>({
-      featureFlag: 'hydra_be',
-    });
 
   // we clean up everything related to the user here, for now it's just user's account
   // later on we should clear user tokens as well
@@ -23,9 +18,11 @@ const useLogout = () => {
     });
   }, [updateCurrentLoginAccount, updateLoginAccounts]);
 
-  const { OAuth2Logout } = useOAuth2({ OAuth2EnabledApps, OAuth2EnabledAppsInitialised }, logout);
+  const handleLogout = () => {
+    OAuth2Logout(logout);
+  };
 
-  return { logout: OAuth2Logout };
+  return { logout: handleLogout };
 };
 
 export default useLogout;
diff --git a/src/pages/auth.tsx b/src/pages/auth.tsx
index 9d468849d..75ed6626d 100644
--- a/src/pages/auth.tsx
+++ b/src/pages/auth.tsx
@@ -5,6 +5,7 @@ import useAuthParams from '../hooks/useAuthParams';
 import { useEffect } from 'react';
 import { Redirect, useLocation } from '@docusaurus/router';
 import useAuthContext from '../hooks/useAuthContext';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 export default function Auth(): JSX.Element {
   const { search } = useLocation(); // to get the search params
@@ -19,7 +20,7 @@ export default function Auth(): JSX.Element {
   useEffect(() => {
     if (is_logged_in) {
       const params = new URLSearchParams(search);
-      const redirect_route = params.get('route')?.replace(/%2F/g, '/') || '/'; 
+      const redirect_route = params.get('route')?.replace(/%2F/g, '/') || '/';
       setRedirectRoute(redirect_route);
     }
   }, [is_logged_in, search]);
@@ -31,7 +32,7 @@ export default function Auth(): JSX.Element {
   return (
     <Layout title='Auth' description='Deriv API documentation'>
       <main>
-        <Login />
+        <BrowserOnly>{() => <Login />}</BrowserOnly>
       </main>
     </Layout>
   );
diff --git a/src/pages/callback.tsx b/src/pages/callback.tsx
new file mode 100644
index 000000000..2da224812
--- /dev/null
+++ b/src/pages/callback.tsx
@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import Layout from '@theme/Layout';
+import CallbackPage from '../features/Callback';
+const Callback = () => {
+  useEffect(() => {
+    const navbar = document.getElementsByClassName('navbar navbar--fixed-top')[0] as HTMLElement;
+    if (navbar) {
+      navbar.style.display = 'none';
+    }
+    const metaTag = document.createElement('meta');
+    metaTag.name = 'robots';
+    metaTag.content = 'noindex, nofollow';
+    document.head.appendChild(metaTag);
+    return () => {
+      document.head.removeChild(metaTag);
+    };
+  }, []);
+  return (
+    <Layout title='Callback' description=''>
+      <main>
+        <CallbackPage />
+      </main>
+    </Layout>
+  );
+};
+export default Callback;
diff --git a/src/utils/__tests__/utils.test.ts b/src/utils/__tests__/utils.test.ts
index 366f8e618..d9c3f16b4 100644
--- a/src/utils/__tests__/utils.test.ts
+++ b/src/utils/__tests__/utils.test.ts
@@ -1,8 +1,9 @@
 import * as utils from '@site/src/utils';
-import { LOCALHOST_APP_ID, DEFAULT_WS_SERVER, VERCEL_DEPLOYMENT_APP_ID } from '../constants';
+import { LOCALHOST_APP_ID, DEFAULT_WS_SERVER } from '../constants';
 const {
   getAccountsFromSearchParams,
   getAppId,
+  transformAccountsFromResponseBody,
   getIsBrowser,
   isHost,
   getServerConfig,
@@ -106,6 +107,34 @@ describe('Get Is Browser', () => {
   });
 });
 
+describe('Transform Accounts from Response Body', () => {
+  it('Should return an array of account objects', () => {
+    const inputData = {
+      acct1: 'CR111111',
+      cur1: 'USD',
+      token1: 'a1-123123123',
+      acct2: 'CR222222',
+      cur2: 'ETH',
+      token2: 'a1-34343434',
+    };
+    const expectedOutput = [
+      {
+        currency: 'USD',
+        name: 'CR111111',
+        token: 'a1-123123123',
+      },
+      {
+        currency: 'ETH',
+        name: 'CR222222',
+        token: 'a1-34343434',
+      },
+    ];
+    const output = transformAccountsFromResponseBody(inputData);
+    expect(output.length).toBe(expectedOutput.length);
+    expect(output).toStrictEqual(expectedOutput);
+  });
+});
+
 describe('Get Accounts from Search Params', () => {
   it('Should return user accounts', () => {
     const test_search_params =
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 827bb4dc3..0db702f34 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -106,6 +106,27 @@ export const getIsBrowser = () => {
   return typeof window !== 'undefined';
 };
 
+/**
+ * @description This function takes the response data from the accounts endpoint and transforms it into an array of objects
+ * @param {object} data - The response data from the accounts endpoint
+ * @returns {array} An array of objects with the shape of { currency: string, name: string, token: string }
+ */
+export const transformAccountsFromResponseBody = (data) => {
+  const result = [];
+  const keys = Object.keys(data);
+  for (let i = 1; i <= keys.length / 3; i++) {
+    const groupedObject = {
+      currency: data[`cur${i}`],
+      name: data[`acct${i}`],
+      token: data[`token${i}`],
+    };
+    if (groupedObject.currency && groupedObject.name && groupedObject.token) {
+      result.push(groupedObject);
+    }
+  }
+  return result;
+};
+
 /**
  * @description based on the received query params after successful login, generates the array of user's accounts
  * @param searchParams the query params in the auth path when user does the login successfully
@@ -126,10 +147,7 @@ export const getAccountsFromSearchParams = (searchParams: string) => {
     const queryIndex = index + 1;
 
     // we should check each account in the search params, this is some kind of validation for the URL search params
-    if (
-      params.has(`acct${queryIndex}`) &&
-      params.has(`token${queryIndex}`)
-    ) {
+    if (params.has(`acct${queryIndex}`) && params.has(`token${queryIndex}`)) {
       accounts.push({
         name: params.get(`acct${queryIndex}`),
         token: params.get(`token${queryIndex}`),

From bd4e2773e9d2d929598ae4a1fe2d679fa319710c Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@deriv.com>
Date: Fri, 13 Dec 2024 10:16:43 +0800
Subject: [PATCH 2/3] chore: remove log

---
 src/components/UserNavbarItem/item.desktop.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/UserNavbarItem/item.desktop.tsx b/src/components/UserNavbarItem/item.desktop.tsx
index 8e3c4c894..50e13f86b 100644
--- a/src/components/UserNavbarItem/item.desktop.tsx
+++ b/src/components/UserNavbarItem/item.desktop.tsx
@@ -122,7 +122,6 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
       (!window.location.pathname.includes('callback') ||
         !window.location.pathname.includes('endpoint'))
     ) {
-      console.log('isLoginAccountsPopulated', !isLoginAccountsPopulated);
       handleLogin();
     }
     if (loggedState === 'false' && isOAuth2Enabled && isLoginAccountsPopulated) {

From dfcbcc823bc6939e342f1c4808f770d886acb7f8 Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@deriv.com>
Date: Fri, 13 Dec 2024 10:29:53 +0800
Subject: [PATCH 3/3] chore: change logic

---
 src/components/UserNavbarItem/item.desktop.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/UserNavbarItem/item.desktop.tsx b/src/components/UserNavbarItem/item.desktop.tsx
index 50e13f86b..c0475816d 100644
--- a/src/components/UserNavbarItem/item.desktop.tsx
+++ b/src/components/UserNavbarItem/item.desktop.tsx
@@ -119,8 +119,8 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
       loggedState === 'true' &&
       isOAuth2Enabled &&
       !isLoginAccountsPopulated &&
-      (!window.location.pathname.includes('callback') ||
-        !window.location.pathname.includes('endpoint'))
+      !window.location.pathname.includes('callback') &&
+      !window.location.pathname.includes('endpoint')
     ) {
       handleLogin();
     }