components/Authentication/SignInForm.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-// import { cookies } from "next/headers";
+import { setCookie } from 'cookies-next';
 import Link from "next/link";
 import Grid from "@mui/material/Grid";
 import LoadingButton from "@mui/lab/LoadingButton";
@@ -79,18 +79,18 @@ const SignInForm = () => {
       }
 
       // Store the token in cookies
-      // const cookieStore = cookies();
+       await setCookie("cmc-token", res.token);
-      // cookieStore.set("cmc-profile", { ...res.profile }, { secure: true });
+       router.push("/");
-      // cookieStore.set("cmc-token", res.token, { secure: true });
-      document.cookie = "cmc-token=" + res.token;
 
-      // setLoading(false);
-      router.push("/");
 
       console.log(res);
     } catch (error) {
       setLoading(false);
       console.log(error);
+    } finally {
+      setTimeout(() => {
+        setLoading(false);
+      }, 5000);
     }
   };
 

components/_App/Layout.js

@@ -34,7 +34,7 @@ const Layout = ({ children }) => {
   }, [router.pathname]);
 
   // Debugging: Log the value of isAuthenticationPage
-  console.log("isAuthenticationPage:", isAuthenticationPage, router.pathname);
+  // console.log("isAuthenticationPage:", isAuthenticationPage, router.pathname);
 
   const title = isAuthenticationPage ? "CMC - auth" : "CMC - dashboard";
   const mainWrapper = {

middleware.js

@@ -1,35 +1,10 @@
 import { NextResponse } from "next/server";
 import { cookies } from "next/headers";
 
-const checkAuthentication = async () => {
+import { getCookie, hasCookie } from "cookies-next";
-  const token = req.cookies["cmc-token"]; // Access the token from cookies
-  console.log("checking token", token);
-  const isAuthenticated = token ? true : false; // Check if the user is authenticated.
-  return isAuthenticated;
-};
 
-const isTokenValid = () => {
+export async function middleware(req, next) {
-  if (typeof window === "undefined") {
+  const token = getCookie("cmc-token", { req }); // Access the token from cookies
-    return false; // Don't execute this code on the server-side
-  }
-
-  const cookies = document.cookie.split("; "); // Get all cookies and split them into an array
-
-  for (const cookie of cookies) {
-    const [name, value] = cookie.split("="); // Split the cookie into its name and value
-
-    if (name.trim() === "cmc-token" && value) {
-      return true; // The cmc-token cookie exists
-    }
-  }
-
-  return false;
-};
-
-export async function middleware(req) {
-  const token = isTokenValid();
-  // req.cookies["cmc-token"]; // Access the token from cookies
-  const cookieList = cookies();
 
   const headers = new Headers(req.headers);
   headers.set("X-XSS-Protection", "1; mode=block");
@@ -38,13 +13,19 @@ export async function middleware(req) {
 
   const { origin, pathname } = req.nextUrl;
 
+  
   try {
-    if (pathname === "/auth/login" && token) {
+    console.log("Test path", pathname, origin);
+    if (token) {
       // Redirect to the home page if already authenticated
-      return NextResponse.redirect(new URL("/"), { status: 307 });
+      NextResponse.redirect(new URL("/"), { status: 201 });
+      next();
     }
 
-    if (!authenticationPages.includes(pathname) && !token) {
+    if (
+      !authenticationPages.includes(pathname) ||
+      (authenticationPages.includes(pathname) && !token)
+    ) {
       // Redirect to the login page if not authenticated
       return NextResponse.redirect(new URL("/auth/login", origin), {
         status: 307,
@@ -53,15 +34,14 @@ export async function middleware(req) {
 
     // Add authentication logic here (verify the token, etc.)
     // const isAuthenticated = verifyToken(token);
-    const isAuthenticated = cookieList.has("cmc-token");
+    // const isAuthenticated = hasCookie("cmc-token", { req });
-    console.log(token);
 
-    if (!isAuthenticated) {
+    // if (!isAuthenticated) {
-      // Handle unauthenticated users
+    //   // Handle unauthenticated users
-      return NextResponse.error(new Error("Authentication failed"), {
+    //  return NextResponse.error(new Error("Authentication failed"), {
-        status: 401,
+    //     status: 401,
-      });
+    //   });
-    }
+    // }
 
     // Continue with the request if authenticated
     return NextResponse.next();

middlewares/AuthRoute.js

@@ -11,13 +11,13 @@ const AuthRoute = ({ children }) => {
 
     const isAuthenticated = token ? true : false;
 
-    if (router.pathname === "/auth/login" && isAuthenticated) {
+    // if (router.pathname === "/auth/login" && isAuthenticated) {
-      router.push("/");
+    //   router.push("/");
-    }
+    // }
 
-    if (!authenticationPages.includes(router.pathname) && !isAuthenticated) {
+    // if (!authenticationPages.includes(router.pathname) && !isAuthenticated) {
-      router.push("/auth/login");
+    //   router.push("/auth/login");
-    }
+    // }
   }, []);
 
   return <>{children}</>;

package.json

@@ -41,7 +41,9 @@
     "react-tabs": "^6.0.0",
     "recharts": "^2.2.0",
     "swiper": "^8.4.5",
-    "axios": "^0.24.0"
+    "axios": "^0.24.0",
+    "cookies-next": "4.0.0"
+
   },
   "devDependencies": {
     "sass": "^1.57.1"

pages/_document.js

@@ -1,4 +1,3 @@
-import AuthRoute from "middlewares/AuthRoute";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 
 class MyDocument extends Document {

pages/index.js

@@ -17,7 +17,7 @@ import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingPro
 import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite";
 import AuthRoute from "middlewares/AuthRoute";
 
-function MainPage() {
+export default function MainPage() {
   return (
     <>
       {/* Page title */}
@@ -83,6 +83,4 @@ function MainPage() {
       </Grid>
     </>
   );
-}
+}
-
-export default MainPage