From 249d7b6a4715e31f918e3bba7d6b83a9b1273204 Mon Sep 17 00:00:00 2001
From: conrad-mo <51024076+conrad-mo@users.noreply.github.com>
Date: Sat, 15 Aug 2026 04:48:33 -0700
Subject: [PATCH] Refactor auth for new auth setup

---
 src/accessToken.ts                |  9 +++++++++
 src/api/authApi.ts                |  4 ++++
 src/axiosInstance.ts              | 10 +++++-----
 src/components/Authentication.tsx | 20 +++++++++-----------
 4 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 src/accessToken.ts

diff --git a/src/accessToken.ts b/src/accessToken.ts
new file mode 100644
index 0000000..1b26ab0
--- /dev/null
+++ b/src/accessToken.ts
@@ -0,0 +1,9 @@
+let accessToken: string | null = null;
+
+export function getAccessToken(): string | null {
+  return accessToken;
+}
+
+export function setAccessToken(token: string | null): void {
+  accessToken = token;
+}
diff --git a/src/api/authApi.ts b/src/api/authApi.ts
index d0dd602..ec7bb34 100644
--- a/src/api/authApi.ts
+++ b/src/api/authApi.ts
@@ -29,6 +29,10 @@ export async function refreshSession() {
   return response.data;
 }
 
+export async function deleteSession() {
+  await axiosInstance.delete("/account/tokens");
+}
+
 export async function getCurrentUser() {
   const response = await axiosInstance.get<AccountUser>("/account/me");
   return response.data;
diff --git a/src/axiosInstance.ts b/src/axiosInstance.ts
index 359de2e..db8e2a0 100644
--- a/src/axiosInstance.ts
+++ b/src/axiosInstance.ts
@@ -1,9 +1,11 @@
 import axios, { AxiosError, type InternalAxiosRequestConfig } from "axios";
+import { getAccessToken, setAccessToken } from "./accessToken";
 
 const API_BASE_URL = import.meta.env.VITE_HTB_API;
 
 export const axiosInstance = axios.create({
   baseURL: API_BASE_URL,
+  withCredentials: true,
   headers: {
     accept: "application/json",
   },
@@ -11,7 +13,7 @@ export const axiosInstance = axios.create({
 
 axiosInstance.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem("auth-token");
+    const token = getAccessToken();
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
@@ -31,14 +33,12 @@ let refreshRequest: Promise<string> | null = null;
 async function refreshAccessToken(): Promise<string> {
   if (refreshRequest) return refreshRequest;
   refreshRequest = (async () => {
-    const token = localStorage.getItem("auth-token");
-    if (!token) throw new Error("No session to refresh");
     const response = await axios.post<{ access_token: string }>(
       `${API_BASE_URL}/account/tokens`,
       undefined,
-      { headers: { Authorization: `Bearer ${token}` } },
+      { withCredentials: true },
     );
-    localStorage.setItem("auth-token", response.data.access_token);
+    setAccessToken(response.data.access_token);
     return response.data.access_token;
   })().finally(() => {
     refreshRequest = null;
diff --git a/src/components/Authentication.tsx b/src/components/Authentication.tsx
index 449aaeb..6270c88 100644
--- a/src/components/Authentication.tsx
+++ b/src/components/Authentication.tsx
@@ -6,12 +6,13 @@ import {
   useState,
   createContext,
 } from "react";
-import { getCurrentUser, refreshSession } from "../api/authApi";
+import { deleteSession, getCurrentUser, refreshSession } from "../api/authApi";
 import type { AccountUser } from "../api/authApi";
 import { assertStaffToken } from "../utils/authorization";
 import { Center, Spinner, Text, VStack } from "@chakra-ui/react";
 import { Navigate, useLocation } from "react-router-dom";
 import { toast } from "react-hot-toast";
+import { setAccessToken } from "../accessToken";
 
 interface IUserContext {
   login: (token: string) => Promise<AccountUser>;
@@ -37,21 +38,22 @@ export function AuthProvider({ children }: IAuthProviderProps) {
   const [user, setUser] = useState<AccountUser | null>(null);
 
   const logout = useCallback(() => {
-    localStorage.removeItem("auth-token");
+    setAccessToken(null);
     setIsAuthenticated(false);
     setUser(null);
+    void deleteSession().catch(() => undefined);
   }, []);
 
   const login = useCallback(async (token: string) => {
     try {
-      localStorage.setItem("auth-token", token);
+      setAccessToken(token);
       assertStaffToken(token);
       const user = await getCurrentUser();
       setIsAuthenticated(true);
       setUser(user);
       return user;
     } catch (err) {
-      localStorage.removeItem("auth-token");
+      setAccessToken(null);
       throw err;
     }
   }, []);
@@ -67,15 +69,10 @@ export function AuthProvider({ children }: IAuthProviderProps) {
 
   useEffect(() => {
     const handler = async () => {
-      const token = localStorage.getItem("auth-token");
-      if (!token) {
-        setLoading(false);
-        return;
-      }
       try {
         const tokenResponse = await refreshSession();
         assertStaffToken(tokenResponse.access_token);
-        localStorage.setItem("auth-token", tokenResponse.access_token);
+        setAccessToken(tokenResponse.access_token);
         const currentUser = await getCurrentUser();
         setUser(currentUser);
         setLoading(false);
@@ -87,8 +84,9 @@ export function AuthProvider({ children }: IAuthProviderProps) {
       }
     };
     let timer: number;
+    localStorage.removeItem("auth-token");
     handler().then(() => {
-      timer = window.setInterval(handler, 30000);
+      timer = window.setInterval(handler, 10 * 60 * 1000);
     });
 
     return () => {