React 18 Authentication with Node.js JWT API
In this tutorial we'll go through how to implement authentication with a React front-end app and Node.js back-end API
The result is a simple full-stack login application with the front-end built with React 18 and the back-end built with Node.js and Express 4.
Tutorial Contents
- React 18 App Overview
- Node API Overview
- Download and Start the React 18 App
- Download and Start the Node API
- Connect the Front-End to the Back-End
React 18 Front-End App Overview
Front-end authentication app built with React 18.1.0 and Redux 4.2.0
The React app is pretty minimal and contains just 2 pages to demonstrate JWT authentication:
/login- public login page with username and password fields, on submit the page sends a POST request to the API to authenticate user credentials, on success the API returns a JWT token to make authenticated requests to secure API routes./- secure home page that displays a list of users fetched from a secure API endpoint using the JWT token received after successful login.
Complete documentation is available at React 18 + Redux - JWT Authentication Example & Tutorial.
Node.js Back-End API Overview
Authentication API built with Node.js and Express.js 4.18.2
The Node.js API has just two endpoints/routes to demonstrate authentication with JWT and accessing a restricted route with JWT:
/users/authenticate- public route that accepts HTTP POST requests containing the username and password in the body. If the username and password are correct then a JWT authentication token and the user details are returned./users- secure route that accepts HTTP GET requests and returns a list of all the users in the application if the HTTP Authorization header contains a valid JWT token. If there is no auth token or the token is invalid then a 401 Unauthorized response is returned.
Complete documentation is available at Node.js + Express 4 - JWT Authentication Tutorial with Example API.
Download and Start the React Auth App
Follow these steps to run the React front-end authentication app:
- Install Node.js and npm from https://nodejs.org.
- Download or clone the project source code from https://github.com/cornflourblue/react-18-redux-jwt-authentication-example
- Install all required npm packages by running
npm installfrom the command line in the project root folder (where the package.json is located). - Start the application by running
npm startfrom the command line in the project root folder. - Open a browser and go to the application at
http://localhost:3000
Fake backand API by default
The React authentication app runs with a fake backend by default to enable it to run completely in the browser without a real API, we'll switch to connect to the Node.js API below once it's up and running.
Download and Start the Node.js Auth API
Follow these steps to run the Node.js + Express 4 backend API:
- Download or clone the project source code from https://github.com/cornflourblue/node-jwt-authentication-api
- Start the api by running
npm startfrom the command line in the project root folder, you should see the messageServer listening on port 4000.
Connect the Front-End with the Back-End
In the React auth app, remove or comment out the 2 lines below the comment // setup fake backend located in the /src/index.js file, then start the React app and it should now send requests to the Node.js authentication API.
That's it! You now have a full stack React + Node.js authentication application running.
Need Some React Help?
Search fiverr for freelance React developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!