Merge pull request #183 from deriv-com/revert-176-thisyahlen/implement-oidc-logic

Revert "feat: oidc implementation"

Author: shafin-deriv

package-lock.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@deriv-com/quill-ui": "^1.16.21",
     "@deriv-com/analytics": "^1.22.1",
-    "@deriv-com/auth-client": "^1.3.1",
+    "@deriv-com/auth-client": "^1.0.29",
     "@deriv/deriv-api": "^1.0.11",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-spring/web": "^9.7.3",

package.json

@@ -12,8 +12,6 @@ import useDeviceType from '@site/src/hooks/useDeviceType';
 
 import { IUserNavbarItemProps } from './item.types';
 import styles from './UserNavbarItem.module.scss';
-import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
-import Cookies from 'js-cookie';
 
 interface IActionProps {
   handleClick: () => void;
@@ -64,16 +62,12 @@ 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={handleLogin}
+        onClick={handleClick}
         className={signedInButtonClasses}
         data-testid='sa_login'
       >
@@ -94,43 +88,14 @@ const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) =>
 };
 
 const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => {
+  const { logout } = useLogout();
   const { deviceType } = useDeviceType();
   const isDesktop = deviceType === 'desktop';
 
   const handleClick = () => {
     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 !== '/callback'
-    ) {
-      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} />
   ) : (

src/components/UserNavbarItem/item.desktop.tsx

@@ -4,7 +4,6 @@ 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>>;
@@ -26,10 +25,6 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
     location.assign(getUrl(currentLocale));
   };
 
-  const { handleLogin } = useHandleLogin({
-    onClickLogin: handleClick,
-  });
-
   const handleSignUp = () => {
     location.assign('https://deriv.com/signup/');
   };
@@ -62,7 +57,7 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
               <Button color='tertiary' onClick={handleSignUp} className={styles.btn}>
                 <Translate>Sign up</Translate>
               </Button>
-              <Button color='primary' onClick={handleLogin} className={styles.btn}>
+              <Button color='primary' onClick={handleClick} className={styles.btn}>
                 <Translate>Log in</Translate>
               </Button>
             </div>

src/features/Apiexplorer/LoginDialog/index.tsx

@@ -5,7 +5,6 @@ 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();
@@ -16,11 +15,6 @@ export const Login = () => {
   const handleClick = () => {
     window.location.assign(getUrl(currentLocale));
   };
-
-  const { handleLogin } = useHandleLogin({
-    onClickLogin: handleClick,
-  });
-
   return (
     <div>
       <div className={styles.login} data-testid='login'>
@@ -32,7 +26,7 @@ export const Login = () => {
             </Translate>
           </Text>
           <div className={styles.action}>
-            <Button color='primary' onClick={handleLogin}>
+            <Button color='primary' onClick={handleClick}>
               <Translate>Log In</Translate>
             </Button>
           </div>

src/features/Callback/CallbackPage.tsx

@@ -48,11 +48,6 @@ mockReactTable.mockImplementation(() => ({
   headerGroups: [],
 }));
 
-jest.mock('@docusaurus/BrowserOnly', () => ({
-  __esModule: true,
-  default: ({ children }: { children: () => JSX.Element }) => children(),
-}));
-
 describe('AppManager', () => {
   it('shows the login screen', () => {
     mockUseAuthContext.mockImplementation(() => ({
@@ -64,7 +59,6 @@ describe('AppManager', () => {
     const login = screen.getByText(
       /Log in to your Deriv account to get the API token and start using our API./i,
     );
-
     expect(login).toBeInTheDocument();
   });
 

src/features/Callback/index.ts

@@ -3,7 +3,6 @@ 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();
@@ -17,7 +16,7 @@ const Dashboard = () => {
   }, [setIsDashboard]);
 
   if (is_logged_in) return <ManageDashboard />;
-  return <BrowserOnly>{() => <Login />}</BrowserOnly>;
+  return <Login />;
 };
 
 export default Dashboard;