feat: added auth-client library

package.json

@@ -106,7 +106,9 @@
     "@binary-com/binary-style": "^0.2.26",
     "@binary-com/webtrader-charts": "^0.6.2",
     "@deriv-com/analytics": "^1.18.0",
+    "@deriv-com/auth-client": "^1.0.15",
     "@deriv-com/quill-ui": "^1.16.2",
+    "@deriv-com/utils": "^0.0.34",
     "@deriv/deriv-api": "^1.0.15",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",

src/javascript/_common/auth.js

@@ -0,0 +1,85 @@
+const Utils = require('@deriv-com/utils');
+
+export const DEFAULT_OAUTH_LOGOUT_URL = 'https://oauth.deriv.com/oauth2/sessions/logout';
+
+export const DEFAULT_OAUTH_ORIGIN_URL = 'https://oauth.deriv.com';
+
+export const getOAuthLogoutUrl = () => {
+    const { appId, serverUrl } = Utils.WebSocketUtils.getServerInfo();
+
+    const oauthUrl = appId && serverUrl ? `https://${serverUrl}/oauth2/sessions/logout` : DEFAULT_OAUTH_LOGOUT_URL;
+
+    return oauthUrl;
+};
+
+export const getOAuthOrigin = () => {
+    const { appId, serverUrl } = Utils.WebSocketUtils.getServerInfo();
+
+    const oauthUrl = appId && serverUrl ? `https://${serverUrl}` : DEFAULT_OAUTH_ORIGIN_URL;
+
+    return oauthUrl;
+};
+
+export const AuthClient = (() => {
+    const isOAuth2Enabled = oAuth2GrowthbookConfig => {
+        const { OAuth2EnabledApps, OAuth2EnabledAppsInitialised } = oAuth2GrowthbookConfig;
+        const appId = Utils.WebSocketUtils.getAppId();
+
+        if (OAuth2EnabledAppsInitialised) {
+            const FEHydraAppIds = OAuth2EnabledApps?.length
+                ? OAuth2EnabledApps[OAuth2EnabledApps.length - 1]?.enabled_for ?? []
+                : [];
+            return FEHydraAppIds.includes(+appId);
+        }
+
+        return false;
+    };
+    const getLogoutHandler = (oAuth2GrowthbookConfig, onWSLogoutAndRedirect) => {
+        const isAuthEnabled = isOAuth2Enabled(oAuth2GrowthbookConfig);
+
+        if (!isAuthEnabled) {
+            console.log('lol auth2 is not enabled');
+            return onWSLogoutAndRedirect;
+        }
+
+        const onMessage = async event => {
+            const allowedOrigin = getOAuthOrigin();
+            if (allowedOrigin === event.origin) {
+                if (event.data === 'logout_complete') {
+                    console.log('logout_complete calledd!');
+                    onWSLogoutAndRedirect();
+                }
+            }
+        };
+
+        window.addEventListener('message', onMessage);
+
+        const oAuth2Logout = async () => {
+            if (!isAuthEnabled) {
+                console.log('lol auth2 is not enabled');
+                onWSLogoutAndRedirect();
+                return;
+            }
+
+            let iframe = document.getElementById('logout-iframe');
+            if (!iframe) {
+                iframe = document.createElement('iframe');
+                iframe.id = 'logout-iframe';
+                iframe.style.display = 'none';
+                document.body.appendChild(iframe);
+
+                setTimeout(() => {
+                    onWSLogoutAndRedirect();
+                }, 10000);
+            }
+            console.log('auth2 doneee');
+        };
+
+        return oAuth2Logout;
+    };
+
+    return {
+        getLogoutHandler,
+        isOAuth2Enabled,
+    };
+})();

src/javascript/app/base/header.js

@@ -1,4 +1,6 @@
 // const BinaryPjax               = require('./binary_pjax');
+const AuthClient               = require('../../_common/auth');
+const Analytics                = require('../../_common/analytics');
 const Client                   = require('./client');
 const BinarySocket             = require('./socket');
 const showHidePulser           = require('../common/account_opening').showHidePulser;
@@ -303,7 +305,7 @@ const Header = (() => {
             el.removeEventListener('click', logoutOnClick);
             el.addEventListener('click', logoutOnClick);
         });
-
+        
         // Mobile menu
         const mobile_menu_overlay        = getElementById('mobile__container');
         const mobile_menu                = getElementById('mobile__menu');
@@ -625,7 +627,11 @@ const Header = (() => {
     };
 
     const logoutOnClick = () => {
-        Client.sendLogoutRequest();
+        const value = Analytics.getGrowthbookFeatureValue({
+            featureFlag: 'hydra_be',
+        });
+        const onLogoutWithHydra = AuthClient.AuthClient.getLogoutHandler(value, () =>  Client.sendLogoutRequest());
+        onLogoutWithHydra();
     };
 
     const populateWalletAccounts = () => {

src/javascript/app/hooks/growthbook.js

@@ -0,0 +1,57 @@
+// growthbook.js
+import { useState, useEffect } from 'react';
+
+import { Analytics } from '@deriv-com/analytics';
+
+export const useIsGrowthbookIsLoaded = () => {
+    const [isGBLoaded, setIsGBLoaded] = useState(false);
+
+    useEffect(() => {
+        let checksCounter = 0;
+        const analyticsInterval = setInterval(() => {
+            // Check if the analytics instance is available for 10 seconds before setting the feature flag value
+            if (checksCounter > 20) {
+                // If the analytics instance is not available after 10 seconds, clear the interval
+                clearInterval(analyticsInterval);
+                return;
+            }
+            checksCounter += 1;
+            if (Analytics?.getInstances()?.ab) {
+                setIsGBLoaded(true);
+                clearInterval(analyticsInterval);
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(analyticsInterval);
+        };
+    }, []);
+
+    return isGBLoaded;
+};
+
+export const useGrowthbookGetFeatureValue = ({ defaultValue, featureFlag }) => {
+    const resolvedDefaultValue = defaultValue !== undefined ? defaultValue : false;
+    const [featureFlagValue, setFeatureFlagValue] = useState(
+        Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue) ?? resolvedDefaultValue
+    );
+    const isGBLoaded = useIsGrowthbookIsLoaded();
+
+    useEffect(() => {
+        if (isGBLoaded) {
+            if (Analytics?.getInstances()?.ab) {
+                const setFeatureValue = () => {
+                    const value = Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue);
+                    setFeatureFlagValue(value);
+                };
+                setFeatureValue();
+                Analytics?.getInstances()?.ab?.GrowthBook?.setRenderer(() => {
+                    // this will be called whenever the feature flag value changes and acts as a event listener
+                    setFeatureValue();
+                });
+            }
+        }
+    }, [isGBLoaded, resolvedDefaultValue, featureFlag]);
+
+    return [featureFlagValue, isGBLoaded];
+};