fix: tokens (#113)

### 1. Local Storage Not Updated
Access tokens and refresh tokens are only saved to local storage on
login, subsequent token refreshes do not update local storage.
<br><b>Example:</b> User refreshes to a new token and exits Overleaf,
the next time he re-opens PaperDebugger, it uses the old refresh token.
<br><b>Proposed solution:</b> Update authStore whenever tokens are set.

<br>

### 2. Race Conditions When Refreshing
PaperDebugger often calls multiple endpoints at the same time, which
results in a race condition if the token needs to be refreshed.
<br><b>Example:</b> `v2/chats/models` and `v2/chats/conversations` are
called at the same time, and the access token needs refreshing, the
refresh endpoint is called twice. In some occasions, the frontend uses
the 2nd refresh token received which differs from the one stored in the
backend. This can be easily reproduced by setting the JWT expiration in
the backend to a very short time.
<br><b>Proposed solution:</b> Use a promise for `refresh()`.

<br>
<br>

Unsure if this fixes the exact problem in #110

Author: kah-seng

webapp/_webapp/src/libs/apiclient.ts

@@ -7,6 +7,7 @@ import { EventEmitter } from "events";
 import { ErrorCode, ErrorSchema } from "../pkg/gen/apiclient/shared/v1/shared_pb";
 import { errorToast } from "./toasts";
 import { storage } from "./storage";
+import { useAuthStore } from "../stores/auth-store";
 
 // Exhaustive type check helper - will cause compile error if a case is not handled
 const assertNever = (x: never): never => {
@@ -29,6 +30,7 @@ class ApiClient {
   private axiosInstance: AxiosInstance;
   private refreshToken: string | null;
   private onTokenRefreshedEventEmitter: EventEmitter;
+  private refreshPromise: Promise<void> | null = null;
 
   constructor(baseURL: string, apiVersion: ApiVersion) {
     this.axiosInstance = axios.create({
@@ -64,6 +66,8 @@ class ApiClient {
   }
 
   setTokens(token: string, refreshToken: string): void {
+    useAuthStore.getState().setToken(token);
+    useAuthStore.getState().setRefreshToken(refreshToken);
     this.refreshToken = refreshToken;
     this.axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`;
   }
@@ -89,15 +93,27 @@ class ApiClient {
   }
 
   async refresh() {
-    const response = await this.axiosInstance.post<JsonValue>("/auth/refresh", {
-      refreshToken: this.refreshToken,
-    });
-    const resp = fromJson(RefreshTokenResponseSchema, response.data);
-    this.setTokens(resp.token, resp.refreshToken);
-    this.onTokenRefreshedEventEmitter.emit("tokenRefreshed", {
-      token: resp.token,
-      refreshToken: resp.refreshToken,
-    });
+    if (this.refreshPromise) {
+      return this.refreshPromise;
+    }
+
+    this.refreshPromise = (async () => {
+      try {
+        const response = await this.axiosInstance.post<JsonValue>("/auth/refresh", {
+          refreshToken: this.refreshToken,
+        });
+        const resp = fromJson(RefreshTokenResponseSchema, response.data);
+        this.setTokens(resp.token, resp.refreshToken);
+        this.onTokenRefreshedEventEmitter.emit("tokenRefreshed", {
+          token: resp.token,
+          refreshToken: resp.refreshToken,
+        });
+      } finally {
+        this.refreshPromise = null;
+      }
+    })();
+
+    return this.refreshPromise;
   }
 
   private async requestWithRefresh(config: AxiosRequestConfig): Promise<JsonValue> {