From 8c8131cbcee2070c7b1caaa83f526d01ba1da950 Mon Sep 17 00:00:00 2001
From: ledouxm <martin.ledoux.pro@gmail.com>
Date: Thu, 12 Dec 2024 15:48:06 +0100
Subject: [PATCH] hotfix: refresh token

---
 packages/frontend/src/api.ts                    | 5 +++--
 packages/frontend/src/components/LoginForm.tsx  | 4 ++--
 packages/frontend/src/components/SignupForm.tsx | 4 ++--
 packages/frontend/src/db/Connector.ts           | 8 +++++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/api.ts b/packages/frontend/src/api.ts
index 1449857c..a9f19cfb 100644
--- a/packages/frontend/src/api.ts
+++ b/packages/frontend/src/api.ts
@@ -7,12 +7,12 @@ import { getTokenOrRefresh } from "./db/Connector";
 
 export const apiStore = createStore("auth", "access");
 
-export const createApiClientWithUrl = (url: string) => {
+export const createApiClientWithUrl = (url: string, ignoreToken?: boolean) => {
   return createApiClient(async (method, url, parameters) => {
     const { body, query, header } = parameters || {};
 
     let token;
-    if (ref.token) {
+    if (!ignoreToken && ref.token) {
       token = await getTokenOrRefresh();
     }
 
@@ -26,6 +26,7 @@ export const createApiClientWithUrl = (url: string) => {
 };
 
 export const api = createApiClientWithUrl(ENV.VITE_BACKEND_URL);
+export const unauthenticatedApi = createApiClientWithUrl(ENV.VITE_BACKEND_URL, true);
 set("url", ENV.VITE_BACKEND_URL, apiStore);
 const ref = {
   token: null as string | null,
diff --git a/packages/frontend/src/components/LoginForm.tsx b/packages/frontend/src/components/LoginForm.tsx
index 493c9209..c5f6d51e 100644
--- a/packages/frontend/src/components/LoginForm.tsx
+++ b/packages/frontend/src/components/LoginForm.tsx
@@ -9,14 +9,14 @@ import { FullWidthButton } from "./FullWidthButton";
 import { InputGroup } from "./InputGroup";
 import { PasswordInput } from "./PasswordInput";
 import { useMutation } from "@tanstack/react-query";
-import { type RouterInputs, api, getErrorMessage } from "../api";
+import { type RouterInputs, api, getErrorMessage, unauthenticatedApi } from "../api";
 import { useState } from "react";
 
 export const LoginForm = () => {
   const [authData, setAuthData] = useAuthContext();
   const form = useForm<LoginFormProps>();
 
-  const mutation = useMutation((body: LoginFormProps) => api.post("/api/login", { body }));
+  const mutation = useMutation((body: LoginFormProps) => unauthenticatedApi.post("/api/login", { body }));
 
   const [shouldShowPopup] = useState(localStorage.getItem("crvif/update-popup"));
 
diff --git a/packages/frontend/src/components/SignupForm.tsx b/packages/frontend/src/components/SignupForm.tsx
index 21df1aa6..870782d3 100644
--- a/packages/frontend/src/components/SignupForm.tsx
+++ b/packages/frontend/src/components/SignupForm.tsx
@@ -8,7 +8,7 @@ import { InputGroup } from "./InputGroup";
 import Alert from "@codegouvfr/react-dsfr/Alert";
 import { useAuthContext } from "../contexts/AuthContext";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { type RouterInputs, api, getErrorMessage } from "../api";
+import { type RouterInputs, api, getErrorMessage, unauthenticatedApi } from "../api";
 import Select from "@codegouvfr/react-dsfr/Select";
 
 export const SignupForm = () => {
@@ -23,7 +23,7 @@ export const SignupForm = () => {
 
   const [_, setData] = useAuthContext();
 
-  const mutation = useMutation((body: SignupFormProps) => api.post("/api/create-user", { body }));
+  const mutation = useMutation((body: SignupFormProps) => unauthenticatedApi.post("/api/create-user", { body }));
 
   const udapsQuery = useQuery({
     queryKey: ["udaps"],
diff --git a/packages/frontend/src/db/Connector.ts b/packages/frontend/src/db/Connector.ts
index 69dabc78..e14b6f7c 100644
--- a/packages/frontend/src/db/Connector.ts
+++ b/packages/frontend/src/db/Connector.ts
@@ -1,6 +1,6 @@
 import { UpdateType, PowerSyncBackendConnector, AbstractPowerSyncDatabase, CrudBatch } from "@powersync/web";
 import { safeJSONParse } from "pastable";
-import { api } from "../api";
+import { api, unauthenticatedApi } from "../api";
 import { get } from "idb-keyval";
 import { getPicturesStore } from "../features/idb";
 import { ENV } from "../envVars";
@@ -54,11 +54,11 @@ export class Connector implements PowerSyncBackendConnector {
 }
 
 export const getTokenOrRefresh = async () => {
-  const authData = safeJSONParse(window.localStorage.getItem("crvif/auth") ?? "");
+  let authData = safeJSONParse(window.localStorage.getItem("crvif/auth") ?? "");
   if (!authData) throw new Error("No auth data found");
 
   if (new Date(authData.expiresAt) < new Date()) {
-    const resp = await api.get("/api/refresh-token", {
+    const resp = await unauthenticatedApi.get("/api/refresh-token", {
       query: { token: authData.token, refreshToken: authData.refreshToken! },
     });
 
@@ -69,6 +69,8 @@ export const getTokenOrRefresh = async () => {
       console.log("token refreshed");
       window.localStorage.setItem("crvif/auth", JSON.stringify({ ...authData, ...resp }));
     }
+
+    authData = safeJSONParse(window.localStorage.getItem("crvif/auth") ?? "");
   }
 
   return authData.token as string;