feat: implement redirection to oauth login page [WIP]

deriv-com · Jun 7, 2024 · 01cac09 · 01cac09
1 parent 11f4779
commit 01cac09
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,14 @@
+/* eslint-disable no-console */
+import { useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { AppFooter, AppHeader, DerivIframe } from '@/components';
+import { useAccountList, useAuthData } from '@deriv-com/api-hooks';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import AppContent from './routes/AppContent';
+import { getOauthUrl } from './constants';
 
 const { VITE_CROWDIN_BRANCH_NAME, VITE_PROJECT_NAME, VITE_TRANSLATIONS_CDN_URL } = import.meta.env;
 const i18nInstance = initializeI18n({
@@ -13,6 +17,23 @@ const i18nInstance = initializeI18n({
 
 const App = () => {
     const { isDesktop } = useDevice();
+    const { data: accountList } = useAccountList();
+    const { activeLoginid, isAuthorized } = useAuthData();
+
+    const oauthUrl = getOauthUrl();
+    useEffect(() => {
+        const hasActiveLoginid = !!activeLoginid;
+        const hasAccounts = !!accountList?.length;
+        const shouldRedirectToLogin = !isAuthorized && !hasActiveLoginid && !hasAccounts;
+        console.log('isAuthorized', isAuthorized);
+        console.log('hasActiveLoginid', hasActiveLoginid);
+        console.log('hasAccounts', hasAccounts);
+        console.log('shouldRedirectToLogin', shouldRedirectToLogin);
+        console.log('====');
+        // if (shouldRedirectToLogin) {
+        //     window.open(oauthUrl, '_self');
+        // }
+    }, [accountList, activeLoginid, isAuthorized, oauthUrl]);
 
     return (
         <BrowserRouter>

diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
@@ -1,9 +1,8 @@
-import { useEffect } from 'react';
+import { getOauthUrl } from '@/constants';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
-import { useAccountList, useAuthData } from '@deriv-com/api-hooks';
+import { useAuthData } from '@deriv-com/api-hooks';
 import { useTranslations } from '@deriv-com/translations';
 import { Button, Header, Text, TooltipMenuIcon, useDevice, Wrapper } from '@deriv-com/ui';
-import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils';
 import { AccountSwitcher } from './AccountSwitcher';
 import { AppLogo } from './AppLogo';
 import { MenuItems } from './MenuItems';
@@ -14,34 +13,10 @@ import './AppHeader.scss';
 
 // TODO: handle local storage values not updating after changing local storage values
 const AppHeader = () => {
-    const { data: accounts } = useAccountList();
     const { isDesktop } = useDevice();
     const { activeLoginid, logout } = useAuthData();
     const { localize } = useTranslations();
-    const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);
-    const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString());
-    const oauthUrl =
-        appId && serverUrl
-            ? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv`
-            : URLUtils.getOauthURL();
-
-    useEffect(() => {
-        const shouldRedirectToLogin = () => {
-            if (typeof accounts !== 'undefined') {
-                const userHasNoP2PAccount = !accounts.find(
-                    account => account.broker === 'CR' && account.currency === 'USD'
-                );
-                const activeAccount = accounts.find(account => account.loginid === activeLoginid);
-                const activeAccountCurrency = activeAccount?.currency || null;
-
-                if (userHasNoP2PAccount || activeAccountCurrency !== 'USD') {
-                    window.open(oauthUrl, '_self');
-                }
-            }
-        };
-
-        shouldRedirectToLogin();
-    }, [accounts, activeLoginid, oauthUrl]);
+    const oauthUrl = getOauthUrl();
 
     return (
         <Header className={!isDesktop ? 'h-[40px]' : ''}>

diff --git a/src/constants/url.ts b/src/constants/url.ts
@@ -1,4 +1,4 @@
-import { URLConstants } from '@deriv-com/utils';
+import { LocalStorageConstants, LocalStorageUtils, URLConstants, URLUtils } from '@deriv-com/utils';
 
 export const BUY_SELL_URL = '/buy-sell';
 export const ORDERS_URL = '/orders';
@@ -12,3 +12,14 @@ export const ACCOUNT_LIMITS = `${URLConstants.derivAppProduction}/account/accoun
 export const DERIV_COM = URLConstants.derivComProduction;
 export const HELP_CENTRE = `${URLConstants.derivComProduction}/help-centre/`;
 export const RESPONSIBLE = `${URLConstants.derivComProduction}/responsible/`;
+
+export const getOauthUrl = () => {
+    const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);
+    const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString());
+    const oauthUrl =
+        appId && serverUrl
+            ? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv`
+            : URLUtils.getOauthURL();
+
+    return oauthUrl;
+};