feat: Update login workflow

Author: PintoGideon

src/api/chrisapiclient.ts

@@ -19,33 +19,58 @@ class ChrisAPIClient {
   static getClient(): Client {
     const cookie = new Cookies();
     const user = cookie.get("username");
-    const token: string = cookie.get(`${user}_token`);
 
-    // If client exists but token has changed, just update the auth token
-    if (ChrisAPIClient.client && token !== ChrisAPIClient.lastCreatedWith) {
-      // Update the token on the existing client
-      ChrisAPIClient.client.auth = token;
-      // Update the stored token
-      ChrisAPIClient.lastCreatedWith = token;
-      return ChrisAPIClient.client;
-    }
+    // Get token if username is available
+    const token = user ? cookie.get(`${user}_token`) : null;
 
-    // Create new client if it doesn't exist yet
+    // Case 1: No client exists yet, create a new one
     if (!ChrisAPIClient.client) {
       ChrisAPIClient.client = new Client(import.meta.env.VITE_CHRIS_UI_URL, {
-        token,
+        token: token || undefined,
       });
       ChrisAPIClient.lastCreatedWith = token;
+      return ChrisAPIClient.client;
     }
 
+    // Case 2: Client exists but no token is available (user logged out)
+    if (!token) {
+      // Reset client auth if it was previously authenticated
+      if (ChrisAPIClient.lastCreatedWith) {
+        ChrisAPIClient.client.auth = "";
+        ChrisAPIClient.lastCreatedWith = null;
+      }
+      return ChrisAPIClient.client;
+    }
+
+    // Case 3: Client exists and token is different from last time
+    if (token !== ChrisAPIClient.lastCreatedWith) {
+      ChrisAPIClient.client.auth = token;
+      ChrisAPIClient.lastCreatedWith = token;
+    }
+
+    return ChrisAPIClient.client;
+  }
+
+  /**
+   * Explicitly set the client with a new token
+   * Use this during login to ensure the client is properly configured
+   * @param token The authentication token
+   */
+  static setClientWithToken(token: string): Client {
+    // Always create a fresh client during explicit login
+    ChrisAPIClient.client = new Client(import.meta.env.VITE_CHRIS_UI_URL, {
+      token,
+    });
+    ChrisAPIClient.lastCreatedWith = token;
     return ChrisAPIClient.client;
   }
 
   /**
    * Reset the client instance (useful for testing or logout)
    */
   static resetClient(): void {
-    ChrisAPIClient.client = null;
+    // Instead of setting to null, create a new unauthenticated client
+    ChrisAPIClient.client = new Client(import.meta.env.VITE_CHRIS_UI_URL);
     ChrisAPIClient.lastCreatedWith = null;
   }
 }

src/components/Login/index.tsx

@@ -65,12 +65,17 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
           path: "/",
           maxAge: oneDayToSeconds,
         });
-        const client = ChrisAPIClient.getClient();
+
+        // Use the new method to ensure a fresh client is created with the correct token
+        const client = ChrisAPIClient.setClientWithToken(token);
+
         const user = await client.getUser();
         setCookie("isStaff", user.data.is_staff, {
           path: "/",
           maxAge: oneDayToSeconds,
         });
+
+        // Update Redux store after all cookies and client are set
         dispatch(
           setAuthTokenSuccess({
             token,

src/components/Wrapper/Toolbar.tsx

@@ -55,19 +55,28 @@ const ToolbarComponent: React.FC<ToolbarComponentProps> = (
   };
 
   const onLogout = () => {
+    // Store the current URL for redirect after login
+    const currentPath = location.pathname + location.search;
+
+    // Clear query cache first
     queryClient.clear();
+
+    // Remove all auth-related cookies with proper path
+    if (username) {
+      removeCookie(`${username}_token`, { path: "/" });
+    }
+    removeCookie("username", { path: "/" });
+    removeCookie("isStaff", { path: "/" });
+
+    // Reset API client after cookies are removed
     ChrisAPIClient.resetClient();
-    removeCookie("username", {
-      path: "/",
-    });
-    removeCookie(`${username}_token`, {
-      path: "/",
-    });
-    removeCookie("isStaff", {
-      path: "/",
-    });
+
+    // Update Redux state
     dispatch(clearCartOnLogout());
     dispatch(setLogoutSuccess());
+
+    // Redirect to login page with the return URL as a parameter
+    navigate(`/login?redirectTo=${encodeURIComponent(currentPath)}`);
   };
 
   const onDropdownToggle = () => {

src/store/user/userSlice.ts

@@ -11,17 +11,36 @@ export interface IUserState {
   isStaff?: boolean;
 }
 
-const cookie = new Cookies();
-const user = cookie.get("username");
-const token = cookie.get(`${user}_token`);
-const isStaff = cookie.get("isStaff");
+// Improved cookie retrieval function that handles potential inconsistencies
+const getAuthStateFromCookies = () => {
+  const cookie = new Cookies();
+  const username = cookie.get("username");
+
+  // Only attempt to get token if username exists
+  let token = null;
+  if (username) {
+    token = cookie.get(`${username}_token`);
+  }
+
+  const isStaff = cookie.get("isStaff");
+  const isLoggedIn = !!(username && token);
+
+  return {
+    username,
+    token,
+    isStaff: !!isStaff,
+    isLoggedIn,
+  };
+};
+
+const cookieState = getAuthStateFromCookies();
 
 const initialState: IUserState = {
-  username: user,
-  token: token,
+  username: cookieState.username,
+  token: cookieState.token,
   isRememberMe: false,
-  isLoggedIn: !!token,
-  isStaff: !!isStaff,
+  isLoggedIn: cookieState.isLoggedIn,
+  isStaff: cookieState.isStaff,
 };
 
 const userSlice = createSlice({