Adrienne / Integrate Hydra authentication

build/webpack/plugins.js

@@ -52,8 +52,10 @@ const getPlugins = (app, grunt) => ([
 
             new webpack.DefinePlugin({
                 'process.env': {
-                    BUILD_HASH: JSON.stringify(CryptoJS.MD5(Date.now().toString()).toString()),
-                    NODE_ENV  : JSON.stringify('production'),
+                    BUILD_HASH               : JSON.stringify(CryptoJS.MD5(Date.now().toString()).toString()),
+                    NODE_ENV                 : JSON.stringify('production'),
+                    GROWTHBOOK_CLIENT_KEY    : JSON.stringify(process.env.GROWTHBOOK_CLIENT_KEY),
+                    RUDDERSTACK_KEY          : JSON.stringify(process.env.RUDDERSTACK_KEY),
                 },
             }),
         ]
@@ -68,7 +70,9 @@ const getPlugins = (app, grunt) => ([
             ]),
             new webpack.DefinePlugin({
                 'process.env': {
-                    BUILD_HASH: JSON.stringify(CryptoJS.MD5(Date.now().toString()).toString()),
+                    BUILD_HASH               : JSON.stringify(CryptoJS.MD5(Date.now().toString()).toString()),
+                    GROWTHBOOK_CLIENT_KEY    : JSON.stringify(process.env.GROWTHBOOK_CLIENT_KEY),
+                    RUDDERSTACK_KEY          : JSON.stringify(process.env.RUDDERSTACK_KEY),
                 },
             }),
         ]

package.json

@@ -83,6 +83,7 @@
     "load-grunt-tasks": "3.5.2",
     "mocha": "10.3.0",
     "mock-local-storage": "1.1.7",
+    "mock-require": "^3.0.3",
     "node-gettext": "3.0.0",
     "postcss-scss": "4.0.9",
     "react-render-html": "0.6.0",
@@ -105,7 +106,10 @@
     "@binary-com/binary-document-uploader": "^2.4.4",
     "@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.37",
     "@deriv/deriv-api": "^1.0.15",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",

src/javascript/_common/analytics.js

@@ -0,0 +1,42 @@
+const DerivAnalytics = require('@deriv-com/analytics');
+
+const Analytics = (() => {
+    const init = () => {
+        if (process.env.RUDDERSTACK_KEY && process.env.GROWTHBOOK_CLIENT_KEY) {
+            DerivAnalytics.Analytics.initialise({
+                growthbookKey : process.env.GROWTHBOOK_CLIENT_KEY, // optional key to enable A/B tests
+                rudderstackKey: process.env.RUDDERSTACK_KEY,
+            });
+        }
+    };
+
+    const isGrowthbookLoaded = () => Boolean(DerivAnalytics.Analytics?.getInstances()?.ab);
+
+    const getGrowthbookFeatureValue = ({ defaultValue, featureFlag }) => {
+        const resolvedDefaultValue = defaultValue !== undefined ? defaultValue : false;
+        const isGBLoaded = isGrowthbookLoaded();
+
+        if (!isGBLoaded) return [null, false];
+
+        return [DerivAnalytics.Analytics?.getFeatureValue(featureFlag, resolvedDefaultValue), true];
+    };
+
+    const setGrowthbookOnChange = onChange => {
+        const isGBLoaded = isGrowthbookLoaded();
+        if (!isGBLoaded) return null;
+
+        const onChangeRenderer = DerivAnalytics.Analytics?.getInstances().ab.GrowthBook?.setRenderer(() => {
+            onChange();
+        });
+        return onChangeRenderer;
+    };
+
+    return {
+        init,
+        isGrowthbookLoaded,
+        getGrowthbookFeatureValue,
+        setGrowthbookOnChange,
+    };
+})();
+
+module.exports = Analytics;

src/javascript/_common/auth.js

@@ -0,0 +1,125 @@
+const {
+    AppIDConstants,
+    LocalStorageConstants,
+    LocalStorageUtils,
+    URLConstants,
+    WebSocketUtils,
+} = require('@deriv-com/utils');
+const Analytics = require('./analytics');
+
+export const DEFAULT_OAUTH_LOGOUT_URL = 'https://oauth.deriv.com/oauth2/sessions/logout';
+
+export const DEFAULT_OAUTH_ORIGIN_URL = 'https://oauth.deriv.com';
+
+const LOGOUT_HANDLER_TIMEOUT = 10000;
+
+const SocketURL = {
+    [URLConstants.derivP2pProduction]: 'blue.derivws.com',
+    [URLConstants.derivP2pStaging]   : 'red.derivws.com',
+};
+
+export const getServerInfo = () => {
+    const origin = window.location.origin;
+    const hostname = window.location.hostname;
+
+    const existingAppId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);
+    const existingServerUrl = LocalStorageUtils.getValue(LocalStorageConstants.configServerURL);
+    // since we don't have official app_id for staging,
+    // we will use the red server with app_id=62019 for the staging-p2p.deriv.com for now
+    // to fix the login issue
+    if (origin === URLConstants.derivP2pStaging && (!existingAppId || !existingServerUrl)) {
+        LocalStorageUtils.setValue(LocalStorageConstants.configServerURL, SocketURL[origin]);
+        LocalStorageUtils.setValue(LocalStorageConstants.configAppId, `${AppIDConstants.domainAppId[hostname]}`);
+    }
+
+    const serverUrl = LocalStorageUtils.getValue(LocalStorageConstants.configServerURL) || localStorage.getItem('config.server_url') || 'oauth.deriv.com';
+
+    const defaultAppId = WebSocketUtils.getAppId();
+    const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId) || defaultAppId;
+    const lang = LocalStorageUtils.getValue(LocalStorageConstants.i18nLanguage) || 'en';
+
+    return {
+        appId,
+        lang,
+        serverUrl,
+    };
+};
+
+export const getOAuthLogoutUrl = () => {
+    const { appId, serverUrl } = getServerInfo();
+
+    const oauthUrl = appId && serverUrl ? `https://${serverUrl}/oauth2/sessions/logout` : DEFAULT_OAUTH_LOGOUT_URL;
+
+    return oauthUrl;
+};
+
+export const getOAuthOrigin = () => {
+    const { appId, serverUrl } = getServerInfo();
+
+    const oauthUrl = appId && serverUrl ? `https://${serverUrl}` : DEFAULT_OAUTH_ORIGIN_URL;
+
+    return oauthUrl;
+};
+
+export const isOAuth2Enabled = () => {
+    const [OAuth2EnabledApps, OAuth2EnabledAppsInitialised] = Analytics.getGrowthbookFeatureValue({
+        featureFlag: 'hydra_be',
+    });
+    const appId = WebSocketUtils.getAppId();
+
+    if (OAuth2EnabledAppsInitialised) {
+        const FEHydraAppIds = OAuth2EnabledApps?.length
+            ? OAuth2EnabledApps[OAuth2EnabledApps.length - 1]?.enabled_for ?? []
+            : [];
+        return FEHydraAppIds.includes(+appId);
+    }
+
+    return false;
+};
+
+export const getLogoutHandler = onWSLogoutAndRedirect => {
+    const isAuthEnabled = isOAuth2Enabled();
+
+    if (!isAuthEnabled) {
+        return onWSLogoutAndRedirect;
+    }
+
+    const onMessage = async event => {
+        const allowedOrigin = getOAuthOrigin();
+        if (allowedOrigin === event.origin) {
+            if (event.data === 'logout_complete') {
+                try {
+                    await onWSLogoutAndRedirect();
+                } catch (err) {
+                    // eslint-disable-next-line no-console
+                    console.error(`logout was completed successfully on oauth hydra server, but logout handler returned error: ${err}`);
+                }
+            }
+        }
+    };
+
+    window.addEventListener('message', onMessage);
+
+    const oAuth2Logout = () => {
+        if (!isAuthEnabled) {
+            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();
+            }, LOGOUT_HANDLER_TIMEOUT);
+        }
+
+        iframe.src = getOAuthLogoutUrl();
+    };
+
+    return oAuth2Logout;
+};

src/javascript/_common/base/__tests__/client_base.js

@@ -1,3 +1,10 @@
+
+const Mock                         = require('mock-require');
+Mock('../../auth', {
+    isOAuth2Enabled: function() {
+        return false
+    }
+});
 const Client                  = require('../client_base');
 const setCurrencies           = require('../currency_base').setCurrencies;
 const { api, expect, setURL } = require('../../__tests__/tests_common');

src/javascript/_common/base/client_base.js

@@ -1,6 +1,7 @@
 const moment                       = require('moment');
 const isCryptocurrency             = require('./currency_base').isCryptocurrency;
 const SocketCache                  = require('./socket_cache');
+const AuthClient                   = require('../auth');
 const localize                     = require('../localize').localize;
 const LocalStore                   = require('../storage').LocalStore;
 const State                        = require('../storage').State;
@@ -489,6 +490,9 @@ const ClientBase = (() => {
     };
 
     const syncWithDerivApp = (active_loginid, client_accounts) => {
+        // If the OAuth2 new authentication is enabled, all apps should not use localstorage-sync anymore
+        const isOAuth2Enabled = AuthClient.isOAuth2Enabled();
+        if (isOAuth2Enabled) return;
         const iframe_window = document.getElementById('localstorage-sync');
         const origin = getAllowedLocalStorageOrigin();
 

src/javascript/app/base/header.js

@@ -1,6 +1,7 @@
 // const BinaryPjax               = require('./binary_pjax');
 const Client                   = require('./client');
 const BinarySocket             = require('./socket');
+const AuthClient               = require('../../_common/auth');
 const showHidePulser           = require('../common/account_opening').showHidePulser;
 const updateTotal              = require('../pages/user/update_total');
 const isAuthenticationAllowed  = require('../../_common/base/client_base').isAuthenticationAllowed;
@@ -23,6 +24,7 @@ const template                 = require('../../_common/utility').template;
 const Language                 = require('../../_common/language');
 const mapCurrencyName          = require('../../_common/base/currency_base').mapCurrencyName;
 const isEuCountry              = require('../common/country_base').isEuCountry;
+const DerivIFrame              = require('../pages/deriv_iframe.jsx');
 
 const header_icon_base_path = '/images/pages/header/';
 const wallet_header_icon_base_path = '/images/pages/header/wallets/';
@@ -40,6 +42,7 @@ const Header = (() => {
     };
 
     const onLoad = () => {
+        DerivIFrame.init();
         populateAccountsList();
         populateWalletAccounts();
         bindSvg();
@@ -303,7 +306,6 @@ 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');
@@ -487,6 +489,7 @@ const Header = (() => {
             }
         };
 
+        // Some note here
         appstore_menu.addEventListener('click', () => {
             showMobileSubmenu(false);
         });
@@ -624,8 +627,13 @@ const Header = (() => {
         Login.redirectToLogin();
     };
 
-    const logoutOnClick = () => {
-        Client.sendLogoutRequest();
+    const logoutOnClick = async () => {
+        // This will wrap the logout call Client.sendLogoutRequest with our own logout iframe, which is to inform Hydra that the user is logging out
+        // and the session should be cleared on Hydra's side. Once this is done, it will call the passed-in logout handler Client.sendLogoutRequest.
+        // If Hydra authentication is not enabled, the logout handler Client.sendLogoutRequest will just be called instead.
+        const onLogoutWithOauth = await AuthClient.getLogoutHandler(Client.sendLogoutRequest);
+
+        onLogoutWithOauth();
     };
 
     const populateWalletAccounts = () => {

src/javascript/app/base/logged_in.js

@@ -12,13 +12,15 @@ const removeCookies      = require('../../_common/storage').removeCookies;
 const paramsHash         = require('../../_common/url').paramsHash;
 const urlFor             = require('../../_common/url').urlFor;
 const getPropertyValue   = require('../../_common/utility').getPropertyValue;
+const DerivIFrame        = require('../pages/deriv_iframe.jsx');
 
 const LoggedInHandler = (() => {
     const onLoad = () => {
         SocketCache.clear();
         parent.window.is_logging_in = 1; // this flag is used in base.js to prevent auto-reloading this page
         let redirect_url;
         const params = paramsHash(window.location.href);
+        DerivIFrame.init();
         BinarySocket.send({ authorize: params.token1 }).then((response) => {
             const account_list = getPropertyValue(response, ['authorize', 'account_list']);
             if (isStorageSupported(localStorage) && isStorageSupported(sessionStorage) && account_list) {

src/javascript/app/base/page.js

@@ -21,6 +21,7 @@ const State            = require('../../_common/storage').State;
 const scrollToTop      = require('../../_common/scroll').scrollToTop;
 const toISOFormat      = require('../../_common/string_util').toISOFormat;
 const Url              = require('../../_common/url');
+const Analytics        = require('../../_common/analytics');
 const createElement    = require('../../_common/utility').createElement;
 const isLoginPages     = require('../../_common/utility').isLoginPages;
 const isProduction     = require('../../config').isProduction;
@@ -35,6 +36,7 @@ const Page = (() => {
         Elevio.init();
         onDocumentReady();
         Crowdin.init();
+        Analytics.init();
     };
 
     const onDocumentReady = () => {

src/javascript/app/pages/deriv_iframe.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { isOAuth2Enabled } from '../../_common/auth';
+
+const DerivIFrame = () => (
+    <iframe
+        id='localstorage-sync'
+        style={{ display: 'none', visibility: 'hidden' }}
+        sandbox='allow-same-origin allow-scripts'
+    />
+);
+
+export const init = () => {
+    const isAuthEnabled = isOAuth2Enabled();
+
+    if (!isAuthEnabled) ReactDOM.render(<DerivIFrame />, document.getElementById('deriv_iframe'));
+};
+
+export default init;

src/javascript/app/pages/trade/tradepage.js

@@ -7,6 +7,7 @@ const Defaults          = require('./defaults');
 const TradingEvents     = require('./event');
 const Price             = require('./price');
 const Process           = require('./process');
+const AuthClient        = require('../../../_common/auth');
 const ViewPopup         = require('../user/view_popup/view_popup');
 const Client            = require('../../base/client');
 const Header            = require('../../base/header');
@@ -25,10 +26,11 @@ const TradePage = (() => {
     const onLoad = () => {
 
         const iframe_target_origin = getAllowedLocalStorageOrigin();
+        const isOauthEnabled = AuthClient.isOAuth2Enabled();
         BinarySocket.wait('authorize').then(() => {
-            if (iframe_target_origin) {
+            if (iframe_target_origin && !isOauthEnabled) {
                 const el_iframe  = document.getElementById('localstorage-sync');
-                el_iframe.src = `${iframe_target_origin}/localstorage-sync.html`;
+                if (el_iframe) el_iframe.src = `${iframe_target_origin}/localstorage-sync.html`;
             }
             init();
         });

src/templates/_common/_layout/layout.jsx

@@ -3,7 +3,6 @@ import Head from './head.jsx';
 import Header from './header.jsx';
 // import MobileMenu from './mobile_menu.jsx';
 import WalletHeader from './wallet-header.jsx';
-import DerivIFrame from '../includes/deriv-iframe.jsx';
 // import Elevio from '../includes/elevio.jsx';
 import Gtm from '../includes/gtm.jsx';
 import LiveChat from '../includes/livechat.jsx';
@@ -77,7 +76,7 @@ const Layout = () => {
                     </div>
                     <Topbar />
                 </div>
-                <DerivIFrame />
+                <div id='deriv_iframe' />
                 {/* <Elevio /> */}
                 <LanguageMenuModal />
             </body>