logo

Advanced React Security Patterns

Learn how to Secure your React Apps for the Real World

hero

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?!


scream

WHAT DO I DO?!?

sadface

ryan chenkie

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?

module

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.

thumbnail

Run the App and API

1m 38s

thumbnail

User Experience Problems with JWTs

4m 37s

thumbnail

How Refresh Tokens Work

4m 41s

thumbnail

Add an API Proxy

2m 49s

thumbnail

Add a Refresh Token Model

2m 34s

thumbnail

Save the Refresh Token in a Cookie

4m 13s

module

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.

thumbnail

Run the App and API

1m 30s

thumbnail

Add an API Proxy

2m 06s

thumbnail

Install and Configure express-session

7m 03s

thumbnail

Set a Session on Login and Signup

3m 10s

thumbnail

Add a Session-Based Middleware

4m 38s

thumbnail

Add a Logout Endpoint

2m 38s

thumbnail

Add a Public Axios Instance

3m 09s

thumbnail

Create a User Info Endpoint

4m 54s

thumbnail

Check if the User is Authenticated

7m 10s

thumbnail

Refactor AuthContext

4m 36s

thumbnail

Refactor Login and Signup

4m 20s

thumbnail

Add a CSRF Token

7m 06s

thumbnail

Refactor the API

2m 20s

thumbnail

Add a Persistent Session Store

5m 20s

thumbnail

Strengthen the Session Cookie

3m 41s

module

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.

thumbnail

Why Use a Third-Party Auth Provider

5m 25s

thumbnail

Sign Up for an Auth0 Account

2m 11s

thumbnail

Configure Application URLs

1m 58s

thumbnail

Create a User in Auth0

2m 08s

thumbnail

Set Up an API and Permissions

3m 04s

thumbnail

Add User Roles in Auth0

1m 41s

thumbnail

Use the Universal Login Screen

1m 50s

thumbnail

Install the Auth0-React SDK

5m 06s

thumbnail

Redirect Users to Auth0 to Log in

2m 40s

thumbnail

Use isLoading to Wait for Authentication

4m 59s

thumbnail

Use isAuthenticated to Check Auth Status

1m 57s

thumbnail

Get an Access Token from Auth0

6m 17s

thumbnail

Use a JWKS Verification Middleware

5m 02s

thumbnail

Augment the User's Profile with a Rule

6m 12s

thumbnail

Use the Auth0 Role in the React App

2m 25s

thumbnail

Request Scopes for an Access Token

7m 46s

thumbnail

Apply Scope Check Middleware to Endpoints

2m 10s

thumbnail

Add a Custom User ID with an Auth0 Rule

9m 04s

thumbnail

Allow Users to Log Out

2m 12s

thumbnail

Display the User's Name and Picture

1m 16s

thumbnail

Remove AuthContext, Login, and Signup

4m 00s

thumbnail

Renew Access Tokens

5m 15s

module

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.

thumbnail

Run the App and API

1m 14s

thumbnail

Tour the GraphQL Implementation

7m 17s

thumbnail

Include a JWT in a GraphQL Request

3m 18s

thumbnail

Add the User to the GraphQL Context Object

5m 58s

thumbnail

Check Authorization in a Resolver

3m 19s

thumbnail

Add a Function to Check the User's Role

4m 58s

thumbnail

Define an Auth Schema Directive

2m 52s

thumbnail

Add a Custom Directive Class

2m 34s

thumbnail

Complete the Auth Directive Class

8m 33s

thumbnail

Apply the Auth Directive to the Schema

3m 07s

thumbnail

Use the User's Sub Claim

1m 43s

thumbnail

Redirect to the Login Page

3m 07s

module

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.

thumbnail

Tour the Gatsby App Setup

3m 30s

thumbnail

Run the App API

1m 56s

thumbnail

Wrap the Root Element with Providers

4m 10s

thumbnail

Create Client-Side Routes

7m 28s

thumbnail

Add a Private Route

4m 30s

thumbnail

Make Login and Signup be Client-Side Routes

3m 22s

thumbnail

Check the Environment when Building the App

2m 03s

module

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.

thumbnail

Install Dependencies and Run the App

1m 23s

thumbnail

Tour the Next.js Project Code

3m 55s

thumbnail

Make Calls for Data on the Server Side

4m 37s

thumbnail

Add an Authorization Middleware

4m 00s

thumbnail

Add an Admin Authorization Middleware

4m 00s

thumbnail

Check for Authentication on the Client

4m 00s

thumbnail

Check for the Admin Role on the Client

4m 00s

module

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.

thumbnail

Run the App and API

0m 52s

thumbnail

Sign Up for Netlify

1m 45s

thumbnail

Set Up a Directory for Serverless Functions

3m 23s

thumbnail

Create a Basic Serverless Function

6m 33s

thumbnail

Configure a Proxy to Netlify

2m 31s

thumbnail

Configure a Proxy to Netlify

3m 33s

thumbnail

Check Authorization in a Serverless Function

4m 58s

thumbnail

Connect to a Database from a Serverless Function

3m 22s

thumbnail

Query a Database from a Serverless Function

3m 34s

thumbnail

Add a Role Check

2m 24s

thumbnail

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

avatar

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."

avatar

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."

avatar

Ben Awad

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

avatar

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."

avatar

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."

avatar

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

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

40% Launch Discount on Now

$150

$89

Buy Now

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

40% Launch Discount on Now

$250

$149

Buy Now

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

© 2020 Elevate Digital Inc