Hang with Connection Lost message when using authentication proxy and session times out whilst page is inactive

[colinl]

Current Behavior

When using an authentication proxy such as cloudflare zero trust and the authentication session times out whilst the page is inactive (for example the PC is suspended or when running on a mobile device the OS puts the browser to sleep) then a Connection Lost is shown when the page is activated and remains shown until 5 minutes have elapsed or the page is refreshed.
The same effect can be seen if the machine is left active, then after the session has expired disconnect the network connection between the browser and the server, wait (about 30 secs) for errors to appear in the developer console and then reconnect the network. The developer console will continue to show errors for 5 minutes before showing the login request.
If the browser developer console is opened it can be seen that the software is repeatedly trying to open the websocket connection but this fails because it gets redirected to the login session. After 5 minutes this times out and the s/w reloads the page, which brings up the login screen.

Expected Behavior

The user should be taken to the login screen.

Steps To Reproduce

1. Open a dashboard page in a browser on a PC
2. Suspend the PC
3. Wait for the authentication session to expire, or revoke the session
4. Resume the PC

OR

1. Open a dashboard page in a browser on a PC
2. Wait for the authentication session to expire, or revoke the session
3. Disconnect the network between browser and node red
4. Wait for transport errors in the developer console
5. Reconnect the network

Environment

• Dashboard version: 1.30.2
• Node-RED version: 4.1.7
• Node.js version: 20.20.0
• npm version:
• Platform/OS: Ubuntu on Laptop
• Browser: Edge

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[colinl]

I am working on a PR for this.

[colinl]

I am struggling with this one, hopefully someone can provide some suggestions.

The problem occurs when the client side code attempts to connect to the websocket using socket.connect() in the function reconnect() in main.mjs.

If the auth session has expired then the initial (http) phase of the connection attempt fails as the proxy redirects the request to the login page. In my particular case (using cloudflare zero trust) the redirection fails due to a CORS error. Unfortunately there is nothing in the error returned in socket.on('connect_error', (err) => { that distinguishes between this and other network failures. The current code assumes that there is a network issue of some sort and retries periodically in the hope that the network recovers. The correct solution in this case is to force a full page reload, which will bring up the login page.

Research suggests that the usual way around this is to perform a fetch of a resource on the server and use this to get more clues about the problem I have coded this up (fetching "_setup" which is a single line json file), but again, in the case of a CORS error there appears to be no way of distinguishing this from other simple network or server problems.

Can anyone suggest where I might go from here?

[colinl]

OK, I believe I have a solution. It is to use fetch('_setup', {redirect: 'manual'}) so that it does not actually do the redirection.
I am just tidying up the code before submitting a PR.