refactor: store woo token in the cookie

Author: pooriaset

package.json

@@ -26,6 +26,7 @@
     "deepmerge": "^4.3.1",
     "graphql": "^16.8.1",
     "jotai": "^2.8.1",
+    "js-cookie": "^3.0.5",
     "material-ui-confirm": "^3.0.7",
     "next": "14.2.20",
     "next-auth": "^4.24.10",
@@ -52,6 +53,7 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@types/add": "^2",
     "@types/jest": "^29.5.12",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/graphql/clients/clientSideMakeClient.ts

@@ -6,93 +6,50 @@ import {
 } from '@apollo/experimental-nextjs-app-support/ssr';
 import { createErrorLink } from '../utils';
 import { PUBLIC_GATEWAY_URL } from '@/config/app';
+import Cookies from 'js-cookie';
 
-const SEVEN_DAYS = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
-const WOO_SESSION_KEY = 'woo-session';
+export const WOO_SESSION_KEY = 'woo-session';
 
 /**
- * Woo Session setter operation.
- * If we have a session token in localStorage, add it to the GraphQL request as a Session header.
- */
-export const wooSessionSetter = new ApolloLink((operation, forward) => {
-  /**
-   * If session data exist in local storage, set value as session header.
-   * Here we also delete the session if it is older than 7 days
-   */
-  const localStorageValue = localStorage.getItem(WOO_SESSION_KEY);
-  const sessionData = localStorageValue ? JSON.parse(localStorageValue) : null;
-
-  if (sessionData && sessionData.token && sessionData.createdTime) {
-    const { token, createdTime } = sessionData;
-
-    // Check if the token is older than 7 days
-    if (Date.now() - createdTime > SEVEN_DAYS) {
-      // If it is, delete it
-      localStorage.removeItem(WOO_SESSION_KEY);
-      localStorage.setItem('woocommerce-cart', JSON.stringify({}));
-    } else {
-      // If it's not, use the token
-      operation.setContext(() => ({
-        headers: {
-          'woocommerce-session': `Session ${token}`,
-        },
-      }));
-    }
-  }
-
-  return forward(operation);
-});
-
-/**
- * Woo Session updater operation.
- *
- * This catches the incoming session token and stores it in localStorage, for future GraphQL requests.
+ * Apollo Link to update the WooCommerce session token.
+ * This link captures the session token from the response headers and stores it in cookies.
  */
 export const wooSessionUpdater = new ApolloLink((operation, forward) =>
   forward(operation).map((response) => {
-    /**
-     * Check for session header and update session in local storage accordingly.
-     */
     const context = operation.getContext();
-    const {
-      response: { headers },
-    } = context;
-
-    const session = headers.get('woocommerce-session');
+    const session = context.response?.headers.get('woocommerce-session');
 
     if (session) {
-      if ('false' === session) {
-        // Remove session data if session destroyed.
-        localStorage.removeItem(WOO_SESSION_KEY);
-        // Update session new data if changed.
-      } else if (!localStorage.getItem(WOO_SESSION_KEY)) {
-        localStorage.setItem(
-          WOO_SESSION_KEY,
-          JSON.stringify({ token: session, createdTime: Date.now() }),
-        );
+      if (session === 'false') {
+        // Remove session data if the session is destroyed
+        Cookies.remove(WOO_SESSION_KEY);
+      } else if (!Cookies.get(WOO_SESSION_KEY)) {
+        // Store new session token if it doesn't exist
+        Cookies.set(WOO_SESSION_KEY, session, { expires: 7 });
       }
     }
 
     return response;
   }),
 );
 
+// Create an HTTP link for Apollo Client
 const httpLink = new HttpLink({
   uri: PUBLIC_GATEWAY_URL,
 });
 
+/**
+ * Function to create an Apollo Client instance with SSR support.
+ */
 export const makeClient = () => {
   return new NextSSRApolloClient({
     ssrMode: true,
     connectToDevTools: true,
     cache: new NextSSRInMemoryCache(),
     link: from([
-      wooSessionSetter,
       wooSessionUpdater,
       createErrorLink(),
-      new SSRMultipartLink({
-        stripDefer: true,
-      }),
+      new SSRMultipartLink({ stripDefer: true }),
       httpLink,
     ]),
   });

src/middleware.ts

@@ -4,6 +4,7 @@ import nextIntlMiddleware from 'next-intl/middleware';
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 import { PUBLIC_GATEWAY_URL, protectedRoutes } from './config/app';
+import { WOO_SESSION_KEY } from './graphql/clients/clientSideMakeClient';
 
 const intlMiddleware = (request: NextRequest) =>
   Promise.resolve(
@@ -19,6 +20,11 @@ async function middleware(request: NextRequestWithAuth) {
   const { pathname } = request.nextUrl;
   request.headers.set('x-pathname', pathname);
 
+  const wooToken = request.cookies.get(WOO_SESSION_KEY)?.value;
+  if (wooToken) {
+    request.headers.set('woocommerce-session', `Session ${wooToken}`);
+  }
+
   if (pathname.startsWith(PUBLIC_GATEWAY_URL)) {
     request.headers.delete('cookie');
 

yarn.lock

@@ -3101,6 +3101,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/js-cookie@npm:^3.0.6":
+  version: 3.0.6
+  resolution: "@types/js-cookie@npm:3.0.6"
+  checksum: 10c0/173afaf5ea9d86c22395b9d2a00b6adb0006dcfef165d6dcb0395cdc32f5a5dcf9c3c60f97194119963a15849b8f85121e1ae730b03e40bc0c29b84396ba22f9
+  languageName: node
+  linkType: hard
+
 "@types/js-yaml@npm:^4.0.0":
   version: 4.0.9
   resolution: "@types/js-yaml@npm:4.0.9"
@@ -7603,6 +7610,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-cookie@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "js-cookie@npm:3.0.5"
+  checksum: 10c0/04a0e560407b4489daac3a63e231d35f4e86f78bff9d792011391b49c59f721b513411cd75714c418049c8dc9750b20fcddad1ca5a2ca616c3aca4874cce5b3a
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -8515,6 +8529,7 @@ __metadata:
     "@persian-tools/persian-tools": "npm:^3.5.2"
     "@types/add": "npm:^2"
     "@types/jest": "npm:^29.5.12"
+    "@types/js-cookie": "npm:^3.0.6"
     "@types/node": "npm:^20"
     "@types/react": "npm:^18"
     "@types/react-dom": "npm:^18"
@@ -8534,6 +8549,7 @@ __metadata:
     husky: "npm:^9.0.11"
     jest: "npm:^29.7.0"
     jotai: "npm:^2.8.1"
+    js-cookie: "npm:^3.0.5"
     material-ui-confirm: "npm:^3.0.7"
     next: "npm:14.2.20"
     next-auth: "npm:^4.24.10"