React Security Fundamentals

Learn how to secure your React app for the real world

Getting Started

Tour the Application

3 mins

Sign Up for MongoDB Atlas

5 mins

Clone the Repo and Install Dependencies

2 mins

Run the React App and Express API

3 mins

Checkout the Start Branch

1 min

JSON Web Tokens

Anatomy of a JSON Web Token

11 mins

Sign a JSON Web Token

3 mins

JSON Web Token Dos and Don'ts

6 mins

Signup and Login

View the Signup and Login Endpoints

5 mins

Complete the User Signup Form

6 mins

Complete the User Login Form

3 mins

Handling Auth State

Set Auth State after Login

6 mins

Use Auth State in UI Elements

2 mins

Persist Auth State on Page Refresh

5 mins

Check if the User is Currently Authenticated

5 mins

Navigate Conditionally Based on Auth State

2 mins

Add Logout Functionality

5 mins

Check the User's Role

3 mins

Conditionally Display Sidebar Items

6 mins

Handling Client-Side Routing

Guard Client Side Routes Based on Auth State

6 mins

Guard Client Side Routes Based on Role

2 mins

Handling Authenticated HTTP Requests

Add a JWT to an Axios Request

6 mins

Add an HTTP Interceptor to Axios

5 mins

Protecting API Endpoints

Add a JWT Verification Middleware

8 mins

Attach a User to the Request Object

5 mins

Limit Access to Admin Users

5 mins

Get the User ID from Requests

6 mins

Hardening the Application

Use Lazy Loading to Limit Access to Code

5 mins

Maintain an Allowed Origin List for Tokens

4 mins

Sanitize Content when Setting InnerHTML

4 mins

Carry Out a Cross-Site Scripting Attack

4 mins

Steal a JSON Web Token

3 mins

Sanitize a Cross-Site Scripting Attack

3 mins

Switching to Cookies

How Cookies Work

8 mins

Add a Proxy to the API

4 mins

Set a Cookie on Login and Signup

3 mins

Stop Storing JWT in Local Storage

3 mins

Verify JWT from Cookie

5 mins

Add a Cross-Site Request Forgery Token

9 mins

Table of contents

Handling Auth State

Hardening the Application

Switching to Cookies