feat: Connect React Frontend Authentication UI to Spring Boot JWT Backend API

[King24Dave]

🐛 Problem Statement

The React frontend includes authentication UI components (login,
password reset flow) and Axios is set up for API communication,
but these are not yet connected to the Spring Boot JWT backend.
Users currently cannot log in, obtain tokens, or reset passwords
through the frontend. This is a critical blocker for any
user-facing functionality in GreenCode.

📋 Background

The backend already provides:

• JWT/OAuth authentication endpoints
• Swagger/OpenAPI documentation at /api/docs
• Centralised configuration via config/ and .env

The frontend already has:

• Login and password reset UI components in greencode-frontend/
• Axios installed for HTTP communication
• React Router for navigation
• Tailwind CSS for styling

These two layers need to be connected through a clean,
secure authentication flow.

✅ Acceptance Criteria

• Login form submits credentials to Spring Boot JWT endpoint
• JWT access token is stored securely (httpOnly cookie or
  memory — not localStorage)
• Axios instance includes Authorization header on
  all authenticated requests
• Password reset flow calls the backend reset API correctly
• Token refresh logic handles expired access tokens
• Protected React routes redirect unauthenticated users to login
• Error messages display correctly for invalid credentials
• Logout clears token and redirects to login page
• All auth flows tested with unit and integration tests

🔧 Suggested Approach

1. Create an authService.js in greencode-frontend/src/services/
   to handle login, logout, and token refresh calls
2. Configure a shared Axios instance with interceptors for
   token injection and 401 handling
3. Implement a React Context (AuthContext) to manage
   auth state globally
4. Add protected route wrapper component using React Router
5. Wire login and password reset forms to authService.js
6. Test all flows end-to-end via Swagger docs

📁 Files Likely Affected

• greencode-frontend/src/services/authService.js — new auth service
• greencode-frontend/src/context/AuthContext.jsx — new auth context
• greencode-frontend/src/api/axiosInstance.js — Axios config
• greencode-frontend/src/components/Login.jsx — wire up form
• greencode-frontend/src/components/PasswordReset.jsx — wire up form
• greencode-frontend/src/routes/ProtectedRoute.jsx — new guard
• greencode-frontend/src/App.jsx — wrap routes with auth context
• docs/ — update authentication documentation

🏷️ Labels

enhancement frontend authentication backend-integration

📌 Milestone

v1.0 — Full Stack Integration