For the capstone project, my team is working on a web application, Software Engineering Quiz, and my job is to implement user authentication workflow and the dashboard page fetching data from the servers built by other team members. One of the many challenges was finding a way to manage the data across the web pages and components. Once a user logged in to the website, we wanted to store the user data such as id, name, email address, and the status of authentication so we can use these for endpoints and show the components only visible to an allowed user. Since I wanted to practice React hook skills, I started looking at Context API, a built-in hook for state management. Context API provides a way to pass data through the component tree without having to pass props down manually at every level. However, I ran into a problem that every time the component fetching user’s data is rendered, the value for the status of authentication is refreshed and there was a moment in the cycle that the value was initialized to the default. Because adding more complex conditional statements wasn’t ideal, I researched the different ways to update the statuses so the app won’t need to care about it until the user logs out of the application.
There are three forms for doing that, cookies, local storage, and session storage. Local and session storages were introduced in HTML5 and have key-value pairs in the storage. The difference between them is the persistence of data. Data in local storage won’t be removed until the user manually delete it. However, the session storage will be automatically deleted once the tab or the window of the browser is closed. Local storage will fit the automatic login and session storage will fit the one-time login. With these storages, a user can’t set the expiration time to be terminated. A cookie can only store 4kb of data but can set the time to expire. To check if the user is authenticated, the cookie will be the best option because cookies are sent to the server every time with the request. And the server will check if the cookie is valid to access data. My next job would be to implement this authentication communication between multiple servers and a single client.
