Full Stack Serverless

Chapter 5. Custom Authentication Strategies

In this chapter, we will be building and improving the app we completed in Chapter 4, where you learned how to use the withAuthenticator HOC to create a preconfigured authentication form. You also learned how to use React Router and the Auth class to create public and protected routes based on the user’s signed-in state.

While this lays the foundation for what can be done with Amplify and the basics around authentication and routing, we want to go one step further and build a completely custom authentication flow so we know exactly what is going on under the hood and understand the logic and state needed to manage a custom authentication form. This means that we need to update our app to have custom forms for signing up, signing in, and resetting our password instead of using the withAuthenticator HOC.

We will also take the idea of protected routes one step further by creating a hook that we can reuse to wrap any component we are wanting to protect with authentication (instead of rewriting the logic in each component).

The Auth class, with over 30 different methods, is very powerful and allows you to handle all of the authentication logic that most applications demand. By the end of this chapter, you will understand how to use the Auth class and React state to build and manage a custom authentication form.

Creating the protectedRoute Hook

The first thing we will do is to create the custom protectedRoute hook that we will be using to ...