Fix invalid token error message (#321)

src/utils/api.tsx

@@ -4,7 +4,9 @@ import {
   useOidcIdToken,
 } from "@axa-fr/react-oidc";
 import loadConfig from "@utils/config";
+import { sleep } from "@utils/helpers";
 import { usePathname } from "next/navigation";
+import { isExpired } from "react-jwt";
 import useSWR from "swr";
 import { useErrorBoundary } from "@/contexts/ErrorBoundary";
 
@@ -40,15 +42,30 @@ export function useNetBirdFetch() {
   const tokenSource = config.tokenSource || "accessToken";
   const { idToken } = useOidcIdToken();
   const { accessToken } = useOidcAccessToken();
+  const token = tokenSource.toLowerCase() == "idtoken" ? idToken : accessToken;
+  const handleErrors = useApiErrorHandling();
+
+  const isTokenExpired = async () => {
+    let attempts = 20;
+    while (isExpired(token) && attempts > 0) {
+      await sleep(500);
+      attempts = attempts - 1;
+    }
+    return isExpired(token);
+  };
 
   const nativeFetch = async (input: RequestInfo, init?: RequestInit) => {
-    const token =
-      tokenSource.toLowerCase() == "idtoken" ? idToken : accessToken;
+    const tokenExpired = await isTokenExpired();
+    if (tokenExpired) {
+      return handleErrors({ code: 401, message: "token expired" });
+    }
+
     const headers = {
       "Content-Type": "application/json",
       Accept: "application/json",
       Authorization: `Bearer ${token}`,
     };
+
     return fetch(input, {
       ...init,
       headers,
@@ -122,6 +139,9 @@ export function useApiErrorHandling() {
     if (err.code == 401 && err.message == "no valid authentication provided") {
       return login(currentPath);
     }
+    if (err.code == 401 && err.message == "token expired") {
+      return login(currentPath);
+    }
     if (err.code == 401 && err.message == "token invalid") {
       return setError(err);
     }