Full-Stack React Projects - Second Edition

Adding auth in the frontend

As we 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 that's 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 the auth workflow from the React Router documentation, in the following sections, we will write helper methods to manage the auth state across the components, and also use a custom PrivateRoute component ...