Fix: Authentication bug and more

client/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.10.0"
+    "react-router-dom": "^6.11.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

client/src/Components/Login/Login.jsx

@@ -7,10 +7,12 @@ import {backendUrl} from "../../constants.js";
 const Login = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [UserMsg, setUserMsg] = useState('');
 
   return (
     <div id="login" className='flex-col'>
       <h1>Login</h1>
+      <p>{UserMsg}</p>
       <div className='signup-form'>
         <div className='subform'>
           <label htmlFor="email">Email: </label>
@@ -27,13 +29,17 @@ const Login = () => {
         <button type="submit" id="test" onClick={async (e) => {
           const response = await fetch(`${backendUrl}/login`, {
             method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
             body: JSON.stringify({
               email: email,
               password: password
             })
           });
 
           const json = await response.json();
+          setUserMsg(json.msg);
           localStorage.setItem("token", json.token);
         }}>Login</button>
       </div>

client/src/Components/Signup/Signup.jsx

@@ -5,10 +5,12 @@ import { backendUrl } from "../../constants.js";
 const Signup = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [UserMsg, setUserMsg] = useState("") ;
 
   return (
     <div id='signup' className='flex-col'>
       <h1>Signup</h1>
+      <p>{UserMsg}</p>
       <div className='signup-form'>
         <div className='subform'>
           <label htmlFor='email'>Email: </label>
@@ -36,16 +38,20 @@ const Signup = () => {
           type='submit'
           id='test'
           onClick={async (e) => {
+            // change backendUrl to localhost:3000 for development
             const response = await fetch(`${backendUrl}/signup`, {
               method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
               body: JSON.stringify({
                 email: email,
                 password: password,
               }),
             });
 
             const json = await response.json();
-            console.log(json);
+            setUserMsg(json.msg) ;
           }}
         >
           SIGNUP

client/src/Constants/Navbar/Navbar.jsx

@@ -1,26 +1,49 @@
-import React from 'react'
+import React, { useEffect , useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import './Navbar.css'
 
 const Navbar = () => {
+  const [Token, setToken] = useState(undefined); 
+  useEffect( () => {
+    const getToken = localStorage.token;
+    if (getToken !== undefined){
+      setToken(getToken) ;
+    }
+  }, [])
+
+  const clearLocalStorage = () => {
+    localStorage.clear() ;
+    setToken(undefined) ;
+  }  
   return (
     <div id='navbar-main' className='flex-row'>
-      <Link to={'/'}>
+      <a href={'/'}>
         <div className="logo-box flex-row"> 
           <img className='logo' src="https://user-images.githubusercontent.com/63964149/152531278-5e01909d-0c2e-412a-8acc-4a06863c244d.png" alt="logo" /> 
           <p>PeetCode</p>
         </div>
-      </Link>
+      </a>
       <div className="nav-options">
         <Link to={'/problemset/all/'} >Problems</Link>
       </div>
-      <div className="nav-options">
-        <Link to={'/signup'} >Signup</Link>
-      </div>
-      <div className="nav-options">
-        <Link to={'/login'} >Login</Link>
-      </div>
+
+      { (Token === undefined)? (
+        <>
+        <div className="nav-options">
+          <Link to={'/signup'} >Signup</Link>
+        </div>
+        <div className="nav-options">
+          <Link to={'/login'} >Login</Link>
+        </div>
+        </>
+      ) :
+      (
+        <div className="nav-options">
+          <Link onClick={clearLocalStorage} to={'/signup'} >Logout</Link>
+        </div>
+      )}
+
     </div>
   )
 }

client/src/constants.js

@@ -1 +1,4 @@
 export const backendUrl = "https://api.peetcode.com";
+
+// For development and testing
+// export const backendUrl = "http://localhost:3000";

server/index.js

@@ -208,7 +208,8 @@ app.post("/login", (req, res) => {
     JWT_SECRET
   );
 
-  return res.json({ token });
+  return res.json({ token , msg: "Successfully logged in" });
+
 });
 
 app.listen(port, () => {