Implement password reset UI and backend APIfeat(auth): Connect React Frontend Authentication UI to Spring Boot JWT Backend API

[King24Dave]

📌 Related Issue

Closes #8

📋 Summary

This PR wires up the existing React authentication UI to the Spring Boot
JWT backend. Users can now log in, reset passwords, and access protected
routes through the frontend. A shared Axios instance handles token
injection and automatic 401 responses. Auth state is managed globally
via React Context.

🔧 Changes Made

New Files

• greencode-frontend/src/services/authService.js — login, logout,
  token refresh calls
• greencode-frontend/src/context/AuthContext.jsx — global auth
  state management
• greencode-frontend/src/api/axiosInstance.js — shared Axios
  instance with interceptors
• greencode-frontend/src/routes/ProtectedRoute.jsx — guards
  authenticated routes

Modified Files

• greencode-frontend/src/components/Login.jsx — wired to authService
• greencode-frontend/src/components/PasswordReset.jsx — wired to
  backend reset API
• greencode-frontend/src/App.jsx — wrapped routes with AuthContext
• docs/ — updated authentication documentation

🔐 Authentication Flow

User submits login form
        ↓
authService.js → POST /api/auth/login
        ↓
Spring Boot returns JWT access + refresh tokens
        ↓
Tokens stored securely (httpOnly cookie)
        ↓
Axios interceptor injects token on every request
        ↓
On 401 → auto refresh token → retry request
        ↓
On logout → clear tokens → redirect to /login

🧪 How to Test

1. Start the backend:

# With Docker
docker-compose up -d

# OR locally
./mvnw spring-boot:run

2. Start the frontend:

cd greencode-frontend
npm install
npm start
# Visit http://localhost:3000

3. Test key scenarios:

# Valid login
POST /api/auth/login
{ "email": "user@test.com", "password": "password123" }

# Invalid credentials (should show error message)
POST /api/auth/login
{ "email": "wrong@test.com", "password": "wrongpass" }

# Password reset
POST /api/auth/password-reset
{ "email": "user@test.com" }

# Access protected route without token
# Should redirect to /login

4. Run frontend tests:

cd greencode-frontend
npm test

✅ Checklist

• Login form connected to JWT backend endpoint
• JWT token stored securely (not in localStorage)
• Axios interceptor injects Authorization header
• Token refresh handles expired access tokens
• Password reset flow calls backend API correctly
• Protected routes redirect unauthenticated users
• Error messages display for invalid credentials
• Logout clears tokens and redirects to /login
• Unit and integration tests written and passing
• No breaking changes to existing backend endpoints
• Documentation updated in docs/

---

### ⚙️ Right side panel — set these:

| Field | What to set |
|---|---|
| **Reviewers** | Add your teammates |
| **Assignees** | Assign yourself |
| **Labels** | `enhancement`, `frontend`, `authentication` |
| **Milestone** | `v1.0 — Full Stack Integration` |
| **Linked Issue** | Link to Issue #8 |

---

## 💬 Commit Message — paste this:

feat(auth): connect React frontend authentication UI to Spring Boot JWT backend

### Extended description:

Closes #8

What changed

• Created authService.js to handle login, logout, and token refresh
• Added AuthContext for global authentication state management
• Configured shared Axios instance with request/response interceptors
• Added ProtectedRoute component to guard authenticated routes
• Wired Login and PasswordReset forms to backend API endpoints
• JWT tokens stored securely via httpOnly cookies
• Auto token refresh on 401 responses
• Logout clears tokens and redirects to /login

Why

The React frontend had authentication UI components but was not
connected to the Spring Boot JWT backend. Users could not log in
or reset passwords. This change completes the full-stack auth flow.

Tests

• Added unit tests for authService.js
• Added integration tests for login and password reset flows
• Added tests for protected route redirection

Breaking changes

None — all existing backend endpoints remain unchanged.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
green-code	Ready	Preview, Comment	Mar 29, 2026 5:23pm

In general, to fix this issue you should not disable Spring Security’s CSRF protection unless the application is guaranteed to be accessed only by non-browser clients that do not rely on cookies. Removing the explicit disablement will cause Spring to apply its default CSRF protection, which issues CSRF tokens and validates them on state-changing requests, mitigating CSRF attacks while preserving existing routing/authorization logic.

The best minimal fix here is to remove the .csrf(csrf -> csrf.disable()) call from the securityFilterChain configuration. This re-enables Spring Security’s default CSRF protection without altering which endpoints are permitted or authenticated. Since there is no visible custom CSRF configuration or alternative protection, we should simply let Spring manage CSRF. No other code changes in this file are required for the fix. Precisely, in src/main/java/com/greencode/config/SecurityConfig.java, edit the securityFilterChain method to delete line 24 and start the configuration directly with .authorizeHttpRequests(...). No new methods or imports are needed.