added login and signup

client/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+.env

client/package-lock.json

@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.2",
         "react-scripts": "^5.0.1",
         "socket.io-client": "^4.7.4",
         "web-vitals": "^2.1.4"
@@ -3362,6 +3363,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz",
+      "integrity": "sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15053,6 +15062,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz",
+      "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz",
+      "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.2",
+        "react-router": "6.22.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.2",
     "react-scripts": "^5.0.1",
     "socket.io-client": "^4.7.4",
     "web-vitals": "^2.1.4"

client/src/App.js

@@ -1,31 +1,31 @@
 import './App.css';
-import Chat from './components/Chat/Chat';
-import Contacts from './components/Contacts/Contacts';
-import { io } from "socket.io-client";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import ChatPage from './ChatPage';
+import LoginPage from './LoginPage';
+import SignupPage from './SignupPage';
+import PrivateRoutes from './PrivateRoutes';
 
 function App() {
-  // const socket = io("ws://localhost:3000");
-  
-  // socket.on("connect",()=>{
-  //   console.log("hi");
-  // })
 
-  fetch("http://localhost:3000/signin",{
-    method:"POST",
-    credentials:"include",
-    headers:{
-      "Content-Type":"Application/json",
-    },
-    body:JSON.stringify({
-      "username":"anuj",
-      "password":"123"
-    })
-  }).then(res=>res.json()).then(data=>console.log(data));
+  // console.log(process.env.REACT_APP_BACKEND_URL);
 
   return (
     <div className="App">
-      <Contacts />
-      <Chat />
+      <Router>
+        <Routes>
+          <Route element={<LoginPage />} path="/login" />
+          <Route element={<SignupPage />} path="/signup" />
+          <Route element={<ChatPage />} path="/" />
+          
+          {/* <Route element={<PrivateRoutes />}>
+            <Route element={<ChatPage />} path="/" />
+          </Route> */}
+        
+        </Routes>
+      </Router>
+
+
+
     </div>
   );
 }

client/src/ChatPage/ChatPage.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Chat from '../components/Chat/Chat';
+import Contacts from '../components/Contacts/Contacts';
+import { io } from "socket.io-client";
+
+function ChatPage() {
+  // fetch("http://localhost:3000/signin", {
+  //   method: "POST",
+  //   credentials: "include",
+  //   headers: {
+  //     "Content-Type": "Application/json",
+  //   },
+  //   body: JSON.stringify({
+  //     "username": "anuj",
+  //     "password": "123"
+  //   })
+  // }).then(res => res.json()).then(data => console.log(data));
+
+  const socket = io("ws://localhost:3000", {
+    withCredentials: true,
+  });
+
+  socket.on("connect", () => {
+    console.log("connected", socket.id);
+  })
+
+  socket.on("error", () => {
+    console.log("socket error");
+  })
+
+  // setInterval(()=>{
+  //   socket.emit("foobar","im alive")
+  // },2000);
+
+  return (
+    <>
+      <Contacts />
+      <Chat />
+    </>
+  );
+}
+
+export default ChatPage;

client/src/ChatPage/index.jsx

@@ -0,0 +1,3 @@
+import ChatPage from "./ChatPage";
+
+export default ChatPage;

client/src/LoginPage/LoginPage.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import styles from "./LoginPage.module.css";
+import { Link, redirect,useNavigate } from 'react-router-dom';
+
+function LoginPage() {
+    
+    const login_url = process.env.REACT_APP_BACKEND_URL + "/login";
+    const [errors, setErrors] = useState({});
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // console.log(e.target);
+
+        setErrors({});
+        const res = await fetch(login_url, {
+            method: "POST",
+            credentials: "include",
+            body: new FormData(e.target),
+        })
+
+        if (!res.ok) {
+            // setErrors(re)
+            const data = await res.json();
+            if ("error" in data) {
+                setErrors(data);
+            }
+            if ("field_error" in data) {
+                setErrors(data.field_error);
+            }
+        }
+        else {
+            // handle redirect to home page
+            console.log("success");
+            navigate("/");
+            
+        }
+
+    }
+
+
+    return (
+        <div id={styles.login_page}>
+            <form id={styles.login_form} onSubmit={handleSubmit}>
+                <h2>Login</h2>
+                {errors.error && (
+                    <p className={styles.error_msg}>{errors.error}</p>
+                )}
+                <div className={styles.input_box}>
+                    <label htmlFor="username">Username</label>
+                    <input type="text" name="username" id="username" />
+                    {errors.username && (
+                        <p className={styles.error_msg}>{errors.username[0]}</p>
+                    )}
+                </div>
+                <div className={styles.input_box}>
+                    <label htmlFor="username">Password</label>
+                    <input type="password" name="password" id="password" />
+                    {errors.password && (
+                        <p className={styles.error_msg}>{errors.password[0]}</p>
+                    )}
+                </div>
+
+                <input id={styles.submit_btn} type="submit" value="login" />
+            
+                <Link to="/signup" id={styles.redirect_link}>Create new account</Link>
+            </form>
+        </div>
+    )
+}
+
+export default LoginPage

client/src/LoginPage/LoginPage.module.css

@@ -0,0 +1,65 @@
+#login_page{
+    width:100%;
+    min-height:100vh;
+    display:flex;
+    flex-direction:column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+}
+#login_form{
+    display:flex;
+    flex-flow: column nowrap;
+    gap:1em;
+    padding:3em 2em;   
+    background-color: aliceblue;
+    border-radius: 10px;
+    border:1px solid rgb(156, 156, 156);
+}
+
+.input_box{
+    display:flex;
+    flex-direction: column;
+    gap:0.2em;
+    width:250px;
+}
+
+.input_box>input{
+    border-radius: 8px;
+    border:1px solid gray;
+    font-size:1em;
+    padding:0.3em;
+    
+    &:focus{
+        
+        outline:2px solid rgb(137, 137, 255);
+    }
+}
+
+#submit_btn{
+    padding:1em;
+    border-radius: 20px;
+    border:1px solid black;
+    background-color: greenyellow;
+    cursor:pointer;
+
+
+    &:hover{
+        /* opacity: 0.9; */
+        filter:saturate(1.2);
+    }
+}
+
+
+.error_msg{
+    font-size:0.8em;
+    color:red;
+}
+
+#redirect_link{
+    text-align: center;
+    color:rgb(90, 90, 90);
+    &:hover{
+        color:black;
+    }
+}

client/src/LoginPage/index.jsx

@@ -0,0 +1,3 @@
+import LoginPage from "./LoginPage";
+
+export default LoginPage;

client/src/PrivateRoutes.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {Outlet,Navigate} from "react-router-dom";
+
+function PrivateRoutes() {
+    const getAuthStatus = async ()=>{
+        
+        const res = await fetch(process.env.REACT_APP_BACKEND_URL+"/session",{
+            credentials:"include"
+        })
+
+        return res.ok;
+    }
+    
+    const isAuth = getAuthStatus();
+
+    if (isAuth === undefined) {
+        return <p>
+           Loading ...
+        </p>
+    }
+
+  return (
+    isAuth ? <Outlet/>:<Navigate to="/login" />
+  );
+}
+
+export default PrivateRoutes

client/src/SignupPage/SignupPage.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import styles from "./SignupPage.module.css";
+import { Link, useNavigate } from 'react-router-dom';
+
+function SignupPage() {
+    
+    const signup_url = process.env.REACT_APP_BACKEND_URL + "/signup";
+    const [errors, setErrors] = useState({});
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // console.log(e.target);
+
+        setErrors({});
+        const res = await fetch(signup_url, {
+            method: "POST",
+            credentials: "include",
+            body: new FormData(e.target),
+        })
+
+        if (!res.ok) {
+            // setErrors(re)
+            const data = await res.json();
+            if ("error" in data) {
+                setErrors(data);
+            }
+            if ("field_error" in data) {
+                setErrors(data.field_error);
+            }
+        }
+        else {
+            // handle redirect to home page
+            console.log("success");
+            navigate("/");
+        }
+
+    }
+
+
+    return (
+        <div id={styles.signup_page}>
+            <form id={styles.signup_form} onSubmit={handleSubmit}>
+                <h2>Signup</h2>
+                {errors.error && (
+                    <p className={styles.error_msg}>{errors.error}</p>
+                )}
+                <div className={styles.input_box}>
+                    <label htmlFor="name">Name</label>
+                    <input type="text" name="name" id="name" />
+                    {errors.name && (
+                        <p className={styles.error_msg}>{errors.name[0]}</p>
+                    )}
+                </div>
+                <div className={styles.input_box}>
+                    <label htmlFor="username">Username</label>
+                    <input type="text" name="username" id="username" />
+                    {errors.username && (
+                        <p className={styles.error_msg}>{errors.username[0]}</p>
+                    )}
+                </div>
+                <div className={styles.input_box}>
+                    <label htmlFor="username">Password</label>
+                    <input type="password" name="password" id="password" />
+                    {errors.password && (
+                        <p className={styles.error_msg}>{errors.password[0]}</p>
+                    )}
+                </div>
+                <div className={styles.input_box}>
+                    <label htmlFor="username">Confirm Password</label>
+                    <input type="password" name="confirm_password" id="confirm_password" />
+                    {errors.confirm_password && (
+                        <p className={styles.error_msg}>{errors.confirm_password[0]}</p>
+                    )}
+                </div>
+
+                <input id={styles.submit_btn} type="submit" value="login" />
+                <Link to="/login" id={styles.redirect_link}>Already have an account?</Link>
+            </form>
+        </div>
+    )
+}
+
+export default SignupPage

client/src/SignupPage/SignupPage.module.css

@@ -0,0 +1,65 @@
+#signup_page{
+    width:100%;
+    min-height:100vh;
+    display:flex;
+    flex-direction:column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+}
+#signup_form{
+    display:flex;
+    flex-flow: column nowrap;
+    gap:1em;
+    padding:3em 2em;   
+    background-color: aliceblue;
+    border-radius: 10px;
+    border:1px solid rgb(156, 156, 156);
+}
+
+.input_box{
+    display:flex;
+    flex-direction: column;
+    gap:0.2em;
+    width:250px;
+}
+
+.input_box>input{
+    border-radius: 8px;
+    border:1px solid gray;
+    font-size:1em;
+    padding:0.3em;
+    
+    &:focus{
+        
+        outline:2px solid rgb(137, 137, 255);
+    }
+}
+
+#submit_btn{
+    padding:1em;
+    border-radius: 20px;
+    border:1px solid black;
+    background-color: greenyellow;
+    cursor:pointer;
+
+
+    &:hover{
+        /* opacity: 0.9; */
+        filter:saturate(1.2);
+    }
+}
+
+
+.error_msg{
+    font-size:0.8em;
+    color:red;
+}
+
+#redirect_link{
+    text-align: center;
+    color:rgb(90, 90, 90);
+    &:hover{
+        color:black;
+    }
+}

client/src/SignupPage/index.jsx

@@ -0,0 +1,3 @@
+import SignupPage from "./SignupPage";
+
+export default SignupPage;

server/auth.ts

@@ -8,7 +8,7 @@ const db = getDB();
 const adapter = new BetterSqlite3Adapter(db,{user:"users",session:"sessions"});
 
 export const lucia = new Lucia(adapter, {
-    sessionExpiresIn:new TimeSpan(10000,"s"),
+    sessionExpiresIn:new TimeSpan(10000,"m"),
     sessionCookie: {
         // expires:false,
         attributes: {

server/index.ts

@@ -3,7 +3,7 @@ import bodyParser from "body-parser";
 import { getDB } from "./db.js";
 import { lucia } from "./auth.js";
 import { generateId, verifyRequestOrigin } from "lucia";
-import { signInSchema, signUpSchema } from "./schemas.js";
+import { loginSchema, signUpSchema } from "./schemas.js";
 import bcrypt from "bcrypt";
 import dotenv from "dotenv";
 import cors from "cors";
@@ -79,8 +79,8 @@ app.use(async (req, res, next) => {
   }
   res.locals.session = session;
   res.locals.user = user;
-  console.log(res.locals.session);
-  console.log(res.locals.user);
+  // console.log(res.locals.session);
+  // console.log(res.locals.user);
   return next();
 
 
@@ -91,8 +91,11 @@ app.use(async (req, res, next) => {
 //   res.send('Hello World!');
 // })
 
-app.get("/session",(req,res)=>{
-  return res.send(res.locals.user);
+app.get("/session", (req, res) => {
+  if(!res.locals.user){
+    res.status(403);
+  }
+  return res.status(200).send(res.locals.user);
 })
 app.post("/signup", async (req, res) => {
 
@@ -104,6 +107,16 @@ app.post("/signup", async (req, res) => {
   }
 
   var data = parsedData.data;
+  // check if password and confirm_password matchs
+  if(data.password!=data.confirm_password){
+    return res.status(403).json({
+      field_error:{
+        confirm_password:[
+          "password doesn't match"
+        ]
+      }
+    });
+  }
 
   // check if username is already used
   var row = db.prepare("select * from users where username=?").get(data.username);
@@ -140,10 +153,10 @@ app.post("/signup", async (req, res) => {
 
 })
 
-app.post("/signin", async (req, res) => {
+app.post("/login", async (req, res) => {
   console.log(req.body);
 
-  const parsedData = signInSchema.safeParse(req.body);
+  const parsedData = loginSchema.safeParse(req.body);
 
   if (!parsedData.success) {
     return res.status(403).json({
@@ -190,12 +203,31 @@ const io = new Server(server, {
   }
 });
 
+const isAuth = async (req, res, next) => {
+  const sessionId = lucia.readSessionCookie(req.headers.cookie ?? "");
+  // console.log(sessionId);
+
+  if (!sessionId) {
+    
+    return next(new Error("error"));
+  }
+  const { session, user } = await lucia.validateSession(sessionId);
+  if (!session) {
+    // return res.end();
+    return next(new Error("error"));
+  }
+  return next();
+};
+
+io.engine.use(isAuth);
+
+
 io.on("connection", (socket) => {
   console.log(`socket ${socket.id} connected`);
 
   // send an event to the client
   socket.emit("foo", "bar");
-
+  // socket.on("")
   socket.on("foobar", (data) => {
     // an event was received from the client
     console.log("received:" + data);

server/schemas.ts

@@ -4,8 +4,9 @@ export const signUpSchema = z.object({
     username: z.string().toLowerCase().min(1),
     name: z.string().toLowerCase().min(1),
     password: z.string().min(1),
+    confirm_password: z.string().min(1),
 });
-export const signInSchema = z.object({
+export const loginSchema = z.object({
     username: z.string().toLowerCase().min(1),
     password: z.string().min(1),
 });