fix: use exact cookie instead of regex match for mapswipe

Dockerfile

@@ -24,7 +24,7 @@ COPY . /code/
 
 ENV APP_GRAPHQL_ENDPOINT=http://localhost:8000/graphql/
 ENV APP_BACKEND_ENDPOINT=http://localhost:8000/
-ENV APP_ENVIRONMENT=development
+ENV APP_ENVIRONMENT=DEV
 ENV APP_SENTRY_DSN=temp
 ENV APP_GA_TRACKING_ID=temp
 ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql

app/Base/configs/apollo.ts

@@ -1,3 +1,4 @@
+import { Cookies } from 'react-cookie';
 import {
     ApolloClientOptions,
     ApolloLink as ApolloLinkFromClient,
@@ -7,22 +8,18 @@ import {
 } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
 
-function getCookie(): string | null {
-    const match = document.cookie.match(/(?:^|;\s*)(mapswipe[^=]*csrftoken)=([^;]+)/i);
-    return match ? decodeURIComponent(match[2]) : null;
-}
+const COOKIE_NAME = `MAPSWIPE-${import.meta.env.APP_ENVIRONMENT}-CSRFTOKEN`;
+
+const cookies = new Cookies();
 
 const GRAPHQL_ENDPOINT = import.meta.env.APP_GRAPHQL_ENDPOINT as string;
 
-const csrfMiddleware = setContext((_, { headers }) => {
-    const csrfToken = getCookie();
-    return {
-        headers: {
-            ...headers,
-            'X-CSRFToken': csrfToken ?? '',
-        },
-    };
-});
+const csrfMiddleware = setContext((_, { headers }) => ({
+    headers: {
+        ...headers,
+        'X-CSRFToken': cookies.get(COOKIE_NAME) ?? '',
+    },
+}));
 
 const link = csrfMiddleware.concat(
     new HttpLink({

app/Base/configs/googleAnalytics.ts

@@ -1,7 +1,7 @@
 import { InitializeOptions } from 'react-ga';
 
 export const trackingId = import.meta.env.APP_GA_TRACKING_ID;
-const isDev = import.meta.env.APP_ENVIRONMENT === 'development';
+const isDev = import.meta.env.APP_ENVIRONMENT === 'DEV';
 
 export const gaConfig: InitializeOptions = {
     debug: isDev,

docker-compose.yaml

@@ -8,7 +8,7 @@ services:
     environment:
       NODE_OPTIONS: --openssl-legacy-provider
       APP_TITLE: ${APP_TITLE:-Mapswipe Community Dashboard}
-      APP_ENVIRONMENT: ${APP_ENVIRONMENT:-development}
+      APP_ENVIRONMENT: ${APP_ENVIRONMENT:-DEV}
       APP_GRAPHQL_ENDPOINT: ${APP_GRAPHQL_ENDPOINT:-http://localhost:8000/graphql/}
       APP_BACKEND_ENDPOINT: ${APP_BACKEND_ENDPOINT:-http://localhost:8000/}
       APP_GRAPHQL_CODEGEN_ENDPOINT: ${GRAPHQL_CODEGEN_ENDPOINT:-./backend/schema.graphql}

env.ts

@@ -24,15 +24,15 @@ export default defineConfig({
         APP_ENVIRONMENT: (key: string, value: string) => {
             // NOTE: APP_ENVIRONMENT_PLACEHOLDER is meant to be used with image builds
             // The value will be later replaced with the actual value
-            const regex = /^production|staging|testing|ci|alpha-\d+|development|APP_ENVIRONMENT_PLACEHOLDER$/;
+            const regex = /^PROD|staging|testing|ci|alpha-\d+|ALPHA-\d+|DEV|APP_ENVIRONMENT_PLACEHOLDER$/;
             const valid = !!value && (value.match(regex) !== null);
             if (!valid) {
                 throw new Error(`Value for environment variable "${key}" must match regex "${regex}", instead received "${value}"`);
             }
             if (value === 'APP_ENVIRONMENT_PLACEHOLDER') {
                 console.warn(`Using ${value} for app environment. Make sure to not use this for builds without nginx-serve`);
             }
-            return value as ('production' | 'staging' | 'testing' | 'ci' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
+            return value as ('PROD' | 'staging' | 'testing' | 'ci' | `alpha-${number}` | 'DEV' | 'APP_ENVIRONMENT_PLACEHOLDER' | `ALPHA-${number}`);
         },
         APP_GA_TRACKING_ID: Schema.string.optional(),
         APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string(),

package.json

@@ -44,6 +44,7 @@
         "leaflet.heat": "^0.2.0",
         "react": "^18.2.0",
         "react-calendar-heatmap": "^1.9.0",
+        "react-cookie": "^8.0.1",
         "react-dom": "^18.3.1",
         "react-ga": "^3.3.1",
         "react-icons": "^5.5.0",