Rebuild how we store keycloak auth tokens

frontend/src/js/api/useApi.ts

@@ -1,17 +1,10 @@
-import { useKeycloak } from "@react-keycloak/web";
 import axios, { AxiosRequestConfig } from "axios";
-import { useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { useHistory } from "react-router-dom";
 
-import { getStoredAuthToken } from "../authorization/helper";
+import { AuthTokenContext } from "../authorization/AuthTokenProvider";
 import { isIDPEnabled, isLoginDisabled } from "../environment";
 
-export const useAuthToken = () => {
-  const { keycloak } = useKeycloak();
-
-  return isIDPEnabled ? keycloak.token || "" : getStoredAuthToken() || "";
-};
-
 export const useApiUnauthorized = <T>(
   requestConfig: Partial<AxiosRequestConfig> = {},
 ) => {
@@ -24,12 +17,17 @@ export const useApiUnauthorized = <T>(
 
 export const useApi = <T>(requestConfig: Partial<AxiosRequestConfig> = {}) => {
   const history = useHistory();
-  const authToken = useAuthToken();
-  const authTokenRef = useRef<string>(authToken);
+  const { authToken } = useContext(AuthTokenContext);
 
-  useEffect(() => {
-    authTokenRef.current = authToken;
-  }, [authToken]);
+  // In order to always have the up to date token,
+  // especially when polling for a long time within nested loops
+  const authTokenRef = useRef<string>(authToken);
+  useEffect(
+    function updateRef() {
+      authTokenRef.current = authToken;
+    },
+    [authToken],
+  );
 
   return async (
     finalRequestConfig: Partial<AxiosRequestConfig> = {},

frontend/src/js/app/AppRouter.tsx

@@ -1,11 +1,14 @@
-import { ReactKeycloakProvider } from "@react-keycloak/web";
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
-import keycloak from "../../keycloak";
+import {
+  AuthTokenContextProvider,
+  useAuthTokenContextValue,
+} from "../authorization/AuthTokenProvider";
+import KeycloakProvider from "../authorization/KeycloakProvider";
 import LoginPage from "../authorization/LoginPage";
 import WithAuthToken from "../authorization/WithAuthToken";
-import { basename, isIDPEnabled } from "../environment";
+import { basename } from "../environment";
 import type { TabT } from "../pane/types";
 
 import App from "./App";
@@ -15,38 +18,26 @@ interface PropsT {
 }
 
 const AppRouter = (props: PropsT) => {
+  const authTokenContextValue = useAuthTokenContextValue();
+
   return (
-    <ReactKeycloakProvider
-      authClient={keycloak}
-      onEvent={(event: unknown, error: unknown) => {
-        // USEFUL FOR DEBUGGING
-        // console.log("onKeycloakEvent", event, error);
-      }}
-      onTokens={(tokens) => {
-        // USEFUL FOR DEBUGGING
-        // console.log("TOKENS ", tokens);
-      }}
-      initOptions={{
-        pkceMethod: "S256",
-        onLoad: isIDPEnabled ? "login-required" : "check-sso",
-        // silentCheckSsoRedirectUri:
-        //   window.location.origin + "/silent-check-sso.html",
-      }}
-    >
-      <Router basename={basename}>
-        <Switch>
-          <Route path="/login" component={LoginPage} />
-          <Route
-            path="/*"
-            render={(routeProps) => (
-              <WithAuthToken {...routeProps}>
-                <App {...props} />
-              </WithAuthToken>
-            )}
-          />
-        </Switch>
-      </Router>
-    </ReactKeycloakProvider>
+    <AuthTokenContextProvider value={authTokenContextValue}>
+      <KeycloakProvider>
+        <Router basename={basename}>
+          <Switch>
+            <Route path="/login" component={LoginPage} />
+            <Route
+              path="/*"
+              render={(routeProps) => (
+                <WithAuthToken {...routeProps}>
+                  <App {...props} />
+                </WithAuthToken>
+              )}
+            />
+          </Switch>
+        </Router>
+      </KeycloakProvider>
+    </AuthTokenContextProvider>
   );
 };
 

frontend/src/js/authorization/AuthTokenProvider.tsx

@@ -0,0 +1,25 @@
+import { createContext, useState } from "react";
+
+import { isIDPEnabled } from "../environment";
+
+import { getStoredAuthToken } from "./helper";
+
+export interface AuthTokenContextValue {
+  authToken: string;
+  setAuthToken: (token: string) => void;
+}
+
+export const AuthTokenContext = createContext<AuthTokenContextValue>({
+  authToken: "",
+  setAuthToken: () => null,
+});
+
+export const useAuthTokenContextValue = (): AuthTokenContextValue => {
+  const [authToken, setAuthToken] = useState<string>(
+    isIDPEnabled ? "" : getStoredAuthToken() || "",
+  );
+
+  return { authToken, setAuthToken };
+};
+
+export const AuthTokenContextProvider = AuthTokenContext.Provider;

frontend/src/js/authorization/KeycloakProvider.tsx

@@ -0,0 +1,35 @@
+import { ReactKeycloakProvider } from "@react-keycloak/web";
+import React, { FC, useContext } from "react";
+
+import keycloak from "../../keycloak";
+import { isIDPEnabled } from "../environment";
+
+import { AuthTokenContext } from "./AuthTokenProvider";
+
+const KeycloakProvider: FC = ({ children }) => {
+  const { setAuthToken } = useContext(AuthTokenContext);
+
+  return (
+    <ReactKeycloakProvider
+      authClient={keycloak}
+      onEvent={(event: unknown, error: unknown) => {
+        // USEFUL FOR DEBUGGING
+        // console.log("onKeycloakEvent", event, error);
+      }}
+      onTokens={(tokens) => {
+        if (tokens.token) {
+          setAuthToken(tokens.token);
+        }
+      }}
+      initOptions={{
+        pkceMethod: "S256",
+        onLoad: isIDPEnabled ? "login-required" : "check-sso",
+        // silentCheckSsoRedirectUri:
+        //   window.location.origin + "/silent-check-sso.html",
+      }}
+    >
+      {children}
+    </ReactKeycloakProvider>
+  );
+};
+export default KeycloakProvider;

frontend/src/js/authorization/WithAuthToken.tsx

@@ -1,9 +1,10 @@
 import { useKeycloak } from "@react-keycloak/web";
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { useHistory } from "react-router-dom";
 
 import { isLoginDisabled, isIDPEnabled } from "../environment";
 
+import { AuthTokenContext } from "./AuthTokenProvider";
 import { storeAuthToken, getStoredAuthToken } from "./helper";
 
 interface PropsT {
@@ -14,7 +15,8 @@ interface PropsT {
 
 const WithAuthToken: FC<PropsT> = ({ location, children }) => {
   const history = useHistory();
-  const { keycloak, initialized } = useKeycloak();
+  const { initialized } = useKeycloak();
+  const { authToken } = useContext(AuthTokenContext);
   const goToLogin = () => history.push("/login");
 
   const { search } = location;
@@ -23,7 +25,7 @@ const WithAuthToken: FC<PropsT> = ({ location, children }) => {
 
   if (accessToken) storeAuthToken(accessToken);
 
-  if (isIDPEnabled && (!initialized || !keycloak.token)) {
+  if (isIDPEnabled && (!initialized || !authToken)) {
     return null;
   }
 

frontend/src/js/button/DownloadButton.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import React, { ReactNode, FC } from "react";
+import React, { ReactNode, FC, useContext } from "react";
 
-import { useAuthToken } from "../api/useApi";
+import { AuthTokenContext } from "../authorization/AuthTokenProvider";
 
 import IconButton, { IconButtonPropsT } from "./IconButton";
 
@@ -21,7 +21,7 @@ const DownloadButton: FC<PropsT> = ({
   children,
   ...restProps
 }) => {
-  const authToken = useAuthToken();
+  const { authToken } = useContext(AuthTokenContext);
 
   const href = `${url}?access_token=${encodeURIComponent(
     authToken,

frontend/src/js/button/PreviewButton.tsx

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
 import { StateT } from "app-types";
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
 
 import type { ColumnDescription } from "../api/types";
-import { useAuthToken } from "../api/useApi";
+import { AuthTokenContext } from "../authorization/AuthTokenProvider";
 import { openPreview } from "../preview/actions";
 import WithTooltip from "../tooltip/WithTooltip";
 
@@ -27,7 +27,7 @@ const PreviewButton: FC<PropsT> = ({
   className,
   ...restProps
 }) => {
-  const authToken = useAuthToken();
+  const { authToken } = useContext(AuthTokenContext);
   const isLoading = useSelector<StateT, boolean>(
     (state) => state.preview.isLoading,
   );