JavaScript Everywhere

Chapter 15. Web Authentication and State

My family and I recently moved. After filling out and signing several forms (my hand is still tired), we were handed the keys to the front door. Each time we come back home, we are able to use those keys to unlock the door and enter. I’m grateful that I don’t need to complete the form each time that I come home, but also appreciate having a lock so that we don’t have any unexpected guests.

Client-side web authentication works in much the same way. Our users will fill out a form and will be handed a key to the website, in the form of a password alongside a token stored in their browser. When they return to the site they will either be automatically authenticated with the token, or be able to sign back in using their password.

In this chapter, we’ll build out a web authentication system with our GraphQL API. To do this, we’ll be building forms, storing JWTs in the browser, sending tokens with each request, and keeping track of our application’s state.

Creating a Sign-up Form

To get started with our application’s client authentication, we can create a user sign-up React component. Before doing so, let’s map out how the component will work.

First, a user will navigate to the /signup route within our application. On this page they will be presented with a form where they can enter their email address, desired username, and password. Submitting the form will perform our API’s signUp mutation. If the mutation is successful, a new user account ...