Issue 82 refactor axios interceptor #86

EdenWuyt · 2025-12-27T09:43:54Z

Change Summary

Refactor axios interceptor to bear JWT tokens (stored in localStorage)

Change Form

Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.

The pull request title has an issue number
The change works by "Smoke testing" or quick testing
The change has tests
The change has documentation

Other Information

demo:
https://github.com/user-attachments/assets/6612d961-ccd0-43f3-a1a6-53733373d51e

Open as draft PR.

Related issue

Resolve Refactor Axios interceptor #82

…and refresh token as http only cookie.

… cookie. No test yet.

EdenWuyt · 2025-12-27T09:48:57Z

Backend fails as I rebase the main to get the non-public /bookings endpoint, but the test file inside booking failed.

Copilot

Pull request overview

This PR refactors the axios interceptor to implement JWT token-based authentication using browser-accessible cookies. The implementation adds automatic token refresh logic when access tokens expire (401 responses), with a queuing mechanism to handle concurrent requests during token refresh.

Key changes include:

Implementation of cookie-based JWT token storage with in-memory caching
Automatic token refresh interceptor with request queuing for concurrent API calls
Helper functions for token and cookie management

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 11 comments.

File	Description
client/src/lib/api.ts	Complete refactor implementing JWT authentication with axios interceptors, cookie management, and automatic token refresh logic
client/package.json	Added devDependencies: axios-cookiejar-support, dotenv, tough-cookie, and tsx
client/package-lock.json	Updated lockfile with new dependencies and their transitive dependencies

Files not reviewed (1)

client/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

client/src/lib/api.ts

Copilot

Pull request overview

Copilot reviewed 2 out of 3 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

client/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-10T05:54:10Z

client/src/lib/api.ts

+
+    // Prevent infinite loop
+    if (error.config?.url?.includes("/users/refresh"))
+      return handleEarlyLogout("Token refreshed failed", error);


The error message contains a typo: "Token refreshed failed" should be "Token refresh failed" for grammatical correctness.

Suggested change

return handleEarlyLogout("Token refreshed failed", error);

return handleEarlyLogout("Token refresh failed", error);

Copilot · 2026-01-10T05:54:11Z

client/src/lib/api.ts

+      // console.log("Access token refreshed", newAccessToken);
+      if (!newAccessToken) {
+        console.warn("No access token returned, logging out");
+        return handleEarlyLogout("No access token returned");
+      }
+
+      // console.log("Setting new access token:", newAccessToken);


Commented-out console.log statements at lines 197 and 203 should be removed. If debug logging is needed, consider using a proper logging library or environment-based debug flags instead of leaving commented code.

Suggested change

// console.log("Access token refreshed", newAccessToken);

if (!newAccessToken) {

console.warn("No access token returned, logging out");

return handleEarlyLogout("No access token returned");

}

// console.log("Setting new access token:", newAccessToken);

if (!newAccessToken) {

console.warn("No access token returned, logging out");

return handleEarlyLogout("No access token returned");

}

Copilot · 2026-01-10T05:54:11Z

client/src/lib/api.ts

+// test only
+if (typeof window !== "undefined") {
+  // @ts-ignore
+  window.api = api;


The test-only code that exposes the api instance on the window object should not be included in production code. This creates a security risk by making the API instance globally accessible. Consider using environment checks to ensure this code only runs in development/test environments, or better yet, use proper testing utilities that don't require modifying production code.

Suggested change

// test only

if (typeof window !== "undefined") {

// @ts-ignore

window.api = api;

// test only: expose api on window in non-production environments

if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {

// @ts-ignore

// eslint-disable-next-line @typescript-eslint/no-explicit-any

(window as any).api = api;

Copilot · 2026-01-10T05:54:12Z

client/src/lib/api.ts

+// let inMemoryAccessToken: string | undefined = undefined;
+
+// Helper function to get cookie by name
+// const getCookie = (name: string) => {
+//   const cookies = document.cookie.split("; ");
+//   // Only split on the first '=' to allow '=' in the value
+//   const prefix = name + "=";
+//   const match = cookies.find((row) => row.startsWith(prefix));
+//   if (!match) {
+//     return "";
+//   }
+//   const value = match.substring(prefix.length);
+//   return decodeURIComponent(value);
+// };
+
+// const getAccessToken = () => {
+//   // Ensure this function is called only on the client side
+//   if (typeof window === "undefined") {
+//     throw new Error("getAccessToken can only be called on the client side");
+//   }
+//   if (inMemoryAccessToken) return inMemoryAccessToken;
+//   // Check if the token returned is an empty string before caching it
+//   const tokenFromCookie = getCookie("accessToken");
+//   if (!tokenFromCookie) return;
+//   inMemoryAccessToken = tokenFromCookie;
+//   return inMemoryAccessToken;
+// };
+
+// const setAccessToken = (accessToken: string) => {
+//   // Ensure this function is called only on the client side
+//   if (typeof window === "undefined") {
+//     throw new Error("setAccessToken can only be called on the client side");
+//   }
+//   // Cookies with Secure flag only be set over HTTPS (allow non-secure in development)
+//   const isSecure = window.location.protocol === "https:";
+//   inMemoryAccessToken = accessToken;
+//   const newCookie = [
+//     `accessToken=${encodeURIComponent(accessToken)}`,
+//     "path=/",
+//     "SameSite=Lax",
+//     isSecure ? "Secure" : "",
+//   ]
+//     .filter(Boolean)
+//     .join("; ");
+//   document.cookie = newCookie;
+// };
+
+// const getRefreshToken = () => {
+//   // Ensure this function is called only on the client side
+//   if (typeof window === "undefined") {
+//     throw new Error("getRefreshToken can only be called on the client side");
+//   }
+//   return getCookie("refreshToken");
+// };
+
+// const clearTokens = () => {
+//   if (typeof window === "undefined") {
+//     throw new Error("clearTokens can only be called on the client side");
+//   }
+//   // Cookies with Secure flag only be set over HTTPS (allow non-secure in development)
+//   const isSecure = window.location.protocol === "https:";
+//   const base = ["path=/", "SameSite=Lax", isSecure ? "Secure" : ""]
+//     .filter(Boolean)
+//     .join("; ");
+//   document.cookie = `accessToken=; Max-Age=0; ${base}`;
+//   document.cookie = `refreshToken=; Max-Age=0; ${base}`;
+//   inMemoryAccessToken = undefined;
+// };
+
+const getAccessToken = () =>
+  typeof window !== "undefined" ? localStorage.getItem("accessToken") : null;
+
+const setAccessToken = (accessToken: string) =>
+  typeof window !== "undefined"
+    ? localStorage.setItem("accessToken", accessToken)
+    : null;
+
+const getRefreshToken = () =>
+  typeof window !== "undefined" ? localStorage.getItem("refreshToken") : null;
+
+const clearTokens = () => {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem("accessToken");
+  localStorage.removeItem("refreshToken");


Using localStorage for JWT tokens is less secure than httpOnly cookies as it's vulnerable to XSS attacks. Tokens stored in localStorage can be accessed by any JavaScript code running on the page, including malicious scripts. Consider using httpOnly cookies for storing sensitive tokens, or at a minimum, document the security implications of this choice.

Suggested change

// let inMemoryAccessToken: string | undefined = undefined;

// Helper function to get cookie by name

// const getCookie = (name: string) => {

// const cookies = document.cookie.split("; ");

// // Only split on the first '=' to allow '=' in the value

// const prefix = name + "=";

// const match = cookies.find((row) => row.startsWith(prefix));

// if (!match) {

// return "";

// }

// const value = match.substring(prefix.length);

// return decodeURIComponent(value);

// };

// const getAccessToken = () => {

// // Ensure this function is called only on the client side

// if (typeof window === "undefined") {

// throw new Error("getAccessToken can only be called on the client side");

// }

// if (inMemoryAccessToken) return inMemoryAccessToken;

// // Check if the token returned is an empty string before caching it

// const tokenFromCookie = getCookie("accessToken");

// if (!tokenFromCookie) return;

// inMemoryAccessToken = tokenFromCookie;

// return inMemoryAccessToken;

// };

// const setAccessToken = (accessToken: string) => {

// // Ensure this function is called only on the client side

// if (typeof window === "undefined") {

// throw new Error("setAccessToken can only be called on the client side");

// }

// // Cookies with Secure flag only be set over HTTPS (allow non-secure in development)

// const isSecure = window.location.protocol === "https:";

// inMemoryAccessToken = accessToken;

// const newCookie = [

// `accessToken=${encodeURIComponent(accessToken)}`,

// "path=/",

// "SameSite=Lax",

// isSecure ? "Secure" : "",

// ]

// .filter(Boolean)

// .join("; ");

// document.cookie = newCookie;

// };

// const getRefreshToken = () => {

// // Ensure this function is called only on the client side

// if (typeof window === "undefined") {

// throw new Error("getRefreshToken can only be called on the client side");

// }

// return getCookie("refreshToken");

// };

// const clearTokens = () => {

// if (typeof window === "undefined") {

// throw new Error("clearTokens can only be called on the client side");

// }

// // Cookies with Secure flag only be set over HTTPS (allow non-secure in development)

// const isSecure = window.location.protocol === "https:";

// const base = ["path=/", "SameSite=Lax", isSecure ? "Secure" : ""]

// .filter(Boolean)

// .join("; ");

// document.cookie = `accessToken=; Max-Age=0; ${base}`;

// document.cookie = `refreshToken=; Max-Age=0; ${base}`;

// inMemoryAccessToken = undefined;

// };

const getAccessToken = () =>

typeof window !== "undefined" ? localStorage.getItem("accessToken") : null;

const setAccessToken = (accessToken: string) =>

typeof window !== "undefined"

? localStorage.setItem("accessToken", accessToken)

: null;

const getRefreshToken = () =>

typeof window !== "undefined" ? localStorage.getItem("refreshToken") : null;

const clearTokens = () => {

if (typeof window === "undefined") return;

localStorage.removeItem("accessToken");

localStorage.removeItem("refreshToken");

let inMemoryAccessToken: string | undefined = undefined;

// Helper function to get cookie by name.

// Note: For maximal security, tokens should ideally be stored in httpOnly cookies

// set by the server so that they are not accessible to JavaScript at all.

// This helper assumes non-httpOnly cookies that are readable on the client.

const getCookie = (name: string) => {

const cookies = document.cookie.split("; ");

// Only split on the first '=' to allow '=' in the value

const prefix = name + "=";

const match = cookies.find((row) => row.startsWith(prefix));

if (!match) {

return "";

}

const value = match.substring(prefix.length);

return decodeURIComponent(value);

};

const getAccessToken = () => {

// Ensure this function is called only on the client side

if (typeof window === "undefined") {

throw new Error("getAccessToken can only be called on the client side");

}

if (inMemoryAccessToken) return inMemoryAccessToken;

// Check if the token returned is an empty string before caching it

const tokenFromCookie = getCookie("accessToken");

if (!tokenFromCookie) return;

inMemoryAccessToken = tokenFromCookie;

return inMemoryAccessToken;

};

const setAccessToken = (accessToken: string) => {

// Ensure this function is called only on the client side

if (typeof window === "undefined") {

throw new Error("setAccessToken can only be called on the client side");

}

// Cookies with Secure flag only be set over HTTPS (allow non-secure in development)

const isSecure = window.location.protocol === "https:";

inMemoryAccessToken = accessToken;

const newCookie = [

`accessToken=${encodeURIComponent(accessToken)}`,

"path=/",

"SameSite=Lax",

isSecure ? "Secure" : "",

]

.filter(Boolean)

.join("; ");

document.cookie = newCookie;

};

const getRefreshToken = () => {

// Ensure this function is called only on the client side

if (typeof window === "undefined") {

throw new Error("getRefreshToken can only be called on the client side");

}

return getCookie("refreshToken");

};

const clearTokens = () => {

if (typeof window === "undefined") {

throw new Error("clearTokens can only be called on the client side");

}

// Cookies with Secure flag only be set over HTTPS (allow non-secure in development)

const isSecure = window.location.protocol === "https:";

const base = ["path=/", "SameSite=Lax", isSecure ? "Secure" : ""]

.filter(Boolean)

.join("; ");

document.cookie = `accessToken=; Max-Age=0; ${base}`;

document.cookie = `refreshToken=; Max-Age=0; ${base}`;

inMemoryAccessToken = undefined;

Nothing to change here. LocalStorage is used based on agreement.

Copilot · 2026-01-10T05:54:12Z

client/src/lib/api.ts

+// Module-level in-memory cache for the access token.
+// Used only to avoid repeated cookie parsing on the client.
+// This module is loaded once per browser session, so this value persists across all renders on the client.
+// Warning: Don't use functions involving this variable for Server Side Rendering (SSR).
+// let inMemoryAccessToken: string | undefined = undefined;
+
+// Helper function to get cookie by name
+// const getCookie = (name: string) => {
+//   const cookies = document.cookie.split("; ");
+//   // Only split on the first '=' to allow '=' in the value
+//   const prefix = name + "=";
+//   const match = cookies.find((row) => row.startsWith(prefix));
+//   if (!match) {
+//     return "";
+//   }
+//   const value = match.substring(prefix.length);
+//   return decodeURIComponent(value);
+// };
+
+// const getAccessToken = () => {
+//   // Ensure this function is called only on the client side
+//   if (typeof window === "undefined") {
+//     throw new Error("getAccessToken can only be called on the client side");
+//   }
+//   if (inMemoryAccessToken) return inMemoryAccessToken;
+//   // Check if the token returned is an empty string before caching it
+//   const tokenFromCookie = getCookie("accessToken");
+//   if (!tokenFromCookie) return;
+//   inMemoryAccessToken = tokenFromCookie;
+//   return inMemoryAccessToken;
+// };
+
+// const setAccessToken = (accessToken: string) => {
+//   // Ensure this function is called only on the client side
+//   if (typeof window === "undefined") {
+//     throw new Error("setAccessToken can only be called on the client side");
+//   }
+//   // Cookies with Secure flag only be set over HTTPS (allow non-secure in development)
+//   const isSecure = window.location.protocol === "https:";
+//   inMemoryAccessToken = accessToken;
+//   const newCookie = [
+//     `accessToken=${encodeURIComponent(accessToken)}`,
+//     "path=/",
+//     "SameSite=Lax",
+//     isSecure ? "Secure" : "",
+//   ]
+//     .filter(Boolean)
+//     .join("; ");
+//   document.cookie = newCookie;
+// };
+
+// const getRefreshToken = () => {
+//   // Ensure this function is called only on the client side
+//   if (typeof window === "undefined") {
+//     throw new Error("getRefreshToken can only be called on the client side");
+//   }
+//   return getCookie("refreshToken");
+// };
+
+// const clearTokens = () => {
+//   if (typeof window === "undefined") {
+//     throw new Error("clearTokens can only be called on the client side");
+//   }
+//   // Cookies with Secure flag only be set over HTTPS (allow non-secure in development)
+//   const isSecure = window.location.protocol === "https:";
+//   const base = ["path=/", "SameSite=Lax", isSecure ? "Secure" : ""]
+//     .filter(Boolean)
+//     .join("; ");
+//   document.cookie = `accessToken=; Max-Age=0; ${base}`;
+//   document.cookie = `refreshToken=; Max-Age=0; ${base}`;
+//   inMemoryAccessToken = undefined;
+// };
+
+const getAccessToken = () =>
+  typeof window !== "undefined" ? localStorage.getItem("accessToken") : null;
+
+const setAccessToken = (accessToken: string) =>
+  typeof window !== "undefined"
+    ? localStorage.setItem("accessToken", accessToken)
+    : null;
+
+const getRefreshToken = () =>
+  typeof window !== "undefined" ? localStorage.getItem("refreshToken") : null;
+
+const clearTokens = () => {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem("accessToken");
+  localStorage.removeItem("refreshToken");
+};


The PR description mentions refactoring the axios interceptor to use browser-accessible cookies for JWT tokens. However, the implementation uses localStorage instead of cookies (lines 87-102). This is inconsistent with the stated purpose. Additionally, the large block of commented-out cookie-based implementation (lines 14-85) should be removed to keep the codebase clean and avoid confusion.

EdenWuyt added 5 commits December 27, 2025 08:30

Refactor Axios inceptor assuming tokens local storage.

c47dad1

Add comments about implementation when access token stored in memory …

d05f434

…and refresh token as http only cookie.

Update to store access token in memory and refresh token as http only…

7328d27

… cookie. No test yet.

Update to store access token and refresh token in brower cookies.

7ae3ffe

Update error handling. Add some test setup.

92388bd

EdenWuyt marked this pull request as ready for review January 4, 2026 16:36

EdenWuyt requested a review from ErikaKK January 4, 2026 16:36

ErikaKK requested a review from Copilot January 6, 2026 12:54

Copilot started reviewing on behalf of ErikaKK January 6, 2026 12:55 View session

Copilot AI reviewed Jan 6, 2026

View reviewed changes

EdenWuyt added 2 commits January 8, 2026 20:19

Bug fixes and code optimization based on Github Copilot suggestions.

f905cd7

Use local storage to store tokens.

53692cb

ErikaKK requested a review from Copilot January 10, 2026 05:51

Copilot started reviewing on behalf of ErikaKK January 10, 2026 05:51 View session

Copilot AI reviewed Jan 10, 2026

View reviewed changes

Cleanup comments.

ae9b6b0

	return handleEarlyLogout("Token refreshed failed", error);
	return handleEarlyLogout("Token refresh failed", error);

Issue 82 refactor axios interceptor #86

Are you sure you want to change the base?

Issue 82 refactor axios interceptor #86

Uh oh!

Conversation

EdenWuyt commented Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Change Summary

Change Form

Other Information

Related issue

Uh oh!

EdenWuyt commented Dec 27, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

EdenWuyt Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

EdenWuyt commented Dec 27, 2025 •

edited

Loading