fix csrf

components/landing/banner-new.tsx

@@ -222,7 +222,7 @@ export default function BannerHumasNew() {
         className="flex w-full h-[45vh] lg:h-[93vh] transition-transform duration-700 ease-in-out"
         style={{ transform: `translateX(-${currentIndex * 100}%)` }}
       >
-        {jumbotronList.map((img, index) => (
+        {jumbotronList?.map((img, index) => (
           <Link
             href={img?.redirectLink}
             key={img?.id}

service/http-config/axios-base-service.ts

@@ -1,9 +1,23 @@
+import axiosInterceptorInstance from "@/services/http-config/axios-interceptor-instance";
+import { getCsrfToken } from "../master-user";
 import axiosBaseInstance from "./http-base-service";
 import mediahubBaseInstance from "./mediahub-base-service";
 
 export async function httpPost(pathUrl: any, headers: any, data?: any) {
+  const resCsrf = await getCsrfToken();
+  const csrfToken = resCsrf?.data?.csrf_token;
+
+  const defaultHeaders = {
+    "Content-Type": "application/json",
+  };
+  const mergedHeaders = {
+    ...defaultHeaders,
+    ...headers,
+    ...(csrfToken ? { "X-CSRF-TOKEN": csrfToken } : {}),
+  };
+
   const response = await axiosBaseInstance
-    .post(pathUrl, data, { headers })
+    .post(pathUrl, data, { headers: mergedHeaders })
     .catch(function (error: any) {
       console.log(error);
       return error.response;
@@ -25,7 +39,7 @@ export async function httpPost(pathUrl: any, headers: any, data?: any) {
 }
 
 export async function httpGet(pathUrl: any, headers: any) {
-  const response = await axiosBaseInstance
+  const response = await axiosInterceptorInstance
     .get(pathUrl, { headers })
     .catch(function (error: any) {
       console.log(error);
@@ -48,8 +62,20 @@ export async function httpGet(pathUrl: any, headers: any) {
 }
 
 export async function httpPut(pathUrl: any, headers: any, data?: any) {
+  const resCsrf = await getCsrfToken();
+  const csrfToken = resCsrf?.data?.csrf_token;
+
+  const defaultHeaders = {
+    "Content-Type": "application/json",
+  };
+  const mergedHeaders = {
+    ...defaultHeaders,
+    ...headers,
+    ...(csrfToken ? { "X-CSRF-TOKEN": csrfToken } : {}),
+  };
+
   const response = await axiosBaseInstance
-    .put(pathUrl, data, { headers })
+    .put(pathUrl, data, { headers: mergedHeaders })
     .catch(function (error: any) {
       console.log(error);
       return error.response;
@@ -71,8 +97,20 @@ export async function httpPut(pathUrl: any, headers: any, data?: any) {
 }
 
 export async function httpDeleteInterceptor(pathUrl: any, headers: any) {
+  const resCsrf = await getCsrfToken();
+  const csrfToken = resCsrf?.data?.csrf_token;
+
+  const defaultHeaders = {
+    "Content-Type": "application/json",
+  };
+  const mergedHeaders = {
+    ...defaultHeaders,
+    ...headers,
+    ...(csrfToken ? { "X-CSRF-TOKEN": csrfToken } : {}),
+  };
+
   const response = await axiosBaseInstance
-    .delete(pathUrl, headers)
+    .delete(pathUrl, { headers: mergedHeaders })
     .catch((error) => error.response);
   console.log("Response interceptor : ", response);
   if (response?.status == 200 || response?.status == 201) {

service/http-config/axios-interceptor-service.ts

@@ -0,0 +1,71 @@
+import axios from "axios";
+import { postSignIn } from "../master-user";
+import Cookies from "js-cookie";
+
+const baseURL = "https://kontenhumas.com/api";
+
+const refreshToken = Cookies.get("refresh_token");
+
+const axiosInterceptorInstance = axios.create({
+  baseURL,
+  headers: {
+    "content-type": "application/json",
+  },
+  withCredentials: true,
+});
+
+// Request interceptor
+axiosInterceptorInstance.interceptors.request.use(
+  (config) => {
+    console.log("Config interceptor : ", config);
+    const accessToken = Cookies.get("access_token");
+    if (accessToken) {
+      if (config.headers)
+        config.headers.Authorization = "Bearer " + accessToken;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor
+axiosInterceptorInstance.interceptors.response.use(
+  (response) => {
+    console.log("Response interceptor : ", response);
+    return response;
+  },
+  async function (error) {
+    console.log("Error interceptor : ", error.response.status);
+    const originalRequest = error.config;
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      const data = {
+        grantType: "refresh_token",
+        refreshToken: refreshToken,
+        clientId: "mediahub-app",
+      };
+      console.log("refresh token ", data);
+      const res = await postSignIn(data);
+      if (res?.error) {
+        Object.keys(Cookies.get()).forEach((cookieName) => {
+          Cookies.remove(cookieName);
+        });
+      } else {
+        const { access_token } = res?.data;
+        const { refresh_token } = res?.data;
+        if (access_token) {
+          Cookies.set("access_token", access_token);
+          Cookies.set("refresh_token", refresh_token);
+        }
+      }
+
+      return axiosInterceptorInstance(originalRequest);
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInterceptorInstance;

service/http-config/http-base-service.ts

@@ -7,6 +7,7 @@ const axiosBaseInstance = axios.create({
   headers: {
     "content-type": "application/json",
   },
+  withCredentials: true,
 });
 
 export default axiosBaseInstance;

service/master-user.ts

@@ -1,3 +1,4 @@
+import axiosInterceptorInstance from "@/services/http-config/axios-interceptor-instance";
 import {
   httpDeleteInterceptor,
   httpGet,
@@ -5,6 +6,7 @@ import {
   httpPut,
 } from "./http-config/axios-base-service";
 import Cookies from "js-cookie";
+import axiosBaseInstance from "./http-config/http-base-service";
 
 const token = Cookies.get("access_token");
 const id = Cookies.get("uie");
@@ -61,6 +63,7 @@ export async function deleteMasterUser(id: string) {
 
 export async function postSignIn(data: any) {
   const headers = {
+    accept: "application/json",
     "content-type": "application/json",
   };
   const pathUrl = `/users/login`;
@@ -160,3 +163,34 @@ export async function deleteArticleComment(id: number) {
   };
   return await httpDeleteInterceptor(`/article-comments/${id}`, headers);
 }
+
+export async function getCsrfToken() {
+  const pathUrl = "csrf-token";
+  const headers = {
+    "content-type": "application/json",
+  };
+  return httpGetTemp(pathUrl, headers);
+}
+
+async function httpGetTemp(pathUrl: any, headers: any) {
+  const response = await axiosBaseInstance
+    .get(pathUrl, { headers })
+    .catch(function (error: any) {
+      console.log(error);
+      return error.response;
+    });
+  console.log("Response base svc : ", response);
+  if (response?.status == 200 || response?.status == 201) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  } else {
+    return {
+      error: true,
+      message: response?.data?.message || response?.data || null,
+      data: null,
+    };
+  }
+}

services/http-config/axios-interceptor-instance.ts

@@ -1,9 +1,6 @@
 import axios from "axios";
-import Cookies from "js-cookie";
 
-const baseURL = "http://38.47.180.165:8802";
+const baseURL = "https://kontenhumas.com/api";
-
-const refreshToken = Cookies.get("refresh_token");
 
 const axiosInterceptorInstance = axios.create({
   baseURL,
@@ -12,22 +9,4 @@ const axiosInterceptorInstance = axios.create({
   },
 });
 
-// Request interceptor
-axiosInterceptorInstance.interceptors.request.use(
-  (config) => {
-    const accessToken = Cookies.get("access_token");
-    if (accessToken) {
-      if (config.headers)
-        config.headers.Authorization = "Bearer " + accessToken;
-    }
-    return config;
-  },
-  (error) => {
-    return Promise.reject(error);
-  },
-);
-
-// Response interceptor
-
-
 export default axiosInterceptorInstance;