Securing React Apps with Auth0

This course will teach you how to handle authorization and authentication in your React app. Implement login, signup, and secure API calls using modern security protocols including OAuth 2.0, OpenID Connect, and JWT tokens.
Course info
Level
Intermediate
Updated
Nov 30, 2018
Duration
3h 18m
Table of contents
Course Overview
Authorization and Authentication Standards
Create a React App
Configure Auth0
Implement Login
Logout, Signup, and User Profile
API Authorization Fundamentals
API Authorization with Scopes, Rules, and Roles
Customization and Enhancements
Description
Course info
Level
Intermediate
Updated
Nov 30, 2018
Duration
3h 18m
Description

Learn how to use Auth0 to handle authentication and authorization in your React apps. In this course, Securing React Apps with Auth0, you will learn how to add secure login, signup, and API calls to your React app, using Auth0 and Express. First, you will learn modern security protocols including OAuth 2.0, OpenID Connect, and JWT tokens. Next, you will implement login, logout, and signup with React and Auth0. Then, you will secure Express APIs using scopes, rules, and roles and endpoints via React. Finally, you will explore the variety of ways you can customize React and Auth0 to your auth related needs using React Router, React's context, and the Auth0 dashboard. When you're finished with this course, you will have the fundamental authorization and authentication skills needed to secure a modern React app with Auth0.

About the author
About the author

Cory is an independent consultant with over 15 years of experience in software development. He is the principal consultant at reactjsconsulting.com and a Microsoft MVP.

More from the author
React: The Big Picture
Beginner
1h 11m
Nov 21, 2017
Creating Reusable React Components
Intermediate
6h 20m
Jun 5, 2017
More courses by Cory House
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. I'm Cory House, and welcome to my course, Securing React Apps with Auth0. I'm the principal consultant at reactjsconsulting. com. Getting security right is hard. There's a dizzying amount of jargon and tradeoffs to consider. So in this course, we'll forge a clear path to successfully securing a React app by using Auth0, the world's most popular auth platform. Some of the major topics that we'll cover include modern security protocols like OAuth 2, OpenID Connect, and JWT tokens, login and signup, authorization approaches, security concerns for single-page apps, and techniques for securing API calls. By the end of this course, you'll be prepared to secure your own React app with rich rules for authentication and authorization. Before beginning the course, you should be generally familiar with modern JavaScript and React. I hope you'll join me on this journey to learn how to secure React apps with the Securing React Apps with Auth0 course, at Pluralsight.

Authorization and Authentication Standards
Hi there, and welcome to Securing React Apps with Auth0. In this course, we'll explore how to implement authentication and authorization for your React apps using Auth0. In this module, we'll review popular auth providers and consider why they're worth using. Then, we'll explore the modern security standards that we'll use to handle authentication and authorization including OAuth 2. 0, OpenID Connect, and JSON Web Tokens. Alright, let's get started.

Create a React App
Now we're familiar with the core technologies that we'll be using in this course including OAuth for authorization, OpenID Connect for authentication, and JWT tokens for identity tokens and access tokens. So in this module, let's quickly build a simple React app so that we can put these technologies to use. In this module, we'll begin by creating a new React app. We'll use create-react-app, which is most popular way to create a new React app today. We'll add in React Router to handle navigation between pages.

Configure Auth0
We've laid the foundation. We have a working React app with routing and navigation set up, and we're generally familiar with OAuth for authorization, OpenID Connect for authentication, and JWT tokens as identity tokens and access tokens. So in this module, let's configure Auth0 to work with our app. We'll begin by signing up for Auth0, and then we'll make two key decisions. We'll choose an OAuth flow, and we'll select a login and signup integration approach. We'll wrap up by creating an Auth0 app that points to our React app, and we'll configure our new React app to consume the environment-specific configuration values that we set up.

Implement Login
We now have a working React app and we've configured a new Auth0 application that configures our React app to work with Auth0. So, now we're ready to implement login. In this module, we'll spend our time coding. We'll implement login in our React app using the auth0-js npm package and the Auth0 Dashboard. Alright, let's get back to coding.

Logout, Signup, and User Profile
We're off to a great start. We can log in just fine. Now let's implement some key missing features. In this module, we use the auth0-js npm package and the Auth0 Dashboard to implement logout. Then, we'll try the signup process and review options for how the user data is stored. We'll finish up by displaying the user's profile when they're logged in. This module is all coding, so fire up your editor.

API Authorization Fundamentals
Virtually every React app makes calls to web APIs, so this module is critical for building real world React apps. In this module, we'll implement a common use case, working with secure APIs. We'll use Node with Express to create a few simple API calls that we can host locally. We'll integrate our API server into create- react-app so it starts automatically and utilizes the same environment variable structure. And we'll configure Express to parse and validate JWTs in order to authorize users. Then, we will create two endpoints on the API, a public endpoint that anyone can call and a private endpoint that requires the user to be logged in. This module is all code, so back to the editor.

API Authorization with Scopes, Rules, and Roles
We just created our first secure API, which requires the user to be logged in. In this module, we'll enforce more granular authorization settings with scopes, rules, and roles. We'll begin by exploring OAuth2 scopes and the problem that they're designed to solve. Then, we'll create a custom scope in Auth0 and configure Express to check the scope to validate that the user is authorized to call the endpoint. We'll use Auth0's JavaScript-based rules to assign users to roles. And finally, after trying scopes and roles, we'll compare authorization approaches to clarify when each is useful. This module will give you the power to create granular permissions for each user. Let's dive in.

Customization and Enhancements
We've covered login, signup, and API calls. In this short, final module, let's explore some customizations and enhancements that can streamline our app's code base and configuration. We'll begin by focusing on React enhancements. We'll redirect the user to the previous page upon login. We'll create a PrivateRoute component to streamline our route declarations. We'll share the auth object via React's context so that we don't have to manually pass it down to all components. Then we'll store our tokens in memory instead of localStorage and utilize silent auth and token renewal to keep the user logged in. I'll close out by quickly showing options to tweak Auth0 to your needs including identity providers, custom login and signup, emails, database integration, hooks, extensions, and more. Alright, let's go.