Integrate auth-client for Hydra logout functionality

jest.config.js

@@ -21,7 +21,9 @@ module.exports = {
     ],
     '^.+\\.mjs$': 'babel-jest',
   },
-  transformIgnorePatterns: ['node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme|@deriv-com/auth-client)',
+  ],
   moduleNameMapper: {
     '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1',
 

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@deriv-com/analytics": "^1.18.0",
+    "@deriv-com/auth-client": "^1.0.27",
     "@deriv/deriv-api": "^1.0.11",
     "@deriv/quill-icons": "^1.22.10",
     "@deriv/ui": "^0.8.0",

src/components/AccountSwitcher/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useRef } from 'react';
+import { useOAuth2, TOAuth2EnabledAppList } from '@deriv-com/auth-client';
 import { isNotDemoCurrency } from '@site/src/utils';
 import useLogout from '@site/src/hooks/useLogout';
+import useGrowthbookGetFeatureValue from '@site/src/hooks/useGrowthbookGetFeatureValue';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
 import CurrencyIcon from '../CurrencyIcon';
@@ -11,7 +13,13 @@ import SearchButton from '../SearchButton';
 import Translate from '@docusaurus/Translate';
 
 const AccountSwitcher = () => {
+  const [OAuth2EnabledApps, OAuth2EnabledAppsInitialised] =
+    useGrowthbookGetFeatureValue<TOAuth2EnabledAppList>({
+      featureFlag: 'hydra_be',
+    });
+
   const { logout } = useLogout();
+  const { OAuth2Logout } = useOAuth2({ OAuth2EnabledApps, OAuth2EnabledAppsInitialised }, logout);
 
   const { currentLoginAccount } = useAuthContext();
   const [is_toggle_dropdown, setToggleDropdown] = useState(false);
@@ -57,7 +65,7 @@ const AccountSwitcher = () => {
           </div>
           <div className={styles.logoutButtonContainer}>
             <button
-              onClick={logout}
+              onClick={OAuth2Logout}
               type='button'
               color={'tertiary'}
               className={styles.logoutButton}

src/hooks/useGrowthbookGetFeatureValue/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Analytics } from '@deriv-com/analytics';
-import useIsGrowthbookIsLoaded from './useIsGrowthbookLoaded';
+import useIsGrowthbookIsLoaded from '../useIsGrowthbookLoaded';
 
 type featureValueTypes = Record<string, boolean> | boolean | string | [];