add middlewares to openapi-fetch

web/src/lib/api/index.ts

@@ -1,6 +1,9 @@
-import createClient from "openapi-fetch";
-import type { paths } from "./api.d.ts";
+import createClient from 'openapi-fetch';
+import type { paths } from './api.d.ts';
 import { env } from '$env/dynamic/public';
+import { autoLogoutMiddleware, loggingMiddleware } from '$lib/api/middlewares.ts';
 
-const client = createClient<paths>({ baseUrl: env.PUBLIC_API_URL });
-export default client;
+const client = createClient<paths>({ baseUrl: env.PUBLIC_API_URL, credentials: 'include' });
+client.use(loggingMiddleware, autoLogoutMiddleware);
+
+export default client;

web/src/lib/api/middlewares.ts

@@ -0,0 +1,35 @@
+import { handleLogout } from '$lib/utils.ts';
+import type { Middleware } from 'openapi-fetch';
+
+export const loggingMiddleware: Middleware = {
+	async onRequest({ request }) {
+		console.log(`Requesting ${request.method} ${request.url}`);
+		return request;
+	},
+	async onResponse({ request, response }) {
+		if (!response.ok) {
+			console.error(`Request to ${request.url} failed with status ${response.status}`);
+		} else {
+			console.log(`Request to ${request.url} succeeded with status ${response.status}`);
+		}
+		return response;
+	},
+	async onError({ error }) {
+		return new Error('Oops, fetch failed', { cause: error });
+	}
+};
+
+export const autoLogoutMiddleware: Middleware = {
+	async onResponse({ request, response }) {
+		if (response.status === 401) {
+			console.log(`Request to ${request.url} returned HTTP Error Code 401, logging out...`);
+			await handleLogout();
+		}
+		if (response.status === 403) {
+			console.log(
+				`Request to ${request.url} returned HTTP Error Code 403, this shouldn't happen, consider opening a bug report!`
+			);
+		}
+		return response;
+	}
+};