Merge pull request #37 from bento-platform/fix/refresh-tokens-spam

Don't execute invalid refresh token attempts

src/hooks.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, useCallback, useEffect, useMemo } from "react";
+import { MutableRefObject, useCallback, useEffect, useMemo, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AnyAction } from "redux";
 import { ThunkAction } from "redux-thunk";
@@ -135,14 +135,29 @@ export const useSessionWorkerTokenRefresh = (
     const dispatch: AppDispatch = useDispatch();
     const { clientId } = useBentoAuthContext();
 
+    const { refreshToken } = useAuthState();
+
+    const refreshTokenRef = useRef<string | undefined>(refreshToken);
+
+    useEffect(() => {
+        // A bit hacky: we use a ref to get the refreshToken into the worker event listener without triggering a
+        // dependency change for the useEffect below.
+        refreshTokenRef.current = refreshToken;
+    }, [refreshToken]);
+
     useEffect(() => {
         if (!clientId) {
             logMissingAuthContext("clientId");
         } else {
             if (!sessionWorkerRef.current) {
                 const sw = createWorker();
                 sw.addEventListener("message", () => {
-                    dispatch(refreshTokens(clientId));
+                    // It would be nice to check if we have a refresh token here without refs, but doing so would mean
+                    // unbinding and re-binding the listener every time the effect is re-executed. Instead, we can use a
+                    // ref to access the token without triggering a hook dependency change.
+                    // While the action itself also handles the no refresh token case, it pollutes the Redux and console
+                    // logs and so it's nicer to re-check here.
+                    if (refreshTokenRef.current) dispatch(refreshTokens(clientId));
                     dispatch(fetchUserDependentData);
                 });
                 sessionWorkerRef.current = sw;

src/redux/authSlice.ts

@@ -73,6 +73,14 @@ export const refreshTokens = createAsyncThunk<RefreshTokenPayload, string>(
 
         if (!url) return;
 
+        const { refreshToken } = state.auth;
+
+        if (!refreshToken) {
+            // We shouldn't execute a request that we know will fail. If no refresh token is set, this action errors -
+            // the user is (should already be) signed out with no permissions.
+            throw new Error("No refresh token present");  // Throw an error to definitively reset auth slice state.
+        }
+
         const response = await fetch(url, {
             method: "POST",
             headers: {
@@ -81,7 +89,7 @@ export const refreshTokens = createAsyncThunk<RefreshTokenPayload, string>(
             body: buildUrlEncodedData({
                 grant_type: "refresh_token",
                 client_id: clientId,
-                refresh_token: state.auth.refreshToken,
+                refresh_token: refreshToken,
             }),
         });