chore: implement oidc authentication logic

package.json

@@ -46,6 +46,7 @@
     "@textea/json-viewer": "^3.4.1",
     "@use-gesture/react": "^10.3.0",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
+    "axios": "^1.7.7",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.2",
     "identity-obj-proxy": "^3.0.0",
@@ -56,6 +57,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.5",
     "react-table": "^7.8.0",
+    "oidc-client-ts": "^3.1.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "swiper": "^8.3.2",

src/components/UserNavbarItem/item.desktop.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { Button } from '@deriv-com/quill-ui';
+import { requestOidcAuthentication } from '@deriv-com/auth-client';
 import {
   LabelPairedGridLgRegularIcon,
   StandaloneRightFromBracketBoldIcon,
@@ -92,8 +93,13 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
   const { deviceType } = useDeviceType();
   const isDesktop = deviceType === 'desktop';
 
-  const handleClick = () => {
-    location.assign(authUrl);
+  const handleClick = async () => {
+    // location.assign(authUrl);
+    const app_id = localStorage.getItem('config.app_id');
+    const redirect_uri = `${window.location.origin}/dashboard`;
+    const post_logout_redirect_uri = `${window.location.origin}/`;
+
+    await requestOidcAuthentication(app_id, redirect_uri, post_logout_redirect_uri);
   };
 
   return is_logged_in ? (

src/features/dashboard/dashboard.tsx

@@ -3,17 +3,88 @@ 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 axios from 'axios';
+import { getAccountsFromSearchParams } from '@site/src/utils';
 
 const Dashboard = () => {
-  const { is_logged_in } = useAuthContext();
+  const { is_logged_in, updateLoginAccounts } = useAuthContext();
   const { setIsDashboard } = useAppManager();
 
   useEffect(() => {
     setIsDashboard(true);
+    const exchangeToken = async () => {
+      try {
+        const urlParams = new URLSearchParams(window?.location?.search);
+        const oidc_endpoints = localStorage.getItem('config.oidc_endpoints') || '{}';
+
+        const token_endpoint = JSON.parse(oidc_endpoints).token_endpoint || '';
+
+        const code = urlParams.get('code');
+        const state = urlParams.get('state');
+        const oidc_key = `oidc.${state}`;
+
+        const oidc_data = localStorage.getItem(oidc_key);
+        const code_verifier = oidc_data ? JSON.parse(oidc_data).code_verifier : null;
+        const appId = localStorage.getItem('config.app_id');
+
+        if (!code_verifier) return;
+
+        const response = await fetch(token_endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            Accept: 'application/json',
+          },
+          body: new URLSearchParams({
+            grant_type: 'authorization_code',
+            redirect_uri: `${window.location.origin}/dashboard`,
+            code: code,
+            code_verifier: code_verifier,
+            client_id: appId,
+          }).toString(),
+        });
+
+        const data = await response.json();
+        if (response.ok) {
+          localStorage.setItem('id_token', data.id_token);
+
+          try {
+            const response = await axios.post(
+              'https://qa101.deriv.dev/oauth2/legacy/tokens',
+              {},
+              {
+                headers: {
+                  Authorization: `Bearer ${data.access_token}`,
+                  'Content-Type': 'application/json',
+                },
+              },
+            );
+
+            const legacyData = response.data;
+            const accounts = getAccountsFromSearchParams(legacyData);
+            updateLoginAccounts(accounts);
+            window.history.replaceState({}, document.title, '/dashboard');
+          } catch (error) {
+            if (error.response) {
+              const legacyData = error.response.data;
+              console.error('Error fetching legacy tokens:', legacyData);
+            } else {
+              console.error('Failed to fetch legacy tokens:', error);
+            }
+          }
+        } else {
+          console.error('Error exchanging token:', data);
+        }
+      } catch (error) {
+        console.error('Token exchange failed:', error);
+      }
+    };
+
+    exchangeToken();
     return () => {
       setIsDashboard(false);
     };
-  }, [setIsDashboard]);
+  }, [setIsDashboard, updateLoginAccounts]);
 
   if (is_logged_in) return <ManageDashboard />;
   return <Login />;