feat: update CSRF Security on Login and API

app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx

@@ -35,7 +35,7 @@ const imageSchema = z.object({
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
-const page = (props: { states?: any }) => {
+const page = (props: { states?: string }) => {
   const { states } = props;
   const MySwal = withReactContent(Swal);
   const router = useRouter();

components/landing-page/hero.tsx

@@ -15,6 +15,24 @@ const Hero: React.FC = () => {
 
   const [heroData, setHeroData] = useState<any>();
   useEffect(() => {
+    async function fetchCategories() {
+      const url = 'https://netidhub.com/api/csrf';
+      
+      try {
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        return data;  // Menampilkan data yang diterima dari API
+      } catch (error) {
+        console.error('Fetch error: ', error);
+      }
+    }
+
+    fetchCategories();
     initFetch();
   }, []);
   const initFetch = async () => {

components/partials/auth/login-form.tsx

@@ -11,7 +11,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { cn, setCookiesEncrypt } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
-import { getProfile, login } from "@/service/auth";
+import { getCsrfToken, getProfile, login } from "@/service/auth";
 import { toast } from "sonner";
 import { Link, useRouter } from "@/components/navigation";
 import { warning } from "@/lib/swal";
@@ -49,12 +49,15 @@ const LoginForm = () => {
   // Fungsi submit form
   const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
     try {
+      // const response = null;
       const response = await login({
         ...data,
-        grant_type: "password",
+        grantType: "password",
-        client_id: "mediahub-app",
+        clientId: "mediahub-app",
       });
 
+      console.log("LOGIN: ", response);
+
       if (response?.error) {
         toast.error("Username / Password Tidak Sesuai");
       } else {
@@ -134,7 +137,6 @@ const LoginForm = () => {
           ) {
             if (profile?.data?.data?.userLevel?.id == 761 || profile?.data?.data?.userLevel?.parentLevelId == 761) {
               window.location.href = "/in/welcome";
-              // router.push('/admin/dashboard');
               Cookies.set("status", "login", {
                 expires: 1,
               });

service/auth.ts

@@ -1,6 +1,6 @@
 import qs from "qs";
 import { getAPIDummy } from "./http-config/axiosCustom";
-import { httpPost } from "./http-config/http-base-service";
+import { httpGet, httpPost } from "./http-config/http-base-service";
 import {
   httpGetInterceptor,
   httpGetInterceptorWithToken,
@@ -8,12 +8,66 @@ import {
 } from "./http-config/http-interceptor-service";
 
 export async function login(data: any) {
+  
+  const res = await getCsrfToken();
+  const csrfToken = res?.data?.token;
+
+
+  console.log("Token CSRF : ", csrfToken);
+  
   const pathUrl = "signin";
   const headers = {
-    'content-type': 'application/x-www-form-urlencoded',
+    'accept': 'application/json',
+    'content-type': 'application/json',
+    'X-XSRF-TOKEN': csrfToken
   };
-  return httpPost(pathUrl, headers, qs.stringify(data));
+  return httpPost(pathUrl, headers, data);
+}
 
+// export async function login(data: any, csrfToken: string) {
+//   const url = 'http://localhost:8080/mediahub/users/signin';
+//     try {
+//       const response = await fetch(url, {
+//         method: 'POST',
+//         credentials: 'include',
+//         headers: {
+//           'Content-Type': 'application/json',
+//           'X-XSRF-TOKEN': csrfToken || ''
+//         }
+//       });
+      
+//       if (!response.ok) {
+//         throw new Error(`HTTP error! status: ${response.status}`);
+//       }
+//       return response;  // Menampilkan data yang diterima dari API
+//     } catch (error) {
+//       console.error('Fetch error: ', error);
+//     }
+// }
+
+export async function getCsrfToken() {
+    const pathUrl = "csrf";
+    const headers = {
+      'content-type': 'application/json',
+    };
+    return httpGet(pathUrl, headers);
+  // const url = 'https://netidhub.com/api/csrf';
+  //   try {
+  //     const response = await fetch(url, {
+  //       method: 'GET',
+  //       credentials: 'include'
+  //     });
+      
+  //     if (!response.ok) {
+  //       throw new Error(`HTTP error! status: ${response.status}`);
+  //     }
+
+  //     const data = await response.json();
+  //     console.log("csrf : ", data);
+  //     return data;
+  //   } catch (error) {
+  //     console.error('Fetch error: ', error);
+  //   }
 }
 
 export async function getProfile(token: any) {

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

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

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

@@ -11,6 +11,7 @@ const axiosInterceptorInstance = axios.create({
   headers: {
     "content-type": "application/json",
   },
+  withCredentials: true,
 });
 
 // Request interceptor
@@ -39,9 +40,9 @@ axiosInterceptorInstance.interceptors.response.use(
     if (error.response.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
       const data = {
-        grant_type: "refresh_token",
+        grantType: "refresh_token",
-        refresh_token: refreshToken,
+        refreshToken: refreshToken,
-        client_id: "mediahub-app",
+        clientId: "mediahub-app",
       };
       console.log("refresh token ", data);
       const res = await login(data);