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.
- 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
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.
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.
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
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.
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 message
Server listening on port 4000.
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 to find help quickly from experienced React freelance developers.
Follow me for updates
When I'm not coding
My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.