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