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 install
from the command line in the project root folder (where the package.json is located). - Start the application by running
npm start
from 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 start
from 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.
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Follow me on Twitter at https://twitter.com/jason_watmore
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some React Help?
Search fiverr to find help quickly from experienced React developers.