Advanced React Security Patterns - Pro Package
Buy now
Learn more
Getting Started
Prerequisites for the Course
Download the Code for the Course
Advanced React Security Patterns Code...
Sign Up for MongoDB Atlas
Install Global Dependencies
Take a Tour of the Orbit App
Refreshing JSON Web Tokens
Run the App and API
User Experience Problems with JWTs
How Refresh Tokens Work
Add an API Proxy
Add a Refresh Token Model
Save the Refresh Token in a Cookie
Add a Token Refresh Endpoint
Get a New Token in the Auth Debugger
Get a New Token on 401 Errors
Automatically Retry Post Requests
Add a Refresh Token Invalidation Endp...
Add an Expiry Time to the Refresh Token
Switching to Cookies and Sessions
Run the App and API
Add an API Proxy
Install and Configure express-session
Set a Session on Login and Signup
Add a Session-Based Middleware
Add a Logout Endpoint
Add a Public Axios Instance
Create a User Info Endpoint
Check if the User is Authenticated
Refactor AuthContext
Refactor Login and Signup
Add a CSRF Token
Refactor the API
Add a Persistent Session Store
Strengthen the Session Cookie
Third Party Authentication Providers
Run the App and API
Why Use a Third-Party Auth Provider?
Sign Up for an Auth0 Account
Configure Application URLs
Create a User in Auth0
Set Up an API and Permissions
Add User Roles in Auth0
Use the Universal Login Screen
Install the Auth0-React SDK
Redirect Users to Auth0 to Log In
Use isLoading to Wait for Authentication
Use isAuthenticated to Check Auth Status
Get an Access Token from Auth0
Use a JWKS Verification Middleware
Augment the User's Profile with a Rule
Use the Auth0 Role in the React App
Request Scopes for an Access Token
Apply Scope Check Middleware to Endpo...
Add a Custom User ID with an Auth0 Rule
Allow Users to Log Out
Display the User's Name and Picture
Remove AuthContext, Login, and Signup
Renew Access Tokens
Authentication and Authorization for GraphQL
Run the App and API
Tour the GraphQL Implementation
Include a JWT in a GraphQL Request
Add the User to the GraphQL Context O...
Check Authorization in a Resolver
Add a Function to Check the User's Role
Define an Auth Schema Directive
Add a Custom Directive Class
Complete the Auth Directive Class
Apply the Auth Directive to the Schema
Use the User's Sub Claim
Redirect to the Login Page
Authentication and Authorization for GatsbyJS
Tour the Gatsby App Setup
Run the App and API
Wrap the Root Element with Providers
Create Client-Side Routes
Add a Private Route
Make Login and Signup be Client-Side ...
Check the Environment when Building t...
Authentication and Authorization for Next.js
Install Dependencies and Run the App
Tour the Next.js Project Code
Make Calls for Data on the Server Side
Add an Authorization Middleware
Add an Admin Authorization Middleware
Check for Authentication on the Client
Check for the Admin Role on the Client
Serverless Authentication
Run the App and API
Sign Up for Netlify
Set Up a Directory for Serverless Fun...
Create a Basic Serverless Function
Configure a Proxy to Netlify
Get Data from a Serverless Function
Check Authorization in a Serverless F...
Connect to a Database from a Serverle...
Query a Database from a Serverless Fu...
Add a Role Check
Challenge: Complete the Remaining End...
Interviews
Kent C. Dodds
Eve Porcello
Ben Awad
Kyle Shevlin
Dave Ceddia
Sam Julien
Kadi Kraman
Jason Lengstorf
Christian Nwamba
Chris Sevilleja
Products
Course
Section
Authentication and Authorization for Next.js
Authentication and Authorization for Next.js
Advanced React Security Patterns - Pro Package
Buy now
Learn more
Getting Started
Prerequisites for the Course
Download the Code for the Course
Advanced React Security Patterns Code...
Sign Up for MongoDB Atlas
Install Global Dependencies
Take a Tour of the Orbit App
Refreshing JSON Web Tokens
Run the App and API
User Experience Problems with JWTs
How Refresh Tokens Work
Add an API Proxy
Add a Refresh Token Model
Save the Refresh Token in a Cookie
Add a Token Refresh Endpoint
Get a New Token in the Auth Debugger
Get a New Token on 401 Errors
Automatically Retry Post Requests
Add a Refresh Token Invalidation Endp...
Add an Expiry Time to the Refresh Token
Switching to Cookies and Sessions
Run the App and API
Add an API Proxy
Install and Configure express-session
Set a Session on Login and Signup
Add a Session-Based Middleware
Add a Logout Endpoint
Add a Public Axios Instance
Create a User Info Endpoint
Check if the User is Authenticated
Refactor AuthContext
Refactor Login and Signup
Add a CSRF Token
Refactor the API
Add a Persistent Session Store
Strengthen the Session Cookie
Third Party Authentication Providers
Run the App and API
Why Use a Third-Party Auth Provider?
Sign Up for an Auth0 Account
Configure Application URLs
Create a User in Auth0
Set Up an API and Permissions
Add User Roles in Auth0
Use the Universal Login Screen
Install the Auth0-React SDK
Redirect Users to Auth0 to Log In
Use isLoading to Wait for Authentication
Use isAuthenticated to Check Auth Status
Get an Access Token from Auth0
Use a JWKS Verification Middleware
Augment the User's Profile with a Rule
Use the Auth0 Role in the React App
Request Scopes for an Access Token
Apply Scope Check Middleware to Endpo...
Add a Custom User ID with an Auth0 Rule
Allow Users to Log Out
Display the User's Name and Picture
Remove AuthContext, Login, and Signup
Renew Access Tokens
Authentication and Authorization for GraphQL
Run the App and API
Tour the GraphQL Implementation
Include a JWT in a GraphQL Request
Add the User to the GraphQL Context O...
Check Authorization in a Resolver
Add a Function to Check the User's Role
Define an Auth Schema Directive
Add a Custom Directive Class
Complete the Auth Directive Class
Apply the Auth Directive to the Schema
Use the User's Sub Claim
Redirect to the Login Page
Authentication and Authorization for GatsbyJS
Tour the Gatsby App Setup
Run the App and API
Wrap the Root Element with Providers
Create Client-Side Routes
Add a Private Route
Make Login and Signup be Client-Side ...
Check the Environment when Building t...
Authentication and Authorization for Next.js
Install Dependencies and Run the App
Tour the Next.js Project Code
Make Calls for Data on the Server Side
Add an Authorization Middleware
Add an Admin Authorization Middleware
Check for Authentication on the Client
Check for the Admin Role on the Client
Serverless Authentication
Run the App and API
Sign Up for Netlify
Set Up a Directory for Serverless Fun...
Create a Basic Serverless Function
Configure a Proxy to Netlify
Get Data from a Serverless Function
Check Authorization in a Serverless F...
Connect to a Database from a Serverle...
Query a Database from a Serverless Fu...
Add a Role Check
Challenge: Complete the Remaining End...
Interviews
Kent C. Dodds
Eve Porcello
Ben Awad
Kyle Shevlin
Dave Ceddia
Sam Julien
Kadi Kraman
Jason Lengstorf
Christian Nwamba
Chris Sevilleja
7 Lessons
Install Dependencies and Run the App
Tour the Next.js Project Code
Make Calls for Data on the Server Side
Add an Authorization Middleware
Add an Admin Authorization Middleware
Check for Authentication on the Client
Check for the Admin Role on the Client