Advanced React Security Patterns

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.

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.

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.

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.

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.

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.

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.