changed route name to login

components/Authentication/ForgotPasswordForm.js

@@ -104,7 +104,7 @@ const ForgotPasswordForm = () => {
 
               <Box as="div" textAlign="center" mt="20px">
                 <Link
-                  href="/auth/sign-in/"
+                  href="/auth/login/"
                   className="primaryColor text-decoration-none"
                 >
                   <i className="ri-arrow-left-s-line"></i> Back to Sign in

components/Authentication/SignUpForm.js

@@ -45,7 +45,7 @@ const SignUpForm = () => {
               <Typography fontSize="15px" mb="30px">
                 Already have an account?{" "}
                 <Link
-                  href="/auth/sign-in/"
+                  href="/auth/login/"
                   className="primaryColor text-decoration-none"
                 >
                   Sign in

components/_App/Layout.js

@@ -20,8 +20,9 @@ const Layout = ({ children }) => {
 
   useEffect(() => {
     const authenticationPages = [
+      "/",
       "/auth",
-      "/auth/sign-in",
+      "/auth/login",
       "/auth/sign-up",
       "/auth/forgot-password",
       "/auth/lock-screen",
@@ -36,6 +37,9 @@ const Layout = ({ children }) => {
   console.log("isAuthenticationPage:", isAuthenticationPage, router.pathname);
 
   const title = isAuthenticationPage ? "CMC - auth" : "CMC - dashboard";
+  const mainWrapper = {
+    paddingLeft: typeof window !== "undefined" && isAuthenticationPage && "0"
+  }
 
   return (
     <>
@@ -46,9 +50,7 @@ const Layout = ({ children }) => {
 
       <div
         className={`main-wrapper-content ${active ? "active" : ""}`}
-        style={{
-          paddingLeft: isAuthenticationPage && "0",
-        }}
+        style={mainWrapper}
       >
         {!isAuthenticationPage && (
           <>

components/_App/LeftSidebar/SidebarData.js

@@ -450,7 +450,7 @@ export const SidebarData = [
   },
   {
     title: "Authentication",
-    path: "/auth/sign-in/",
+    path: "/auth/login/",
     icon: <LockIcon />,
     iconClosed: <KeyboardArrowRightIcon />,
     iconOpened: <KeyboardArrowDownIcon />,

middleware.js

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+
+const checkAuthentication = async () => {
+  // Replace this logic with your actual authentication check.
+  const isAuthenticated = false; // Check if the user is authenticated.
+  return isAuthenticated;
+};
+
+export async function middleware(req) {
+  const headers = new Headers(req.headers);
+  headers.set("X-XSS-Protection", "1; mode=block");
+  headers.set("X-Frame-Options", "SAMEORIGIN");
+  headers.set("Content-Security-Policy", "frame-ancestors 'same';");
+
+  const { origin, pathname } = req.nextUrl;
+
+  try {
+    const authenticated = await checkAuthentication();
+
+    if (pathname === "/auth/login" && authenticated) {
+      return NextResponse.redirect(new URL("/ecommerce"));
+    }
+
+    if (authenticationPages.includes(pathname) && !authenticated) {
+      return NextResponse.redirect(new URL("/auth/", origin));
+    }
+
+    return NextResponse.next();
+  } catch (error) {
+    console.error("Error during authentication check:", error);
+    return NextResponse.error();
+  }
+}
+
+export const config = {
+  matcher: "/",
+};
+
+const authenticationPages = [
+  "/",
+  "/auth",
+  "/auth/login",
+  "/auth/sign-up",
+  "/auth/forgot-password",
+  "/auth/lock-screen",
+  "/auth/confirm-mail",
+  "/auth/logout",
+];

middlewares/AuthRoute.js

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
 import { useRouter } from "next/router";
 
 /**
@@ -10,13 +10,12 @@ import { useRouter } from "next/router";
 const AuthRoute = ({ children }) => {
   const router = useRouter();
 
-  useEffect(() => {
-    const isAuthenticated = false; // In a real application, this would be determined based on the user's authentication status.
+  const isAuthenticated = false; // In a real application, this would be determined based on the user's authentication status.
 
-    if (!isAuthenticated) {
-      router.push("/auth/sign-in");
-    } 
-  }, [router]);
+  if (!isAuthenticated) {
+    router.push("/");
+    return null;
+  }
 
   return <>{children}</>;
 };

next.config.js

@@ -14,7 +14,7 @@ const nextConfig = {
   i18n: {
     locales: ['en', 'ar'],
     defaultLocale: 'en',
-  }
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -40,7 +40,8 @@
     "react-simple-maps": "^3.0.0",
     "react-tabs": "^6.0.0",
     "recharts": "^2.2.0",
-    "swiper": "^8.4.5"
+    "swiper": "^8.4.5",
+    "axios": "^0.24.0"
   },
   "devDependencies": {
     "sass": "^1.57.1"

pages/_document.js

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

pages/auth/login.js

@@ -1,5 +1,5 @@
 import SignInForm from "@/components/Authentication/SignInForm";
 
-export default function SignIn() {
+export default function Login() {
   return <SignInForm />;
 }

pages/index.js

@@ -1,87 +1,6 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Link from "next/link";
-import styles from "@/styles/PageTitle.module.css";
-import Features from "@/components/Dashboard/eCommerce/Features";
-import Ratings from "@/components/Dashboard/eCommerce/Ratings";
-import AudienceOverview from "@/components/Dashboard/eCommerce/AudienceOverview";
-import VisitsByDay from "@/components/Dashboard/eCommerce/VisitsByDay";
-import Impressions from "@/components/Dashboard/eCommerce/Impressions";
-import ActivityTimeline from "@/components/Dashboard/eCommerce/ActivityTimeline";
-import RevenuStatus from "@/components/Dashboard/eCommerce/RevenuStatus";
-import SalesByCountries from "@/components/Dashboard/eCommerce/SalesByCountries";
-import NewCustomers from "@/components/Dashboard/eCommerce/NewCustomers";
-import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
-import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
-import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingProducts";
-import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite";
+import SignInForm from "@/components/Authentication/SignInForm";
+import axios from "axios"
 
-function MainPage() {
-  return (
-    <>
-      {/* Page title */}
-      <div className={styles.pageTitle}>
-        <h1>eCommerce</h1>
-        <ul>
-          <li>
-            <Link href="/">Dashboard</Link>
-          </li>
-          <li>eCommerce</li>
-        </ul>
-      </div>
-      <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
-        <Grid item xs={12} md={12} lg={12} xl={8}>
-          {/* Features */}
-          <Features />
-          {/* AudienceOverview */}
-          <AudienceOverview />
-          <Grid container columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
-            <Grid item xs={12} md={8}>
-              {/* VisitsByDay */}
-              <VisitsByDay />
-            </Grid>
-            <Grid item xs={12} md={4}>
-              {/* Impressions */}
-              <Impressions />
-
-              {/* ActivityTimeline */}
-              <ActivityTimeline />
-            </Grid>
-            <Grid item xs={12} md={12}>
-              {/* RevenuStatus */}
-              <RevenuStatus />
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item xs={12} md={12} lg={12} xl={4}>
-          {/* Ratings */}
-          <Ratings />
-          {/* LiveVisitsOnOurSite */}
-          <LiveVisitsOnOurSite />
-          {/* SalesByLocations */}
-          <SalesByCountries />
-          {/* NewCustomers */}
-          <NewCustomers />
-        </Grid>
-      </Grid>
-      {/* Recent Orders */}
-      <RecentOrders />
-      <Grid
-        container
-        rowSpacing={1}
-        columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
-      >
-        <Grid item xs={12} md={12} lg={12} xl={8}>
-          {/* TeamMembersList */}
-          <TeamMembersList />
-        </Grid>
-        <Grid item xs={12} md={12} lg={12} xl={4}>
-          {/* BestSellingProducts */}
-          <BestSellingProducts />
-        </Grid>
-      </Grid>
-    </>
-  );
-}
-
-export default MainPage
+export default function SignIn() {
+  return <SignInForm />;
+}