For the last 4 days, I have taken 2 days off and the rest 2 days I have working on design of Profile section of frontend and Integrating the Frontend with Backend.
For the profile section, I took inspiration from the Github UI and provided the following functionalities :
- Update Profile Photo(🚨 This needs to be added to the backend)
- Update Password and Name
- Email Verification (This also needs to be added to backend)
The Lynks created by the users can also be viewed along with the number of clicks on each lynk :
This is one the most important part of the development process. The steps that I followed are explained in this 👉 Youtube Video 🧠
I have connected the login functionality so far. The login process works as follows :
There are a few important configurations that need to be done for a secure cookie storage. Also, we need to configure the CORS policy.
app.use(cors({
credentials : true,
origin : "http://localhost:5173"
}));The origin specifies the base URLs to be allowed to access the resources.
Cookies, just like any other client resource can be accessed by any external JS Scripts. This makes storing the JWT Tokens a potential issue.
document.cookies
-> {"lynkit-toke" : "3dvshr4hsggs-=3gsghfsnin94werfds"}This is not good for User Experience, since this will cause the user to login every time he/she closes their tab.
And since it is stored in session-storage, it can still be accessed by external script when the user logs in.
This is the recommended method, as this solves the above issue and the user does not get logged out everytime.
But how do we do this??
When a cookie is set with the httpOnly flag, it tells the browser that this cookie should not be accessible via client-side scripts. The browser enforces this by ensuring that the cookie is only sent to the server with HTTP requests and is not exposed to JavaScript running on the client side.
Important
httpOnly flag can be set on the server only while sending the cookies.
The code looks like this :
res.status(201).cookie("lynkit-token", token, {
httpOnly: true,
expires : new Date(new Date().getTime() + 30*24*60*60*1000)
}).json({
message: "Loggin Successful",
});I have set the expires property to be 30 days. This is also recommended for secure websites.
Once this is done, we also need to set credentials as true while sending requests from axios or fetch.
const { data, status } = await axios.post("http://localhost:3003/auth/login", body, {
headers: {
'Content-Type': 'application/json'
},
withCredentials: true,
});