app: fix remote connection not beeing restored after app was sleeping for a long time.

Author: ffreddow

frontend/src/components/Frame.tsx

@@ -5,7 +5,7 @@ import Worker from '../worker?worker'
 import { Row, Spinner } from 'react-bootstrap';
 import { connected, connected_to, secret } from './charger_list';
 import { setAppNavigation } from './Navbar';
-import { enableLogging } from '../utils';
+import { enableLogging, refreshPromise } from '../utils';
 import Median from "median-js-bridge";
 import i18n from '../i18n';
 
@@ -50,8 +50,10 @@ export class Frame extends Component {
         }
 
         // used by the app to detect a resumed app
-        window.addEventListener("appResumed", () => {
+        window.addEventListener("appResumed", async () => {
             this.worker.terminate();
+            this.worker = null;
+            await refreshPromise;
             this.startWorker();
             this.show_spinner.value = true;
 

frontend/src/index.tsx

@@ -32,7 +32,7 @@ import Tabs from "react-bootstrap/Tabs";
 import Tab from "react-bootstrap/Tab";
 import { ChargerList } from './pages/chargers.js';
 import { ErrorAlert } from './components/Alert.js';
-import { BACKEND } from './utils';
+import { refresh_access_token } from './utils';
 import { AppState, loggedIn } from './utils.js';
 import { Col, Spinner } from 'react-bootstrap';
 import { Recovery } from './pages/recovery.js';
@@ -42,29 +42,6 @@ import { Footer } from "./components/Footer";
 
 import "./main.scss";
 
-async function refresh_access_token() {
-    if (window.location.pathname == "/recovery") {
-        loggedIn.value = AppState.Recovery;
-        return;
-    }
-
-    const resp = await fetch(BACKEND + "/auth/jwt_refresh", {
-        method: "GET",
-        credentials: "include"
-    });
-
-    if (resp.status == 200) {
-        if (!localStorage.getItem("loginKey") || !localStorage.getItem("secretKey")) {
-            logout(false);
-        }
-        loggedIn.value = AppState.LoggedIn;
-    } else {
-        localStorage.removeItem("loginKey");
-        localStorage.removeItem("secretKey");
-        loggedIn.value = AppState.LoggedOut;
-    }
-}
-
 refresh_access_token().then(() => {
     if (loggedIn.value === AppState.LoggedIn) {
         setInterval(async () => {

frontend/src/utils.tsx

@@ -1,5 +1,6 @@
 import { signal } from "@preact/signals";
 import { hash, ArgonType } from "argon2-browser";
+import { logout } from "./components/Navbar";
 
 export async function get_salt() {
     const resp = await fetch(`${BACKEND}/auth/generate_salt`, {
@@ -79,3 +80,34 @@ window.addEventListener("keydown", (e: KeyboardEvent) => {
         enableLogging = true;
     }
 })
+
+// This promise is used to synchronize the timeout and Frame component refreshing the access token
+export let refreshPromise: Promise<void>;
+
+// This function must be called only at one place. Use the promise instead if you need to ensure that you have a valid token.
+export async function refresh_access_token() {
+    refreshPromise = new Promise(async (resolve, reject) => {
+        if (window.location.pathname == "/recovery") {
+            loggedIn.value = AppState.Recovery;
+            return;
+        }
+
+        const resp = await fetch(BACKEND + "/auth/jwt_refresh", {
+            method: "GET",
+            credentials: "include"
+        });
+
+        if (resp.status == 200) {
+            if (!localStorage.getItem("loginKey") || !localStorage.getItem("secretKey")) {
+                logout(false);
+            }
+            loggedIn.value = AppState.LoggedIn;
+        } else {
+            localStorage.removeItem("loginKey");
+            localStorage.removeItem("secretKey");
+            loggedIn.value = AppState.LoggedOut;
+        }
+        resolve();
+    });
+    await refreshPromise;
+}

frontend/src/worker.ts

@@ -130,6 +130,10 @@ async function start_connection(setup_data: SetupMessage) {
         disconnect_cb();
         return;
     }
+    if (resp.status !== 200) {
+        disconnect_cb();
+        return;
+    }
     const keys = await resp.json();
     const decrypted_keys = decrypt_keys(keys, setup_data.secret);