React: Authentication

Course details

User authentication is a critical part of virtually every website, yet few web developers know all the details behind how it works and how to use it to provide a good user experience. In this course, instructor Shaun Wassell dives into the details behind user authentication in the context of React and how to incorporate user authentication into React applications. Shaun begins with some definitions, steps, and basic authentication projects. Then he discusses in-depth email verification and how to set it up. Shaun explains how to give users the ability to reset their passwords, then describes the steps in setting up OAuth. He goes over several prebuilt authentication options, then concludes with some best practice recommendations.

Learning objectives
Build and integrate secure authentication systems in React applications using tools like JSON Web Tokens, OAuth, and AWS Cognito.
Create functional login, sign-up, password reset, and email verification pages, ensuring seamless user experiences.
Understand and implement security measures such as HTTPS/SSL, salting and peppering passwords, and handling authentication errors effectively.
Inspect and validate authentication flows, debug issues, and enhance the robustness of your applications.
Set up and configure third-party authentication services like Google OAuth and AWS Cognito and adapt your React applications accordingly.

Concepts

0. Introduction

01 - Secure authentication practices in React
02 - The structure of this course

1. User Authentication Basics

03 - What is user authentication
04 - Basic project setup
05 - Creating private React routes
06 - JSON Web Token basics
07 - Solution - Working with JSON Web Tokens
08 - Adding a sign-up route to the server
09 - Generating JSON Web Tokens
10 - Adding a log-in route to the server
11 - Adding JWTs to the front-end
12 - Parsing JWT data
13 - Adding JWTs to sign-up and log-in pages
14 - Adding JWTs to the user info page
15 - Adding an update user route
16 - Adding update functionality to the front-end
17 - State management for tokens
18 - Adding log-out functionality

2. Email Verification

19 - The basic email verification process
20 - Setting up an email provider
21 - Creating an email provider API key
22 - Sending emails from Node
23 - Integrating verification tokens
24 - Adding a please verify email page
25 - Adding a verify email route
26 - Creating a verification landing page

3. Resetting Passwords

27 - The basic password reset process
28 - Adding a forgot password page
29 - Sending a reset password email
30 - Creating a reset password landing page
31 - Adding a reset password server endpoint

4. OAuth

32 - OAuth basics
33 - Setting up OAuth on Google
34 - Adding an OAuth URL route
35 - Creating a sign-in with Google button
36 - Adding an OAuth callback route
37 - Loading user info from Google
38 - Creating new users from OAuth data
39 - Handling successful OAuth authentication

5. Prebuilt Auth Options

40 - Why prebuilt auth options
41 - Authentication with Auth0
42 - Authentication with Firebase
43 - Authentication with NextAuth.js
44 - Authentication with Clerk
45 - Authentication with AWS

6. Best Practices

46 - Using HTTPS and SSL
47 - Salting and peppering passwords
48 - Solution - Adding salt and pepper
49 - Never trust the front-end
50 - Authentication error handling
51 - Catching & handling errors
52 - Securing your database

Conclusion

53 - Next steps in your React journey

Appendix

54 - A tour of Coderpad