React Authentication in Depth

How to implement world 2 factor authentication (both email and TOTP) using React, React Router, and Amazon Cognito

To view Part 2, implementing React Router & TOTP, click here.

In this post, we’ll walk through how to implement real world user sign up and sign in with two factor authentication along with a routing and an authentication flow in a React web application.

When the user is logged out, we will protect certain routes from being accessed and redirect them to sign in, and allow access these protected routes only when a user is signed in. We also want to check on route change whether the user is still currently signed in, and if not redirect them to the sign in / sign up route.

The tools we will be using are Create React App, Glamor for styling, React Router for routing, Amazon Cognito for authentication, and AWS Amplify for interacting with AWS services.

This is part 1 of a 2 part series and follows a similar post I did on React Native Authentication that was very well received.

Part 1 will show how to set up the authentication provider and methods that will interact with our provider, signing up and signing in a user.

Part 2 will go into how to add React Router and implement a real world authentication flow, including protected…