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
16 Comments