Automatically renew auth token

packages/ilmomasiina-frontend/src/api.ts

@@ -1,15 +1,13 @@
 import { ApiError, apiFetch, FetchOptions } from "@tietokilta/ilmomasiina-components";
 import { ErrorCode } from "@tietokilta/ilmomasiina-models";
-import { loginExpired, renewLogin } from "./modules/auth/actions";
+import { loginExpired } from "./modules/auth/actions";
 import { AccessToken } from "./modules/auth/types";
 import type { DispatchAction } from "./store/types";
 
 interface AdminApiFetchOptions extends FetchOptions {
   accessToken?: AccessToken;
 }
 
-const RENEW_LOGIN_THRESHOLD = 5 * 60 * 1000;
-
 /** Wrapper for apiFetch that checks for Unauthenticated responses and dispatches a loginExpired
  * action if necessary.
  */
@@ -23,10 +21,6 @@ export default async function adminApiFetch<T = unknown>(
     if (!accessToken) {
       throw new ApiError(401, { isUnauthenticated: true });
     }
-    // Renew token asynchronously if it's expiring soon
-    if (Date.now() > accessToken.expiresAt - RENEW_LOGIN_THRESHOLD) {
-      dispatch(renewLogin(accessToken.token));
-    }
     return await apiFetch<T>(uri, {
       ...opts,
       headers: { ...opts.headers, Authorization: accessToken.token },

packages/ilmomasiina-frontend/src/containers/AuthProvider.tsx

@@ -1,10 +1,23 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect } from "react";
 
 import { AuthContext } from "@tietokilta/ilmomasiina-components";
-import { useTypedSelector } from "../store/reducers";
+import { renewLogin } from "../modules/auth/actions";
+import { useTypedDispatch, useTypedSelector } from "../store/reducers";
+
+const LOGIN_RENEW_INTERVAL = 60 * 1000;
 
 const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
   const auth = useTypedSelector((state) => state.auth);
+  const dispatch = useTypedDispatch();
+
+  useEffect(() => {
+    // Renew login immediately on page load if necessary.
+    dispatch(renewLogin());
+    // Then, check every minute and renew if necessary.
+    const timer = window.setInterval(() => dispatch(renewLogin()), LOGIN_RENEW_INTERVAL);
+    return () => window.clearTimeout(timer);
+  }, [dispatch]);
+
   return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
 };
 

packages/ilmomasiina-frontend/src/modules/auth/actions.ts

@@ -5,7 +5,7 @@ import { ApiError, apiFetch } from "@tietokilta/ilmomasiina-components";
 import { AdminLoginResponse, ErrorCode } from "@tietokilta/ilmomasiina-models";
 import i18n from "../../i18n";
 import appPaths from "../../paths";
-import type { DispatchAction } from "../../store/types";
+import type { DispatchAction, GetState } from "../../store/types";
 import { LOGIN_SUCCEEDED, RESET } from "./actionTypes";
 
 export const loginSucceeded = (payload: AdminLoginResponse) =>
@@ -83,17 +83,18 @@ export const loginExpired = () => (dispatch: DispatchAction) => {
   dispatch(redirectToLogin());
 };
 
-export const renewLogin = (accessToken: string) => async (dispatch: DispatchAction) => {
+const RENEW_LOGIN_THRESHOLD = 5 * 60 * 1000;
+
+export const renewLogin = () => async (dispatch: DispatchAction, getState: GetState) => {
+  const { accessToken } = getState().auth;
+  if (!accessToken || Date.now() < accessToken.expiresAt - RENEW_LOGIN_THRESHOLD) return;
+
   try {
     if (accessToken) {
       const sessionResponse = await apiFetch<AdminLoginResponse>("authentication/renew", {
         method: "POST",
-        body: {
-          accessToken,
-        },
-        headers: {
-          Authorization: accessToken,
-        },
+        body: { accessToken },
+        headers: { Authorization: accessToken.token },
       });
       if (sessionResponse) {
         dispatch(loginSucceeded(sessionResponse));