components/Authentication/SignInForm.js

@@ -25,6 +25,8 @@ const SignInForm = () => {
     password: false,
   });
   const [loading, setLoading] = useState(false);
+  const [errMsg, setErrMsg] = useState("");
+
   const api = new Fetcher();
   const router = useRouter();
 
@@ -68,6 +70,12 @@ const SignInForm = () => {
 
       if (res.status === 204 || res.length === 0) {
         setErrorHandlers({ ...errorHandlers, email: true, password: true });
+        setErrMsg("Wrong Credentials");
+        setTimeout(() => {
+          setErrorHandlers({ ...errorHandlers, email: false, password: false });
+          setLoading(false);
+          setErrMsg("");
+        }, 1500);
       }
 
       // Store the token in cookies
@@ -239,8 +247,9 @@ const SignInForm = () => {
                     variant="contained"
                     loading={loading}
                     disabled={loading}
-                    // loadingPosition="end"
+                    loadingIndicator="Signing in…"
                     sx={{
+                      backgroundColor: "#4687BA",
                       textTransform: "capitalize",
                       borderRadius: "8px",
                       fontWeight: "500",
@@ -252,7 +261,9 @@ const SignInForm = () => {
                       },
                     }}
                   >
-                    <span>Sign In</span>
+                    <span>
+                      {loading ? "Signing in…" : errMsg ? errMsg : "Sign In"}
+                    </span>
                   </LoadingButton>
                 </Box>
               </Box>

middleware.js

@@ -9,21 +9,25 @@ const checkAuthentication = async () => {
 };
 
 const isTokenValid = () => {
+  if (typeof window === "undefined") {
+    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 === "cmc-token" && value) {
+    if (name.trim() === "cmc-token" && value) {
       return true; // The cmc-token cookie exists
     }
   }
 
-  return false; // The cmc-token cookie does not exist
+  return false;
 };
 
 export async function middleware(req) {
-  const token = isTokenValid()
+  const token = isTokenValid();
   // req.cookies["cmc-token"]; // Access the token from cookies
   const cookieList = cookies();
 
@@ -50,7 +54,7 @@ export async function middleware(req) {
     // Add authentication logic here (verify the token, etc.)
     // const isAuthenticated = verifyToken(token);
     const isAuthenticated = cookieList.has("cmc-token");
-    console.log(token)
+    console.log(token);
 
     if (!isAuthenticated) {
       // Handle unauthenticated users

middlewares/AuthRoute.js

@@ -2,6 +2,7 @@
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 
+
 const AuthRoute = ({ children }) => {
   const router = useRouter();