Users could not access the login functionality, so we could not have Private endpoints that only authenticated users could access. Also, the React frontend had no way of keeping track of a token once it received one from the server.
Solution
Using the React Context API and localStorage, we can keep track of a token on the client side for authentication. The entire App is wrapped in an AuthContext Provider that is tied to states for the App component. Any child component can modify the state, which then modifies the context. Once the context is modified, the token is kept in localStorage and is refreshed anytime the App component refreshes. This way, upon page refresh or even browser restart, the token is still available.
Testing
This was tested by making the Dashboard and Todo pages private. Then, I could only access those pages after logging in. If I was not logged in, I would be redirected to the login page.
Notes
This does not add support for user registration, but the infrastructure is now in place. Also, the login form looks terrible, but it does the trick. I'd like to get this part approved first, then in a separate PR, I can make the form nicer and add a registration form to go along with it.
Problem
Users could not access the login functionality, so we could not have Private endpoints that only authenticated users could access. Also, the React frontend had no way of keeping track of a token once it received one from the server.
Solution
Using the React Context API and
localStorage, we can keep track of a token on the client side for authentication. The entire App is wrapped in an AuthContext Provider that is tied to states for the App component. Any child component can modify the state, which then modifies the context. Once the context is modified, the token is kept in localStorage and is refreshed anytime the App component refreshes. This way, upon page refresh or even browser restart, the token is still available.Testing
This was tested by making the Dashboard and Todo pages private. Then, I could only access those pages after logging in. If I was not logged in, I would be redirected to the login page.
Notes
This does not add support for user registration, but the infrastructure is now in place. Also, the login form looks terrible, but it does the trick. I'd like to get this part approved first, then in a separate PR, I can make the form nicer and add a registration form to go along with it.
Closes #27