In this React project, we'll create a simple React app with a Node.js back-end that has a complete sign-up and login system with a protected component on the front-end and a secured API endpoint. Full code is here: https://github.com/codebubb/userfront-react-tutorial React Project: User Authentication ------------------------------------------------------- 00:00 Introduction 00:55 Userfront Overview 01:52 Creating the React app 07:26 Creating the API endpoint 10:14 Integrating API into App 12:35 Setting up Userfront 14:23 Creating Login, Signup forms 19:26 Securing the React App 22:12 Securing the API endpoint 28:15 Sending access tokens in the React app 30:01 Summary So in this React tutorial, we'll be building a simple React app that has a complete signup and React login system, complete with a protected front-end route and also a secured API endpoint. As working with authentication can be a bit tricky, we'll be doing this using a 3rd party provider called Userfront. This service will provide us with all of the services for registering users and logging them in as well as the actual form components that we can put on our front-end React app. We'll start off by setting up the React app with separate routes for login, signup and a 'dashboard' which will be initially unsecured and then we'll create the Node.js backend API endpoint with Express js to pass a simple object back to the frontend. Once this is set up we'll add the Userfront library and create the sign-up, login, password reset and logout button components which we'll fit in to our existing routes. When we've tested this out, we'll then protect the 'dashboard' route in our app with Userfront. To wrap things up, we'll authenticate the tokens that Userfront creates on our back-end API so that only users with a valid json web token can access the endpoint. So by the end of the tutorial, you should be able to create a React Userfront app that allows users to sign-up, login and has protected front-end routes and a secured API. #react #userfront #juniordevelopercentral Channel Handle @codebubb