Authentication and Security for today's React landscape isn't straight-forward
Figuring out how to wire up a fully-authenticated React app can be a nightmare.
Should I use JSON Web Tokens or cookies and sessions? How do I properly protect my data? What happens if users inspect my React code in the browser?
What about when I'm making an app with Gatsby or Next?
What about serverless functions?
What about GraphQL??
What if I want to use a third-party auth provider?!

WHAT DO I DO?!?


Learn React security from the ground up. I'll teach you everything I know about security for React apps.
I've spent years working in React codebases where security is a chief concern. I also spent nearly three years working at Auth0 where I learned a ton about auth and security. I'd like to teach you everything I know about how to secure your React apps so that you don't need to spend all that time figuring it out as you go.
What's in the Box?

Refreshing JSON Web Tokens
Applications that use JSON Web Tokens most likely need some way of refreshing those tokens when they expire. Since token lifetimes should be kept short, and since we don't want users to need to log back into our applications every time the token expires, we need a way of getting a fresh token on demand. The way to accomplish this is with refresh tokens.
In this module, we'll cover what refresh tokens are, how they're used to get new access tokens, where they should be stored, and more.

Run the App and API
1m 38s

User Experience Problems with JWTs
4m 37s

How Refresh Tokens Work
4m 41s

Add an API Proxy
2m 49s

Add a Refresh Token Model
2m 34s

Save the Refresh Token in a Cookie
4m 13s

Switching to Cookies and Sessions
It's common to see React applications use JSON Web Tokens for authentication. This mechanism can be especially helpful when we need to access data from APIs that are served over domains that are different from the domain our React app runs on. However, JSON Web Tokens do come with some issues. These issues stem from the fact that JWTs are often used to try to replace a traditional user session, but that's not what they're intended for.
In this module, we cover how to fully protect our React app and express API using cookies and sessions. We also talk about the benefits of taking this approach.

Run the App and API
1m 30s

Add an API Proxy
2m 06s

Install and Configure express-session
7m 03s

Set a Session on Login and Signup
3m 10s

Add a Session-Based Middleware
4m 38s

Add a Logout Endpoint
2m 38s

Add a Public Axios Instance
3m 09s

Create a User Info Endpoint
4m 54s

Check if the User is Authenticated
7m 10s

Refactor AuthContext
4m 36s

Refactor Login and Signup
4m 20s

Add a CSRF Token
7m 06s

Refactor the API
2m 20s

Add a Persistent Session Store
5m 20s

Strengthen the Session Cookie
3m 41s

Third-Party Authentication Providers
There's a saying in development: "never roll your own crypto". Why not? Cryptography is hard, nuanced, easy to get wrong, and there are people way smarter than you and I that have solved it already.
The same sentiment can be applied to authentication in general. Third-party authentication providers like Auth0 exist to make it both really easy to integrate authentication in our apps and also really secure since security is the prime focus of their business.
In this module, we start by talking about the value that Auth0 offers and why you should consider using it. We then offload all of the authentication and authorization pieces of our app to Auth0.

Why Use a Third-Party Auth Provider
5m 25s

Sign Up for an Auth0 Account
2m 11s

Configure Application URLs
1m 58s

Create a User in Auth0
2m 08s

Set Up an API and Permissions
3m 04s

Add User Roles in Auth0
1m 41s

Use the Universal Login Screen
1m 50s

Install the Auth0-React SDK
5m 06s

Redirect Users to Auth0 to Log in
2m 40s

Use isLoading to Wait for Authentication
4m 59s

Use isAuthenticated to Check Auth Status
1m 57s

Get an Access Token from Auth0
6m 17s

Use a JWKS Verification Middleware
5m 02s

Augment the User's Profile with a Rule
6m 12s

Use the Auth0 Role in the React App
2m 25s

Request Scopes for an Access Token
7m 46s

Apply Scope Check Middleware to Endpoints
2m 10s

Add a Custom User ID with an Auth0 Rule
9m 04s

Allow Users to Log Out
2m 12s

Display the User's Name and Picture
1m 16s

Remove AuthContext, Login, and Signup
4m 00s

Renew Access Tokens
5m 15s

Authentication and Authorization for GraphQL
Authentication and authorization for GraphQL-based apps is done in almost the same way as would be done if we were using JSON endpoints. We can either use JSON Web Tokens, sending them to the server in an authorization header, or we can send cookies and rely on sessions on the backend.
There are, however, some important distinctions. The biggest changes come in on the server where we need some new concepts to make authentication and authorization checks before our data is resolved and sent back to the client.
In this module, we work from a version of the app that is fully GraphQL-based. We see how to send JWTs to the server from Apollo on the front end and then how to authorize requests on the backend using two methods: resolver auth checks and custom schema directives.

Run the App and API
1m 14s

Tour the GraphQL Implementation
7m 17s

Include a JWT in a GraphQL Request
3m 18s

Add the User to the GraphQL Context Object
5m 58s

Check Authorization in a Resolver
3m 19s

Add a Function to Check the User's Role
4m 58s

Define an Auth Schema Directive
2m 52s

Add a Custom Directive Class
2m 34s

Complete the Auth Directive Class
8m 33s

Apply the Auth Directive to the Schema
3m 07s

Use the User's Sub Claim
1m 43s

Redirect to the Login Page
3m 07s

Authentication and Authorization for GatsbyJS
A Gatsby app is really just a React app, so it's tempting to think that authentication and authorization can be accomplished exactly how it would be in a more "vanilla" React application. In fact, it is mostly the same, but there are some important distinctions because of how Gatsby builds files for distribution.
In this module, we'll apply authentication to the marketing page of our application and see how to work in the relevant pieces to make everything run smoothly for building and deploying the Gatsby site.

Tour the Gatsby App Setup
3m 30s

Run the App API
1m 56s

Wrap the Root Element with Providers
4m 10s

Create Client-Side Routes
7m 28s

Add a Private Route
4m 30s

Make Login and Signup be Client-Side Routes
3m 22s

Check the Environment when Building the App
2m 03s

Authentication and Authorization for Next.js
Next.js apps occupy a peculiar space when it comes to thinking about how authentication and authorization should be applied. How should we think about a "logged-in user" in a server-side rendering world? What are the ways we can serve the assets for the app and fill in the authentication pieces at runtime?
In this module, we'll build the Orbit app on Next.js and see the different ways we can apply authentication and authorization to it.

Install Dependencies and Run the App
1m 23s

Tour the Next.js Project Code
3m 55s

Make Calls for Data on the Server Side
4m 37s

Add an Authorization Middleware
4m 00s

Add an Admin Authorization Middleware
4m 00s

Check for Authentication on the Client
4m 00s

Check for the Admin Role on the Client
4m 00s

Serverless Authentication
Serverless functions give us the ability to run code on-demand and only pay for what we use. Serverless is an attractive option because it's cheaper and much more scalable than a traditional server deployment. If we want to have authenticated serverless functions, there are a few things we need to consider. How do we manage logins and signups? How do we authorize requests? Where do we store secrets to verify tokens against?
In this module, we'll move to serverless functions for our API and we'll see how to fully authenticate requests to them. We'll use Netlify functions which themselves are based on AWS Lambda.

Run the App and API
0m 52s

Sign Up for Netlify
1m 45s

Set Up a Directory for Serverless Functions
3m 23s

Create a Basic Serverless Function
6m 33s

Configure a Proxy to Netlify
2m 31s

Configure a Proxy to Netlify
3m 33s

Check Authorization in a Serverless Function
4m 58s

Connect to a Database from a Serverless Function
3m 22s

Query a Database from a Serverless Function
3m 34s

Add a Role Check
2m 24s

Challenge: Complete the Remaining Endpoints
1m 38s
Interviews with React Experts
I sat down to chat with folks in the React community to get their take on auth and security for React apps. They share tips, tricks, and lessons learned from their experience building secure React applicatons.s

Kent C. Dodds

Eve Porcello

Ben Awad

Kyle Shevlin

Dave Ceddia

Sam Julien

Kadi Kraman

Jason Lengstorf

Christian Nwamba

Chris Sevilleja
FAQs
Why would I buy this? I can get the same info for free online!
That’s true! Everything you’ll learn in this course can also be found online for free. But be prepared to have 87 tabs open and spend countless hours in trial and error mode.
This course gives you all the in-depth security content you need and gets straight to the point. You’ll have your React app secure much, much faster than you otherwise would cobbling together tutorials and code samples strewn across the internet.
Why should I listen to you?
I spent almost three years working at Auth0 where I learned a ton about app security, specifically about topics concerning authentication and authorization. I was fortunate to be able to absorb a ton of knowledge from brilliant engineers who specialize in identity. Since leaving Auth0, I’ve focused on building security-focused applications for businesses of all sizes. In short, I’ve learned a lot about application security and I want to share that knowledge with you.
What If I want a refund?
If you are unhappy with the content for any reason, you’ll get a refund immediately. No questions asked.
Aren’t JSON Web Tokens an anti-pattern?
It depends who you ask. This famous article advocates that you don’t use them. At the same time, companies like Auth0 have built their entire business around the usage of JSON Web Tokens.
This course presents both options for securing your React application: using JSON Web Tokens and using cookies and sessions. You’ll learn the upsides and downsides of each and how to decide on which to use.
What about updates?
Things change and, in tech, they change fast. This course will be kept up-to-date with any relevant new info that comes up, including considerations for breaking changes and security patches to packages used throughout.
Testimonials

Kent C. Dodds
"If you asked me who would be the best teacher to learn about authentication from, Ryan would be the first person to pop into my mind. His depth of experience and willingness to share his knowledge is inspiring."

Kadi Kraman
"Ryan has an abundance of experience and knowledge in anything to do with security and authentication on the web. This, coupled with his well-paced, friendly manner of explaining things makes him the perfect instructor."

Ben Awad
"Ryan and authentication go together like peanut butter and jelly. Prepare yourself for the best authentication sandwich you've ever tasted."

Kyle Shevlin
"If there's anything you want to get absolutely right in an app, it's security. You want nothing less than total confidence that your code is working exactly as you expect. Advanced React Security Patterns by Ryan will give you that confidence."

Dave Ceddia
"Authentication in React has long been one of those things where every tutorial out there glosses over the messy parts, but Ryan dives right in and explains everything beautifully. Ryan & this course will help you understand how to do auth right."

James Q Quick
"I've been following Ryan in the authentication space for a few years now. There's no one better at explaining the technical details of security in a way that everyone can understand!"
Packages
Black Friday Sale On Now!
Basic Package
Lifetime access and forever free updates
Full source code for all modules
5 of 7 Modules
- Refreshing JSON Web Tokens
- Using Cookies and Sessions
- Authentication and Authorization for GraphQL
- Authentication and Authorization for Gatsby Apps
- Authentication and Authorization for Next.js Apps
Black Friday Sale - 70% Off
$45
Pro Package
Lifetime access and forever free updates
Full source code for all modules
All 7 Modules
- Refreshing JSON Web Tokens
- Using Cookies and Sessions
- Third-Party Authentication Providers
- Authentication and Authorization for GraphQL
- Authentication and Authorization for Gatsby Apps
- Authentication and Authorization for Next.js Apps
- Authentication and Authorization for Serverless Functions
10 interviews with React experts, including: Kent C. Dodds, Ben Awad, Eve Porcello, Jason Lengstorf, Kadi Kraman, Dave Ceddia, Chris Sevilleja, Sam Julien, and Christian Nwamba
Access to the ReactSecurity Slack where you can ask for help, communicate with other learners, and increase your knowledge from the community
Black Friday Sale - 70% Off
$75
Passing my security knowledge on to you
I've spent a lot of time thinking about application security over the last five years. Much of that time was spent working at Auth0 where I learned a lot about how to properly deal with authentication and authorization in web applications, including those built with React.
I'm building ReactSecurity to pass my knowledge on to you in hopes that we can all contribute to building a safer, more secure web.
Ryan Chenkie
Full-Stack JavaScript Developer
Elevate Digital