MERN building ecommerce Challenges

 I am using MERN framework for building a simple yet a bit complex ecommerce app.

I will keep updating the below list for the technologies or libraries I will be requiring during making of this project

1.) The biggest challenge till now I face was how to make know the app that the user is logged in 

because when I used redux the state was becoming true after logged in but as I refresh the page the is Logged state in store gets reset bcoz of which my conditional rendering in react is changing 

for that I simply made a authCheck endpoint and called it inside the useEffect which solved my problem

2.) when I log in I get navigated to home page which works fine but if I go back then my login page is still exposed 

To solve this I just used the global logged in state and conditional render the login page 

3.) Since the redux is not able to persist the state after reload 

to know the user or admin is logged in 

we have several ways to solve this 

Local Storage

1.) storing the authToken in loaclstorage and using useEffect to check the token still exists in the loacl stoarge

Local storage is a persistent storage which data is availabe on all domains

2.) We can use the redux-persist library to remember the state 

3.) Web Socket and socket IO can be used (I need to learn more about it)

4.) Using jugaad to keep persisting the state throughout application

More about 4.) on Login the isAuth becomes true 

after then when i go to any route for eg user dashboard there is a useEffect which dispatch fetch product some function and also dispatch the isAuth state to be true becoz of which the state is always true

hence persisiting the state*****

4.) When i  try to set the option of select quantity of a product in the user dashboard then all the associated select statement of the products also get set.

5.) How to make the cart functionality

created a cart model which includes 

userId,

items Array which consists of each product details added to card

created a backend api for add , remove and fetch the cart

at frontend creatded  a async thunk for each add to cart , remove from cart and fetch the cart

and a slice of cart which has all the data.....

I have deployed my backend on different domain (backend.com) and my frontend on different domain(frontend.com)

Now we have manage the config for our cookie

for cross site domain cookie config should be

    res.cookie("jwt", authToken,

     {

      path: "/",

      httpOnly: true,

      sameSite: "None",

      secure: true,

      domain: "https://shopezy-mern-frontend.vercel.app/" //frontend domain

    }

  );

 res.clearCookie('jwt',

  {

     path: "/",

     httpOnly: true,

     sameSite: "none",

     secure: true,

     domain: "https://shopezy-mern-frontend.vercel.app/"

 }

);

Google is blocking the third party cookie reading and setting because of CSRF(cross site request forgery) 

when user req /login endpoint

The server stores the cred in db and sends a token inside the cookie as a response to the browser where it is stored

Now user req /cart endpoint (Now cookie is automatically send with the request )

The server first verifies the jwt token inside the cookie and then sends the cart json data to user as response.

Now if the backend cookie setting is sameSite none and no domain is mentioned cors is not configured then hacker.com can make request to backend.com/cart and pretend as a user

or if the backend cookie setting is sameSite none and domain is frontend.com and cors is also frontend

then CSRF attacks can still occur if attackers can trick users into visiting malicious webpages that make cross-origin requests to your backend. To mitigate this risk, additional protections such as CSRF tokens or Double Submit Cookie patterns should be implemented on the frontend to verify the origin of requests and prevent unauthorized actions.

stateful authentication : when user logs in session id associated with the user and stored in db (state of user) and sends the session id to the client browser where it can be stored in response, localstorage, session storage and cookie storage.

if it is cookie then user automatically send the session id in subsequent request where the server checks the session Id and maintains the state 

stateless authentication: when user logins in it provides the jwt token to the user it does not maintain any state about client whenever client request the token is sent where is validated by server based on token