This project is a secure, full-stack web application built with React (frontend) and Node.js/Express (backend), showcasing the use of Auth0 JWT access tokens to protect API endpoints.
✅ Inspired by the Udemy course “Secure Your Vue.js Applications with Auth0” — but fully implemented in React + TypeScript.
- ✅ React + TypeScript front-end with routing
- ✅ Auth0 authentication (login/logout with redirect)
- ✅ Secure access to profile and messages views
- ✅ Protected Express backend (via Auth0 JWT verification)
- ✅ POST & GET messages with bearer token validation
- ✅ UI separation:
MessageForm,MessagesList, andMessagesPage - ✅ Elegant layout using Flexbox and custom CSS
- ✅ Auth0 logo integration + descriptive UI
🖼️ Screenshots Auth0 Protected Message Page
Or watch this short walkthrough:
| Layer | Stack |
|---|---|
| Frontend | React + TypeScript + Auth0 SDK |
| Backend | Node.js + Express + express-jwt |
| Auth | Auth0 (Universal Login) |
# Clone the repo
git clone https://github.com/yourusername/auth0-react-ts-app.git
cd auth0-react-ts-app
# Frontend
cd front-end
npm install
npm start # runs at http://localhost:3000
# In another terminal...
cd ../back-end
npm install
node src/server.js # runs at http://localhost:3011📄 License MIT License. Created by hugo.machefer@gmail.com for educational purposes.
🤝 Credits
Auth0
Udemy Course Inspiration https://www.udemy.com/certificate/UC-e2a3871f-77d2-4e3a-a1e2-7e5dda0070e5/?utm_campaign=email&utm_medium=email&utm_source=sendgrid.com