React JWT Login with Node
Budget: ₹1,500 – ₹12,500 INR
I need a concise, modern example that shows how a React front-end can talk to a Node.js back-end through a clean REST API and handle authentication with JSON Web Tokens.
The goal is not a full product but a reference implementation I can study, run locally, and extend.
Front-end
• A single-page React app (latest stable version) with a minimal UI: email, password fields, submit button, and a message area for success or error states.
• Axios or Fetch for the API call, React Router only if routing is essential.
• Clear component and state management so I can see exactly where the token is stored in memory or localStorage.
Back-end
• Lightweight Node.js + Express server.
• One protected route (/dashboard or similar) and one public route (/login).
• Passwords hashed with bcrypt; on successful login the server returns a signed JWT.
• Middleware that validates the token on protected routes.
Deliverables
1. Source code for both front-end and back-end in separate folders.
2. README with step-by-step setup, .env example for secrets, and cURL or Postman snippets to test each endpoint.
3. Brief comments in the code explaining the flow of data and token handling.
Acceptance criteria
• npm install && npm start spins up both sides without extra configuration.
• Logging in with the sample credentials provided returns a valid JWT and grants access to the protected route.
• Invalid credentials or expired/malformed tokens correctly return 401 responses.
Please keep the code as clear and minimal as possible while still following best practices so I can grasp each piece quickly.
The goal is not a full product but a reference implementation I can study, run locally, and extend.
Front-end
• A single-page React app (latest stable version) with a minimal UI: email, password fields, submit button, and a message area for success or error states.
• Axios or Fetch for the API call, React Router only if routing is essential.
• Clear component and state management so I can see exactly where the token is stored in memory or localStorage.
Back-end
• Lightweight Node.js + Express server.
• One protected route (/dashboard or similar) and one public route (/login).
• Passwords hashed with bcrypt; on successful login the server returns a signed JWT.
• Middleware that validates the token on protected routes.
Deliverables
1. Source code for both front-end and back-end in separate folders.
2. README with step-by-step setup, .env example for secrets, and cURL or Postman snippets to test each endpoint.
3. Brief comments in the code explaining the flow of data and token handling.
Acceptance criteria
• npm install && npm start spins up both sides without extra configuration.
• Logging in with the sample credentials provided returns a valid JWT and grants access to the protected route.
• Invalid credentials or expired/malformed tokens correctly return 401 responses.
Please keep the code as clear and minimal as possible while still following best practices so I can grasp each piece quickly.
Related categories:
JavaScript
NoSQL Couch & Mongo
Node.js
AngularJS
cURL
Backend Development
Frontend Development
REST API