support unique csrftoken per env (#382)

* support unique csrftoken per env

* fix missing param

Author: rstijerina

react/src/AppRouter.tsx

@@ -47,9 +47,9 @@ const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
 const basePath = getBasePath();
 
 const rootLoader = (queryClient: QueryClient) => async () => {
-  const { geoapiUrl } = computeAppConfiguration(basePath);
+  const { geoapiUrl, geoapiEnv } = computeAppConfiguration(basePath);
   const data = await queryClient.ensureQueryData(
-    getAuthenticatedUserQuery(geoapiUrl)
+    getAuthenticatedUserQuery(geoapiUrl, geoapiEnv)
   );
   return data;
 };

react/src/hooks/user/useAuthenticatedUser.ts

@@ -2,16 +2,16 @@ import { AxiosError } from 'axios';
 import { isTokenValid } from '@hazmapper/utils/authUtils';
 import { useSuspenseQuery, queryOptions } from '@tanstack/react-query';
 import { getApiClient } from '@hazmapper/requests';
-import { AuthState, AuthToken } from '@hazmapper/types';
+import { AuthState, AuthToken, ApiService } from '@hazmapper/types';
 import { useAppConfiguration } from '@hazmapper/hooks';
 
 export type TAuthenticatedUserResponse = {
   username: string | null;
   authToken: AuthToken | null;
 };
 
-async function getAuthenticatedUser(baseUrl: string) {
-  const apiClient = getApiClient();
+async function getAuthenticatedUser(baseUrl: string, geoapiEnv: string) {
+  const apiClient = getApiClient(ApiService.Geoapi, geoapiEnv);
   const endpoint = `${baseUrl}/auth/user/`;
   try {
     const res = await apiClient.get<TAuthenticatedUserResponse>(endpoint);
@@ -25,10 +25,10 @@ async function getAuthenticatedUser(baseUrl: string) {
   }
 }
 
-export const getAuthenticatedUserQuery = (baseUrl: string) =>
+export const getAuthenticatedUserQuery = (baseUrl: string, geoapiEnv: string) =>
   queryOptions({
     queryKey: ['authenticated-user'],
-    queryFn: () => getAuthenticatedUser(baseUrl),
+    queryFn: () => getAuthenticatedUser(baseUrl, geoapiEnv),
     staleTime: 1000 * 60 * 60 * 4 - 1000 * 60 * 5, // 3hrs 55 minutes stale time
     refetchInterval: 1000 * 60 * 30, // Refetch every 30 minutes
     refetchIntervalInBackground: true,
@@ -44,8 +44,8 @@ export const getAuthenticatedUserQuery = (baseUrl: string) =>
   });
 
 function useAuthenticatedUser() {
-  const { geoapiUrl } = useAppConfiguration();
-  return useSuspenseQuery(getAuthenticatedUserQuery(geoapiUrl));
+  const { geoapiUrl, geoapiEnv } = useAppConfiguration();
+  return useSuspenseQuery(getAuthenticatedUserQuery(geoapiUrl, geoapiEnv));
 }
 
 export default useAuthenticatedUser;

react/src/requests.ts

@@ -20,14 +20,17 @@ import {
 import { ApiService, AppConfiguration, AuthToken } from '@hazmapper/types';
 import { HASHED_SESSION } from '@hazmapper/utils/requestUtils';
 
-export const getApiClient = (apiService: ApiService = ApiService.Geoapi) => {
+export const getApiClient = (
+  apiService: ApiService = ApiService.Geoapi,
+  geoapiEnv: string
+) => {
   const axiosConfig = {
     timeout: 60 * 1000, // 1 minute
   };
   if (apiService === ApiService.Geoapi) {
     Object.assign(axiosConfig, {
-      xsrfCookieName: 'csrftoken',
-      xsrfHeaderName: 'x-csrftoken',
+      xsrfCookieName: `csrftoken-${geoapiEnv}`,
+      xsrfHeaderName: `x-csrftoken-${geoapiEnv}`,
       withCredentials: true, // Ensure cookies are sent with requests
       withXSRFToken: true,
     });
@@ -135,8 +138,8 @@ export function useGet<ResponseType, TransformedResponseType = ResponseType>({
   transform,
   prefetch,
 }: UseGetParams<ResponseType, TransformedResponseType>) {
-  const client = getApiClient(apiService);
   const configuration = useAppConfiguration();
+  const client = getApiClient(apiService, configuration.geoapiEnv);
   const { accessToken: mapillaryAuthToken } = useMapillaryToken();
 
   const isPublicRoute = useIsPublicProjectRoute();
@@ -186,8 +189,8 @@ export function usePost<RequestType, ResponseType>({
   options = {},
   apiService = ApiService.Geoapi,
 }: UsePostParams<RequestType, ResponseType>) {
-  const client = getApiClient(apiService);
   const configuration = useAppConfiguration();
+  const client = getApiClient(apiService, configuration.geoapiEnv);
 
   const baseUrl = getBaseApiUrl(apiService, configuration);
 
@@ -239,8 +242,8 @@ export function useDelete<ResponseType, Variables>({
   options = {},
   apiService = ApiService.Geoapi,
 }: UseDeleteParams<ResponseType, Variables>) {
-  const client = getApiClient(apiService);
   const configuration = useAppConfiguration();
+  const client = getApiClient(apiService, configuration.geoapiEnv);
 
   const baseUrl = getBaseApiUrl(apiService, configuration);
   const isTapisTokenRequest = usesTapisToken(apiService);
@@ -282,8 +285,8 @@ export function usePut<RequestType, ResponseType>({
   options = {},
   apiService = ApiService.Geoapi,
 }: UsePostParams<RequestType, ResponseType>) {
-  const client = getApiClient(apiService);
   const configuration = useAppConfiguration();
+  const client = getApiClient(apiService, configuration.geoapiEnv);
 
   const baseUrl = getBaseApiUrl(apiService, configuration);