Auth in the frontend

As discussed in the previous chapter, implementing authentication with JWT relinquishes responsibility to the client side to manage and store user auth state. To this end, we need to write code that will allow the client-side to store the JWT received from the server on successful sign-in, make it available when accessing protected routes, delete or invalidate the token when the user signs out, and also restrict access to views and components on the frontend based on the user auth state.

Using examples of auth workflow from the React Router documentation, we will write helper methods to manage auth state across the components, and also use a custom PrivateRoute component to add protected routes to the frontend.