React Cookbook

Chapter 7. Security

In this chapter, we look at various ways of securing your application. We’ll look at common patterns for integrating your application with standard security systems. We’ll look at how you can audit your code for several common security flaws. In several recipes in this chapter, we will use the WebAuthn API to integrate an application with security devices, such as fingerprint sensors and physical tokens. WebAuthn is an exciting and underused technology that can increase your application’s security and enhance the user’s experience.

7.1 Secure Requests, Not Routes

Problem

Recipe 2.6 showed how you could use React Router to create secured routes. That means if the user tries to get to specific paths within your application, you can force them to submit a login form before seeing the contents of that page.

The secured routes approach is a good, reasonably general approach when you are first building an application. However, some applications don’t fall so easily into this static model of security. Some pages will be secure, and some will be insecure. But in many applications, it’s easier to secure data services rather than pages. What matters is not which page you are on but the data you are viewing.

All of these complexities are usually straightforward to define at the API level. But it’s the kind of complexity that you don’t want to reproduce in the logic of your frontend client. For these reasons, the simple approach of marking some routes secure and others ...