React Security Fundamentals
by
Ryan Chenkie
Login
Get access for free
React Security Fundamentals
Learn how to secure your React app for the real world
Getting Started
Tour the Application
3 mins
Get access
Sign Up for MongoDB Atlas
5 mins
Get access
Clone the Repo and Install Dependencies
2 mins
Get access
Run the React App and Express API
3 mins
Get access
Checkout the Start Branch
1 min
Get access
JSON Web Tokens
Anatomy of a JSON Web Token
11 mins
Get access
Sign a JSON Web Token
3 mins
Get access
JSON Web Token Dos and Don'ts
6 mins
Get access
Signup and Login
View the Signup and Login Endpoints
5 mins
Get access
Complete the User Signup Form
6 mins
Get access
Complete the User Login Form
3 mins
Get access
Handling Auth State
Set Auth State after Login
6 mins
Get access
Use Auth State in UI Elements
2 mins
Get access
Persist Auth State on Page Refresh
5 mins
Get access
Check if the User is Currently Authenticated
5 mins
Get access
Navigate Conditionally Based on Auth State
2 mins
Get access
Add Logout Functionality
5 mins
Get access
Check the User's Role
3 mins
Get access
Conditionally Display Sidebar Items
6 mins
Get access
Handling Client-Side Routing
Guard Client Side Routes Based on Auth State
6 mins
Get access
Guard Client Side Routes Based on Role
2 mins
Get access
Handling Authenticated HTTP Requests
Add a JWT to an Axios Request
6 mins
Get access
Add an HTTP Interceptor to Axios
5 mins
Get access
Protecting API Endpoints
Add a JWT Verification Middleware
8 mins
Get access
Attach a User to the Request Object
5 mins
Get access
Limit Access to Admin Users
5 mins
Get access
Get the User ID from Requests
6 mins
Get access
Hardening the Application
Use Lazy Loading to Limit Access to Code
5 mins
Get access
Maintain an Allowed Origin List for Tokens
4 mins
Get access
Sanitize Content when Setting InnerHTML
4 mins
Get access
Carry Out a Cross-Site Scripting Attack
4 mins
Get access
Steal a JSON Web Token
3 mins
Get access
Sanitize a Cross-Site Scripting Attack
3 mins
Get access
Switching to Cookies
How Cookies Work
8 mins
Get access
Add a Proxy to the API
4 mins
Get access
Set a Cookie on Login and Signup
3 mins
Get access
Stop Storing JWT in Local Storage
3 mins
Get access
Verify JWT from Cookie
5 mins
Get access
Add a Cross-Site Request Forgery Token
9 mins
Get access
Table of contents
React Security Fundamentals
by
Ryan Chenkie
ui-24px-outline-1_lock
Getting Started
Getting Started
Draft
Tour the Application
Draft
Tour the Application
Draft
Sign Up for MongoDB Atlas
Draft
Sign Up for MongoDB Atlas
Draft
Clone the Repo and Install Dependencies
Draft
Clone the Repo and Install Dependencies
Draft
Run the React App and Express API
Draft
Run the React App and Express API
Draft
Checkout the Start Branch
Draft
Checkout the Start Branch
ui-24px-outline-1_lock
JSON Web Tokens
JSON Web Tokens
Draft
Anatomy of a JSON Web Token
Draft
Anatomy of a JSON Web Token
Draft
Sign a JSON Web Token
Draft
Sign a JSON Web Token
Draft
JSON Web Token Dos and Don'ts
Draft
JSON Web Token Dos and Don'ts
ui-24px-outline-1_lock
Signup and Login
Signup and Login
Draft
View the Signup and Login Endpoints
Draft
View the Signup and Login Endpoints
Draft
Complete the User Signup Form
Draft
Complete the User Signup Form
Draft
Complete the User Login Form
Draft
Complete the User Login Form
ui-24px-outline-1_lock
Handling Auth State
Handling Auth State
Draft
Set Auth State after Login
Draft
Set Auth State after Login
Draft
Use Auth State in UI Elements
Draft
Use Auth State in UI Elements
Draft
Persist Auth State on Page Refresh
Draft
Persist Auth State on Page Refresh
Draft
Check if the User is Currently Authenticated
Draft
Check if the User is Currently Authenticated
Draft
Navigate Conditionally Based on Auth State
Draft
Navigate Conditionally Based on Auth State
Draft
Add Logout Functionality
Draft
Add Logout Functionality
Draft
Check the User's Role
Draft
Check the User's Role
Draft
Conditionally Display Sidebar Items
Draft
Conditionally Display Sidebar Items
ui-24px-outline-1_lock
Handling Client-Side Routing
Handling Client-Side Routing
Draft
Guard Client Side Routes Based on Auth State
Draft
Guard Client Side Routes Based on Auth State
Draft
Guard Client Side Routes Based on Role
Draft
Guard Client Side Routes Based on Role
ui-24px-outline-1_lock
Handling Authenticated HTTP Requests
Handling Authenticated HTTP Requests
Draft
Add a JWT to an Axios Request
Draft
Add a JWT to an Axios Request
Draft
Add an HTTP Interceptor to Axios
Draft
Add an HTTP Interceptor to Axios
ui-24px-outline-1_lock
Protecting API Endpoints
Protecting API Endpoints
Draft
Add a JWT Verification Middleware
Draft
Add a JWT Verification Middleware
Draft
Attach a User to the Request Object
Draft
Attach a User to the Request Object
Draft
Limit Access to Admin Users
Draft
Limit Access to Admin Users
Draft
Get the User ID from Requests
Draft
Get the User ID from Requests
ui-24px-outline-1_lock
Hardening the Application
Hardening the Application
Draft
Use Lazy Loading to Limit Access to Code
Draft
Use Lazy Loading to Limit Access to Code
Draft
Maintain an Allowed Origin List for Tokens
Draft
Maintain an Allowed Origin List for Tokens
Draft
Sanitize Content when Setting InnerHTML
Draft
Sanitize Content when Setting InnerHTML
Draft
Carry Out a Cross-Site Scripting Attack
Draft
Carry Out a Cross-Site Scripting Attack
Draft
Steal a JSON Web Token
Draft
Steal a JSON Web Token
Draft
Sanitize a Cross-Site Scripting Attack
Draft
Sanitize a Cross-Site Scripting Attack
ui-24px-outline-1_lock
Switching to Cookies
Switching to Cookies
Draft
How Cookies Work
Draft
How Cookies Work
Draft
Add a Proxy to the API
Draft
Add a Proxy to the API
Draft
Set a Cookie on Login and Signup
Draft
Set a Cookie on Login and Signup
Draft
Stop Storing JWT in Local Storage
Draft
Stop Storing JWT in Local Storage
Draft
Verify JWT from Cookie
Draft
Verify JWT from Cookie
Draft
Add a Cross-Site Request Forgery Token
Draft
Add a Cross-Site Request Forgery Token
Welcome!
Enter your info below to login.
Your email
Your password
Login
Forgot your password?