Adrienne / Add front channel and silent login to replace logged_state cookies #18069

adrienne-deriv · 2025-02-19T06:12:16Z

Changes:

Please provide a summary of the change.

Add front channels to Deriv.app, which when rendered in an iframe will clear local storage and any related to authentication state
Move logged_state syncing logic to only be used in Safari
Add silent login feature using prompt=none, which will automatically checks if the user is logged in if client.accounts have not been populated yet, local storage is empty
- this will render an iframe to /silent-callback.html which will check if user has session in Hydra (which will return a code parameter in the URL)
- if user does not have a session in Hydra, Hydra will return an query parameter error=login_required which indicates that the user is logged out

Screenshots:

Please provide some screenshots of the change.

vercel · 2025-02-19T06:12:20Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Feb 24, 2025 6:36am

github-actions · 2025-02-19T06:35:26Z

A production App ID was automatically generated for this PR. (log)

PR: Adrienne / Add front channel and silent login to replace logged_state cookies #18069
URLs:
- w/ App ID + Server: https://deriv-app-git-fork-adrienne-deriv-front-channel-silent-login.binary.sx?qa_server=red.derivws.com&app_id=31898
- Original: https://deriv-app-git-fork-adrienne-deriv-front-channel-silent-login.binary.sx
App ID: 31898

Click here to copy & paste above information.

- **PR**: [https://github.com/deriv-com/deriv-app/pull/18069](https://github.com/deriv-com/deriv-app/pull/18069)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-adrienne-deriv-front-channel-silent-login.binary.sx?qa_server=red.derivws.com&app_id=31898
    - **Original**: https://deriv-app-git-fork-adrienne-deriv-front-channel-silent-login.binary.sx
- **App ID**: `31898`

github-actions · 2025-02-19T06:35:29Z

⏳ Generating Lighthouse report...

adrienne-deriv · 2025-02-21T08:13:50Z

packages/core/src/App/AppContent.tsx

+    // use logged_state cookie login checks for Safari
+    useLoggedStateLoginAndLogout({
+        is_client_store_initialized,
+        isOAuth2Enabled,


This is to ensure Safari is still using logged_state, because at the moment front channels do not work in Safari due to Storage partitioning in Intelligent Tracking Prevention

https://stackoverflow.com/questions/63921299/safari-setting-localstorage-inside-iframe-is-not-correctly-shared

So if we log out at https://hub.deriv.com, Hydra will render front channels (i.e. creating iframes in https://hub.deriv.com to https://app.deriv.com/front-channel.html) which SHOULD clear local storage in Chrome and Firefox, but it will not work in Safari due to the issue mentioned above

adrienne-deriv · 2025-02-21T08:14:28Z

packages/core/src/index.html

+                const isAuthFlow = /\/(silent-callback|front-channel)($|\/)/.test(self.location.pathname);
+                if (!isAuthFlow) {
+                    top.location = self.location;
+                }


This prevents the silent-callback.html and front-channel.html iframes to be navigated in the main window

adrienne-deriv · 2025-02-21T08:15:31Z

packages/core/src/root_files/front-channel.html

+                localStorage.removeItem('verification_code.system_email_change');
+                localStorage.removeItem('verification_code.request_email');
+                localStorage.removeItem('new_email.system_email_change');
+            }


When we call OIDC logout, it will render all front-channels (including the caller's front channel). This caused an issue in Deriv.app where if you clear the local storage while you are still signing out, after signing out it redirects you to the /authorize page

This storage clearance is referenced from packages/core/src/Services/logout.js

adrienne-deriv · 2025-02-21T08:15:57Z

packages/hooks/src/useLoggedStateLoginAndLogout.ts

+ * }} params - The arguments required for silent login and logout management
+ */
+const useLoggedStateLoginAndLogout = ({
+    is_client_store_initialized,


This is the main hook for the logged_state logic, I just renamed it to useLoggedStateLoginAndLogout from useSilentLoginAndLogout

adrienne-deriv · 2025-02-21T08:16:29Z

packages/hooks/src/useSilentLoginAndLogout.ts


    useEffect(() => {
+        const isSafariBrowser = isSafari();
+        if (isSafariBrowser) return;
+


If we are in Safari, don't use prompt none

adrienne-deriv · 2025-02-21T08:16:49Z

packages/hooks/src/useLoggedStateLoginAndLogout.ts

+
+    useEffect(() => {
+        const isSafariBrowser = isSafari();
+        if (!isSafariBrowser) return;


Only trigger logged_state checks in Safari

amam-deriv · 2025-02-24T03:37:44Z

packages/core/src/index.html

@@ -85,7 +85,10 @@
                var antiClickjack = document.getElementById('antiClickjack');
                antiClickjack.parentNode.removeChild(antiClickjack);
            } else {
-                top.location = self.location;
+                const isAuthFlow = /\/(silent-callback|front-channel)($|\/)/.test(self.location.pathname);


[Q] is callback needed here?

Tested this, this is not needed anymore since the silent callback and front channel are served statically under /silent-callback.html and /front-channel.html, will remove this change

adrienne-deriv added 8 commits January 24, 2025 17:34

feat: store redirect metadata for traders hub from os-redirect

e5a7364

Merge branch 'master' of github.com:deriv-com/deriv-app

833d381

Merge branch 'master' of github.com:deriv-com/deriv-app

8104fe4

Merge branch 'master' of github.com:deriv-com/deriv-app

e9e8b1c

Merge branch 'master' of github.com:deriv-com/deriv-app

5829790

Merge branch 'master' of github.com:deriv-com/deriv-app

cc913a2

Merge branch 'master' of github.com:deriv-com/deriv-app

d16383e

chore: added front channel and silent callback page

42aa28a

adrienne-deriv requested review from amina-deriv, balakrishna-deriv, farrah-deriv, habib-deriv, matin-deriv, nijil-deriv and yashim-deriv as code owners February 19, 2025 06:12

adrienne-deriv had a problem deploying to Preview February 19, 2025 06:12 — with GitHub Actions Failure

adrienne-deriv temporarily deployed to Preview February 19, 2025 06:13 — with GitHub Actions Inactive

chore: backup

fc79399

adrienne-deriv had a problem deploying to Preview February 19, 2025 09:00 — with GitHub Actions Failure

adrienne-deriv temporarily deployed to Preview February 19, 2025 09:01 — with GitHub Actions Inactive

chore: backup

588cd3d

adrienne-deriv had a problem deploying to Preview February 19, 2025 13:22 — with GitHub Actions Failure

adrienne-deriv deployed to Preview February 19, 2025 13:23 — with GitHub Actions View deployment

chore: use static file for silent callback

ffc0052

adrienne-deriv temporarily deployed to Preview February 20, 2025 07:40 — with GitHub Actions Inactive

adrienne-deriv deployed to Preview February 20, 2025 07:40 — with GitHub Actions View deployment

adrienne-deriv changed the title ~~Front channel silent login~~ Adrienne / Add front channel and silent login to replace logged_state cookies Feb 20, 2025

adrienne-deriv temporarily deployed to Preview February 21, 2025 07:02 — with GitHub Actions Inactive

chore: fixed test cases for logged state hook

3e43171

adrienne-deriv had a problem deploying to Preview February 21, 2025 07:16 — with GitHub Actions Failure

adrienne-deriv deployed to Preview February 21, 2025 07:16 — with GitHub Actions View deployment

chore: added test cases for silent login hook

0aaf090

adrienne-deriv temporarily deployed to Preview February 21, 2025 08:01 — with GitHub Actions Inactive

adrienne-deriv had a problem deploying to Preview February 21, 2025 08:10 — with GitHub Actions Failure

94bbec7

adrienne-deriv temporarily deployed to Preview February 21, 2025 08:11 — with GitHub Actions Inactive

adrienne-deriv deployed to Preview February 21, 2025 08:12 — with GitHub Actions View deployment

adrienne-deriv commented Feb 21, 2025

View reviewed changes

amam-deriv reviewed Feb 24, 2025

View reviewed changes

amam-deriv previously approved these changes Feb 24, 2025

View reviewed changes

chore: remove hijacking whitelist

33186c9

adrienne-deriv dismissed amam-deriv’s stale review via 33186c9 February 24, 2025 05:26

adrienne-deriv temporarily deployed to Preview February 24, 2025 05:27 — with GitHub Actions Inactive

chore: reverse linting

5d6c495

adrienne-deriv temporarily deployed to Preview February 24, 2025 05:41 — with GitHub Actions Inactive

adrienne-deriv deployed to Preview February 24, 2025 05:42 — with GitHub Actions View deployment

chore: use issafaribrowser to check auth hooks

39d2470

adrienne-deriv temporarily deployed to Preview February 24, 2025 05:54 — with GitHub Actions Inactive

adrienne-deriv deployed to Preview February 24, 2025 05:55 — with GitHub Actions View deployment

jim-deriv approved these changes Feb 24, 2025

View reviewed changes

thisyahlen-deriv approved these changes Feb 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adrienne / Add front channel and silent login to replace logged_state cookies #18069

Adrienne / Add front channel and silent login to replace logged_state cookies #18069

adrienne-deriv commented Feb 19, 2025 •

edited

Loading

vercel bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

adrienne-deriv Feb 21, 2025

adrienne-deriv Feb 21, 2025 •

edited

Loading

adrienne-deriv Feb 21, 2025

adrienne-deriv Feb 21, 2025

adrienne-deriv Feb 21, 2025

adrienne-deriv Feb 21, 2025 •

edited

Loading

adrienne-deriv Feb 21, 2025

adrienne-deriv Feb 21, 2025

amam-deriv Feb 24, 2025

adrienne-deriv Feb 24, 2025

Adrienne / Add front channel and silent login to replace logged_state cookies #18069

Are you sure you want to change the base?

Adrienne / Add front channel and silent login to replace logged_state cookies #18069

Conversation

adrienne-deriv commented Feb 19, 2025 • edited Loading

Changes:

Screenshots:

vercel bot commented Feb 19, 2025 • edited Loading

github-actions bot commented Feb 19, 2025 • edited Loading

github-actions bot commented Feb 19, 2025 • edited Loading

Choose a reason for hiding this comment

adrienne-deriv Feb 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adrienne-deriv Feb 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adrienne-deriv commented Feb 19, 2025 •

edited

Loading

vercel bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

adrienne-deriv Feb 21, 2025 •

edited

Loading

adrienne-deriv Feb 21, 2025 •

edited

Loading