Security for your React Apps Shouldn't be a Mystery

Forget about half-baked samples and tutorials that just cover the basics. Learn how to properly secure your React app for the real world.

Sign up to get notified about new courses and resources

React Security Fundamentals

Free Course

Learn the essentials of how to add authentication and authorization to your React app.

Use React's features to add extra layers of security.

Advanced React Security Patterns

Pro Course

Release Date: June 30, 2020

This course covers full-stack authentication, authorization, and security for your React apps and Node APIs. Learn about the considerations that need to be made when using GraphQL, Gatsby, Next.js and other popular technologies.

Web Authentication for React Apps

Free Course

Release Date TBA

Web Authentication is an exciting new spec that allows us to use strong authenticators like TouchID to log into apps and websites. This course covers how to implement Web Authentication in your React apps, backed by a Node API.

React Security Fundamentals Preview

Use Lazy Loading to Limit Access to Code

It's common for an application to have routes that should only be accessible by users with a certain access level. By default, our React apps will ship code to power all of these routes to all users, but we shouldn't do that. We don't need to send absolutely all of the code for our apps to the client. Instead, we can selectively send the user the code they need when they need it. Doing so helps to improve the security posture for our React applications. Let's see how to use lazy loading in conjunction with React Router to limit access to React code based on a user's access level.

Challenge

Use lazy loading to prevent users from getting React code they shouldn't have access to. Don't forget to use Suspense to provide a fallback while the lazily loaded modules are being resolved.

Complete challenge in CodeSandbox

Edit 1bp6u

The Anatomy of a JSON Web Token

Attach a JSON Web Token in an Axios Request

Maintain an Allowed List for Sending Tokens

Sanitize Content When Setting InnerHTML

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