Advanced React Security Patterns
Lesson write-up coming soon
Advanced React Security Patterns
Authentication and Authorization for Next.js
Tour the Next.js Project Code
RyanChenkie
Full Stack Instructor
Getting Started
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 Endpoint
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 Endpoints
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 Object
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
Authentication and Authorization for Next.js
Serverless Authentication
Run the App and API
Sign Up for Netlify
Set Up a Directory for Serverless Functions
Create a Basic Serverless Function
Configure a Proxy to Netlify
Get Data from a Serverless Function
Check Authorization in a Serverless Function
Connect to a Database from a Serverless Function
Query a Database from a Serverless Function
Add a Role Check
Challenge: Complete the Remaining Endpoints
Lesson Resources
Get the code for this lesson