fix: app not realising refresh token has expired

src/App.jsx

@@ -11,7 +11,7 @@ import { loadAnnouncements } from "actions/announcements";
 import { loadConfig } from "actions/global-info";
 import { loadPosts } from "actions/posts";
 import { loadProgram } from "actions/program";
-import { loadMe } from "actions/users";
+import { loadMe, refreshAccessToken } from "actions/users";
 import { initializeWSChannel } from "actions/ws";
 import Footer from "components/Footer";
 import Navbar from "components/Navbar";
@@ -39,7 +39,12 @@ if (process.env.REACT_APP_SENTRY_DSN) {
 
 const ReactHint = ReactHintFactory(React);
 
-const onKeycloakEvent = (event) => {
+const onKeycloakEvent = async (event) => {
+  if (event === "onTokenExpired") {
+    console.warn("[auth] access token expired, attempting refresh");
+    refreshAccessToken();
+  }
+
   if (["onAuthRefreshSuccess", "onAuthSuccess"].includes(event)) {
     Sentry.setUser(keycloak.tokenParsed);
 
@@ -154,6 +159,7 @@ const AuthenticatedApp = () => {
         initConfig={keycloakInitConfig}
         LoadingComponent={LoadingComponent}
         onEvent={onKeycloakEvent}
+        autoRefreshToken={false}
       >
         <Suspense fallback={LoadingComponent}>
           <ConfiguredApp />

src/actions/users.js

+import * as Sentry from "@sentry/react";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
 import { fetch } from "api";
-import { AuthStore } from "stores";
+import keycloak from "keycloak";
+import { AuthStore, PostStore } from "stores";
+import { updateWindowPosts } from "utils";
 
 export const loadMe = createAsyncAction(
   /**
@@ -89,3 +92,28 @@ export const inviteToJitsi = createAsyncAction(
     }
   }
 );
+
+export const refreshAccessToken = async () => {
+  try {
+    await keycloak.updateToken(300);
+    console.info("[auth] access token refreshed");
+  } catch (exc) {
+    console.warn(
+      "[auth] could not refresh the access token, refresh token possibly expired, logging out"
+    );
+
+    Sentry.setUser(null);
+
+    AuthStore.update((state) => {
+      state.isAuthenticated = false;
+      state.user = null;
+      state.showJitsiInvitePopup = false;
+      state.jitsiPopupDimissed = false;
+    });
+
+    PostStore.update((state) => {
+      state.filters.showPendingProposals = false;
+      updateWindowPosts(state);
+    });
+  }
+};

src/index.js

@@ -2,11 +2,21 @@ import React from "react";
 import ReactDOM from "react-dom";
 import ReactModal from "react-modal";
 
+import { refreshAccessToken } from "actions/users";
+
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
 const root = document.getElementById("root");
 
+function handleVisibilityChange() {
+  if (!document.hidden) {
+    refreshAccessToken();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
 ReactDOM.render(
   <React.StrictMode>
     <App />