WIP Implement token refreshing

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/api/index.js

@@ -0,0 +1,77 @@
+// See https://www.techynovice.com/setting-up-JWT-token-refresh-mechanism-with-axios/
+
+import axios from 'axios';
+
+const authenticatedClient = axios.create({
+    headers: {
+        'Authentication': 'Bearer ' + sessionStorage.getItem('token')
+    }
+});
+
+authenticatedClient.interceptors.response.use(
+    response => response,
+    error => {
+        const errorResponse = error.response;
+        if (isTokenExpiredError(errorResponse)) {
+            return resetTokenAndReattemptRequest(error)
+        }
+        return Promise.reject(error)
+    }
+);
+
+function isTokenExpiredError (errorResponse) {
+    if (errorResponse.config.code !== 401) {
+        return false
+    }
+
+    return errorResponse.message.match(/expired/);
+}
+
+let isAlreadyFetchingAccessToken = false;
+let subscribers = [];
+
+async function resetTokenAndReattemptRequest (error) {
+    try {
+        const { response: errorResponse } = error;
+        const refreshToken = await getRefreshToken();
+        if (!refreshToken) {
+            return Promise.reject(error);
+        }
+        const retryOriginalRequest = new Promise(resolve => {
+            addSubscriber(authToken => {
+                errorResponse.config.headers.Authorization = 'Bearer ' + authToken;
+                resolve(axios(errorResponse.config));
+            });
+        });
+        if (!isAlreadyFetchingAccessToken) {
+            isAlreadyFetchingAccessToken = true;
+            axios({
+                method: 'post',
+                url: `<YOUR TOKEN REFREH ENDPOINT>`,
+                data: {
+                    refresh_token: refreshToken
+                }
+            }).then(response => {
+                if (!response.data) {
+                    return Promise.reject(error);
+                }
+                const newToken = response.data.refresh_token;
+                saveRefreshToken(newToken);
+                isAlreadyFetchingAccessToken = false;
+                onAccessTokenFetched(newToken);
+            });
+        }
+        return retryOriginalRequest;
+    } catch (err) {
+        return Promise.reject(err);
+    }
+}
+
+function onAccessTokenFetched(access_token) {
+    subscribers.forEach(callback => callback(access_token));
+    subscribers = [];
+}
+
+function addSubscriber(callback) {
+    subscribers.push(callback);
+}