This week we started to integrate the frontend and backend of the issue tracker that my team is building for our capstone project. We made some changes to our original architecture design, but I think it is for the better. We also started building the user authorization/authentication functionality. This post will provide a general update on the above.
First, let’s talk about the frontend and backend integration. Originally, we planned to host the frontend and backend on separate servers. We would then have the frontend call backend endpoints, which would make queries to our database. When we tried this approach in production, we experienced cross origin resource restrictions (if you recall from last week). What this means is that browsers today will restrict a web app from accessing resources from a web app that is served under a different domain (for security purposes). So, we decided to consolidate our frontend and backend and deploy it under one server. This approach proved to be successful, as we know have the frontend serving static webpages, while the backend runs as a live web app–all on one server.
Let’s now move onto the authorization/authentication functionality. This effort took a few days and, fortunately for me, one of my teammates took on this work. My teammate leveraged the passport.js authentication middleware to build the authentication/authorization flow for the user login. This required some refactoring with the code that I built to connect the backend to the database, which required a unix socket connection. Specifically, we had to reconfigure the way our environment variables were being accessed by the backend. And, on the database side, we had to create a new table to manage the user sessions.
The end result is that the frontend and backend are integrated, and served under one domain. Additionally, the authentication/authorization functionality is setup, and we now have user sessions that will maintain a user’s login status.
All in all, this was a productive week. The next steps are to get the cookies setup (during login), so we can use them to build our remaining endpoints. More to come next week!