yashim/fix: logout (#230)

Author: yashim-deriv

package-lock.json

@@ -18,7 +18,7 @@
         "@babel/preset-env": "^7.24.5",
         "@chakra-ui/react": "^2.8.2",
         "@deriv-com/analytics": "^1.10.1",
-        "@deriv-com/api-hooks": "^1.4.5",
+        "@deriv-com/api-hooks": "^1.4.7",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.29.0",
         "@deriv-com/utils": "^0.0.28",

package.json

@@ -1,5 +1,5 @@
 import { getOauthUrl } from '@/constants';
-import { api } from '@/hooks';
+import { api, useRedirectToOauth } from '@/hooks';
 import { getCurrentRoute } from '@/utils';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
@@ -19,6 +19,7 @@ import './AppHeader.scss';
 const AppHeader = () => {
     const { isDesktop } = useDevice();
     const isEndpointPage = getCurrentRoute() === 'endpoint';
+    const { redirectToOauth } = useRedirectToOauth();
     const { activeLoginid, logout } = useAuthData();
     const { data: activeAccount } = api.account.useActiveAccount();
     const { localize } = useTranslations();
@@ -46,7 +47,14 @@ const AppHeader = () => {
                         </TooltipMenuIcon>
                     )}
                     <AccountSwitcher account={activeAccount!} />
-                    <Button className='mr-6' onClick={logout} size='md'>
+                    <Button
+                        className='mr-6'
+                        onClick={async () => {
+                            await logout();
+                            redirectToOauth();
+                        }}
+                        size='md'
+                    >
                         <Text size='sm' weight='bold'>
                             {localize('Logout')}
                         </Text>

src/components/AppHeader/AppHeader.tsx

@@ -118,7 +118,9 @@ export const MobileMenuConfig = () => {
                 as: 'button',
                 label: localize('Log out'),
                 LeftComponent: LegacyLogout1pxIcon,
-                onClick: logout,
+                onClick: async () => {
+                    await logout();
+                },
                 removeBorderBottom: true,
             },
         ],