docs

<<<<<<< HEAD

Welcome to LinkUp

======= # Login Page

https://getlinkup.vercel.app/login

Login data flow

In the Login page of LinkUp the following logic is implemented.. When the user clicks on the login button. it takes the input value of email and password.

Problem #4
Here even if the fields are empty it still tries to send response to Backend
There is no Validator which confirms that value entered in email field is a valid email or not

There it emits a socket event

socket.emit("login-attempt", {
  email: emailinput,
  password: passwordinput,
});

And the Backend catches these values and sends the response accordingly

socket.on("login-attempt", async (userdata) => {
  const users = db.collection("users");
  const user = await users.findOne({ email: userdata.email });
  // Retrieving Users data from MongoDB

  if (!user) socket.emit("login-attempt-response", "WRONGEMAIL");
  // Response if there is email is wrong
  else if (user.email === userdata.email && user.password === userdata.password)
    socket.emit("login-attempt-response", "SUCCESSFULL");
  // Response if both email and password is correct
  else if (user.email === userdata.email && user.password !== userdata.password)
    socket.emit("login-attempt-response", "WRONGPASSWORD");
  // Response if email is correct but password is wrong
  else socket.emit("login-attempt-response", "UNSUCCESSFULL");
});
// Any other error

Now if the Frontend gets the response to be SUCCESSFULL it route to the /chat page

Problem #6
When the login is Successfull. Bbackend should send all the data of user to frontend, then react should store all the data into cookies and then route to /chat where the chatting page will receive all the data from cookies and display it according to the UI.

    flowchart TD
        A -- username,password --> SB
        SB --> T
        DB --> Backend
        subgraph Frontend
            A["Login Button"]
            T["Login Status"]
        end
        subgraph Backend
            SB["socket.on(userdata)"]
            SB -- findOne --> B
            B("users")
        end
        DB[("MongoDB")]

Loading

Google Authentication

The project is using useGoogleLogin from @react-oauth/google library for google authentication. In which OnSuccess we get the response and find the access_token from it then use it to fetch user data from googleapis and console.log the user details

Problem
When the google authentication is Successfull. It should send data to backend that user has logged in and send data to cookies and then navigate to chat page

Learnings

Connecting and calling socket.io

When i connected to socket.io, it is called multiple times in react due to which in the nodejs terminal a lot of connections are shown, so i connected it in a useEffect

useEffect(() => {
    const socket = io.connect("http://localhost:3001");
    return () => {  
            socket.disconnect();
        };
}, []);

But this code was causing a problem i wanted to send a socket event inside handlesubmit function, which was causing an error socket is not defined as the socket was defined in useEffect and it was inaccessible outside.

So i tried to define the handlesubmit function in the same useEffect, but due to that now this function is inaccessible to the Login button after searching i found the solution which is : creating a state

const [socket, setSocket] = useState("");
useEffect(() => {
    cost socket = io.connect("http://localhost:3001");
    setSocket(socket);
    return () => {
          socket.disconnect();
    };
}, []);

and now i was able to send socket events from anywhere in the page

this needs to be changes now

60b50fabf3f813794e59d64a01c71d6a2615d2b9