In the last few weeks I have focused on completing Authentication for the front end and adding the feature to assign projects to users.

UserProject Entity

I added an entity to cover the many to many relationship with Users and Projects. A user can be a producer or editor, and in that case they might have many projects that they are working on at the same time. While a client might be 2 or more people who could have project(s) assigned to them as well. This gives the most flexibility to this crucial aspect of the app. Each assignment also carries with it a role. My thinking is that sometimes people wear different hats and while one person might be a producer on one project, they might also be an editor on another, or an editor for one project might end up being on a client team for another.

Entity Framework Core has many options for handling join tables, including some very convenient automation. All this flexibility is nice but also adds significant complexity. In the end, I chose the method that is least automated and allows for payload metadata for the assignment (start date, end date, and role). I used this article as a reference for working with join tables in entity framework core.

Front End Clean Up

I went through some of the pages that still showed mock data (Users) and implemented full CRUD in the react app for that. I also refactored my api service calls in my front end app to work better for scaling up as I add more endpoints to the API. For example, each controller get’s it’s own file in a directory and helper methods are in a utility file.

Authentication in the Front End (Server Side)

This was a bit of a head scratcher. I had the API sending and receiving JSON Web Tokens but I was unsure of the best way to store and use them in the React app. After some research, I decided to move forward with the more secure professional option using HTTP Only Cookies. This is entirely server based and naturally protected from front end. The JWT is saved in a cookie in the client’s browser (viewed in DevTools) and that cookie is automatically sent with api calls. Once I decided to do it this way, it was actually pretty simple to implement. Here are some articles on the server side implementation.

I also referenced these articles to help me understand how CodeMaze set up their JWT Auth. It felt like I jumped in to a series of tutorials at the end.

Authentication in the Front End (React)

I wasn’t sure how the app should use this server side cookie without making an API call to a secure endpoint and setting a boolean to indicate if the user was logged in or not. In the end I made an Auth Context to wrap the protected and unprotected pages which passed down this boolean variable and managed with React’s Context API. If the user is logged out then they are redirected to the login page based on this boolean which is based on the API call to the secure endpoint. I’m thinking for role based authorization, I will need to implement a similar approach to separate users who can make any change on the app versus users who are only able to control a specific project assigned to them. The boolean would be replaced with either “admin” or “user” strings.

User Project in the Front End

I implemented the user project entity in the front end with full CRUD implementation. As of now, the feature is constrained to using ids to create and update, rather than using something more easier like username and project name. Ideally, when creating a user project assignment there is a drop down to select users and a drop down to select projects. For now, you have to know the User ID and the Project ID to make the assignment.

Next Steps

I’ll need to round out the role based authorization, as well as utilizing User Project for it’s main purporse, to filter projects so that a regular user only sees projects assigned to them.

The next big step will be to create a new interface for the projects page that is a kanban / Trello style board. This will involve making some new entities in the server to reflect customizable stages of a project as well as learning and utilizing a drag ’n’ drop library for React. For now, I am going to focus on implementing the interface with mock data following a tutorial I found online on making a Trello clone in React, and hopefully that will also inform my decisions on the server side database implementation.

Educative.io: Create a Trello Clone with React

As far as impedimence to my progress, my confidence in React is a little shaky, especially compared .NET. I’m hoping to get some more tutorials and little projects done to remedy this through exposure. This is why I’m bumping up this Trello clone tutorial before implementing in my comfort zone with building .NET API endpoints.

For my reflection I think it’s important to note that this is a big project. Stepping away from it has a cost. I am glad to be back in to it. I don’t know why there wasn’t an end to end demo of setting up HTTP only cookies and JWT auth in Microsoft’s documentation. I sometimes think about writing an article or recording a video making a template .NET / React project with JWT Auth. I hope I have time to do something like that one day.