Authenticating the users in React

In this section, you will go through a basic mechanism that will enable you to have a simple authentication flow on the client side. Everything will revolve around the JWT and the way you decide to handle it.

React.js is an unopinionated UI library. It provides numerous ways of implementing user authentication and authorization. Since your FastAPI backend implements JWT-based authentication, you have to decide how to deal with the JWT in React.

In this chapter, you are going to store it in memory, then in localStorage (an HTML5 simple web storage object in JavaScript that allows applications to store key-value pairs in a user’s web browser with no expiration date). This chapter will not cover cookie-based solutions, which tend to be the most robust and secure, as one such solution will be covered in the next chapter.

Each of these methods has its benefits and drawbacks, and it is very useful to get acquainted with them. Authentication...