🔐 SecureAuthLab.React

A modern React application built with React 19, Vite, and Bootstrap 5 that demonstrates secure JWT authentication using ASP.NET Core Web API.

This project showcases industry-standard authentication techniques including JWT authentication, refresh token rotation, protected routes, automatic token refresh, and Axios interceptors.

---

📸 Preview

Home Page

---

Login

---

Register

---

Profile

---

Authentication Flow

• Home Page
• Login
• Register
• Profile
• Automatic Token Refresh

---

✨ Features

• ✅ User Registration
• ✅ User Login
• ✅ JWT Authentication
• ✅ Refresh Token Authentication
• ✅ Automatic Token Refresh
• ✅ Protected Routes
• ✅ React Context API
• ✅ Axios Request Interceptor
• ✅ Axios Response Interceptor
• ✅ Automatic Request Retry
• ✅ Automatic Logout on Invalid Refresh Token
• ✅ Bootstrap 5 Responsive UI
• ✅ React Router

---

🛠️ Technology Stack

Technology	Version
React	19
Vite	Latest
React Router	Latest
Axios	Latest
Bootstrap	5
JavaScript (ES6+)	✓

---

📂 Project Structure

src
│
├── api
│   ├── authApi.js
│   ├── axiosClient.js
│   └── refreshApi.js
│
├── components
│   ├── Navbar.jsx
│   └── ProtectedRoute.jsx
│
├── context
│   └── AuthContext.jsx
│
├── hooks
│   └── useAuth.js
│
├── pages
│   ├── Home.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   └── Profile.jsx
│
├── services
│   └── tokenService.js
│
├── routes
│   └── AppRoutes.jsx
│
├── App.jsx
└── main.jsx

---

🔐 Authentication Flow

User Login
      │
      ▼
Receive JWT + Refresh Token
      │
      ▼
Store Tokens in Local Storage
      │
      ▼
Axios Request Interceptor
Adds JWT to Every Request
      │
      ▼
Protected API
      │
      ▼
401 Unauthorized
      │
      ▼
Axios Response Interceptor
      │
      ▼
Refresh Token Endpoint
      │
      ▼
New JWT + Refresh Token
      │
      ▼
Retry Original Request

---

🚀 Getting Started

Clone the repository

git clone https://github.com/YOUR_USERNAME/SecureAuthLab.React.git

Navigate to the project

cd SecureAuthLab.React

Install dependencies

npm install

Configure Environment Variables

Create a .env file in the root directory.

VITE_API_BASE_URL=http://localhost:5248/api

Start the application

npm run dev

The application will be available at:

http://localhost:5173

---

🔗 Backend API

This project works together with the SecureAuthLab ASP.NET Core Web API.

Backend Repository:

https://github.com/amjadaz8s5-dev/SecureAuthLab

---

📚 What This Project Demonstrates

• Modern React Development
• React Context API
• JWT Authentication
• Refresh Token Rotation
• Axios Interceptors
• Protected Routing
• Authentication State Management
• REST API Integration
• Component-Based Architecture

---

📈 Future Improvements

• Role-Based Authorization
• Remember Me Functionality
• Dark Mode
• User Profile Management
• Password Reset
• Email Verification
• Unit Testing
• Docker Support
• CI/CD Pipeline

---

👨‍💻 Author

Amjad Ali Khan

Senior Full Stack .NET Developer

• ASP.NET Core
• React
• React Native
• AWS
• SQL Server

GitHub:

https://github.com/amjadaz8s5-dev

---

📄 License

This project is created for educational.