feat: authentication integration

web/src/api/index.ts

@@ -1,20 +1,74 @@
-export const handleApiError = async (response: Response) => {
-  try {
-    const json = await response.json();
-    console.log({ json });
-    const text = json.error ?? "unexpected error happpened";
-    return new Error(text[0].toUpperCase() + text.slice(1));
-  } catch (err) {
-    try {
-      console.log(err);
-      const text = await response.text();
-      if (text.length > 0) {
-        return new Error(text[0].toUpperCase() + text.slice(1));
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  }
+import { deleteAccount, updateAccountTokens } from "@/repository/account";
+import { useDbStore } from "@/store/db";
+import { useAuth } from "@/store/auth";
+import Axios, { type AxiosResponse } from "axios";
+import { refreshTokenApi } from "./refresh";
 
-  return new Error("Unexpected error happened");
+export const axios = Axios.create({
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+axios.interceptors.request.use(
+  (request) => {
+    const account = useAuth.getState().activeAccount;
+    if (account?.access) {
+      request.headers["Authorization"] = `Bearer ${account.access}`;
+    }
+
+    return request;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+axios.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      const account = useAuth.getState().activeAccount;
+      if (!account?.refresh) {
+        return Promise.reject(new Error("Unauthorized. No refresh token"));
+      }
+
+      const db = useDbStore.getState().db;
+      if (!db) {
+        return Promise.reject(new Error("No database connection"));
+      }
+
+      try {
+        const response = await refreshTokenApi(account.refresh);
+
+        updateAccountTokens(db, {
+          accountId: account.accountId,
+          access: response.access,
+          refresh: response.refresh,
+        });
+      } catch (err) {
+        console.error("token refresh failed:", err);
+        await deleteAccount(db, account.accountId);
+        const loadAccounts = useAuth.getState().loadAccounts;
+        loadAccounts?.();
+        const requireSignIn = useAuth.getState().requireSignIn;
+        requireSignIn?.();
+        return Promise.reject(err);
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export const handleApiError = async (response: AxiosResponse) => {
+  const text =
+    response.data?.error ||
+    response.data?.toString?.() ||
+    "unexpected error happened";
+  return new Error(text[0].toUpperCase() + text.slice(1));
 };