[Enhancement]: Add authentication to the frontend

[tomvothecoder]

Is your feature request related to a problem?

Integrate user authentication into the frontend, connecting to the FastAPI Users backend.

This will enable sign-in via GitHub OAuth, handle JWT cookies, and manage authenticated user sessions within the React app.

Describe the solution you'd like

Goals

• Connect frontend to FastAPI backend’s /auth/github OAuth flow
• Handle JWT-based session cookies (HTTP-only) for authenticated requests
• Display authenticated user state and profile info (via /users/me)
• Implement basic auth-aware routing (e.g., protected vs. public routes)
• Provide login/logout UI and feedback states

Frontend Implementation Steps

1. Auth Context / Hook

   • Create a global AuthContext with user state (user, loading, isAuthenticated, login, logout).
   • Fetch /users/me on load if cookie exists.

2. Axios Integration

   • Configure Axios instance to include withCredentials: true.
   • Handle 401/403 errors globally for session expiration.

3. OAuth Flow

   • Trigger GitHub OAuth login via backend redirect (/auth/github/authorize).
   • On successful redirect back, fetch user info and update state.
   • Fix cross-site cookie issue -- requires HTTPS -- in progress
     • Create cert and add to repo under /certs
     • Update all hosts to https
     • Test

4. Protected Routes

   • Implement a RequireAuth wrapper for private routes (e.g., Profile, Dashboard).

5. UI

   • Add Login and Logout buttons.
   • Show authenticated username or avatar in header.
   • Show loading or error state during authentication transitions.

Testing

• Verify cookie handling and user persistence after refresh.
• Test API call authentication via Axios (ensure withCredentials is working).
• Simulate expired or invalid tokens and check logout flow.
• End-to-end test: Login → Access protected page → Logout → Redirect to login.

Describe alternatives you've considered

No response

Additional context

Out of Scope

• Role-based permissions or fine-grained access control.
• Multi-provider OAuth (Google, ORCID, etc.) — to be tracked separately.

Additional Notes

• Use cookieSecure=false for local dev.

• Backend should already expose the following routes:

  • /auth/github
  • /auth/github/callback
  • /users/me

[tomvothecoder]

11/11/25

• Managed to integrate authentication in the frontend with cookie, but running into CORS cross-site origin issue.
• GitHub OAuth requires frontend and backend to be on the same origin, otherwise cookie fails to store.
• Now pivoting to [DevOps] Containerize the technology stack #23 to containerize the application and using Traefik to for HTTPS routing and local certificate handling, which should prevent CORS issues.