React Authentication Course (How To)

In this course, you will learn how to implement the Basic Authentication scheme in a React application using an Express REST API.

What you'll learn

• What is Basic authentication?
• User registration, sign in and sign out
• Configure React Router to protect specific routes
• Preserve authentication state across page refreshes

Introducing the Authentication Project

In this stage, you will start by reviewing the fundamentals of Basic Authentication and previewing the finished project. Then you will set up and run the starter project and walk through its source code.

Chevron 5 steps

• What Is Authentication?

  4:02

• Preview the Project

  2:16

• Reviewing the Project Files

  5:42

• Introducing the Authentication Project Recap

  1:39

• Introducing Authentication Review

  5 questions

Implementing Basic Authentication

Now that you have the React application and Express server up and running, you will start by writing the user registration and login functionality with Basic Authentication. Then you'll display custom content to users by providing the authenticated user state to components.

Chevron 7 steps

• Stage 2 Walk-Through

  1:43

• Set Up User Registration

  10:42

• Set Up Basic Authentication

  8:55

• Provide authUser to Entire App with Context

  9:35

• Display Authenticated User in Multiple Components

  10:35

• Implementing Basic Authentication Recap

  1:19

• Implementing Basic Authentication Review

  5 questions

React Router, Authorization, and Refactoring

In this stage, you will configure React Router to protect private routes, incorporate smart redirecting, learn to preserve a user's authenticated state across page refreshes, and refactor our code to minimize duplicate code.

Chevron 9 steps

• Stage 3 Walk-Through

  1:41

• Protect Routes That Require Authentication

  5:47

• Smart Redirecting

  6:01

• Preserve the User State with Cookies

  6:27

• Practice Cookie Manipulation

  6:38

• Refactoring: ErrorDisplay Component

  4:31

• Refactoring: api Helper Function

  9:42

• React Router, Authorization, and Refactoring Recap

  3:16

• React Router, Authorization, and Refactoring Review

  5 questions