Google_Git_FB Login Module(FE/BE)

This README documents what is present in the shipped code, how to run the frontend, and the API surface the frontend expects. It is based strictly on the provided source files.

YOU MUST issue your own Google, Facebook, Github OAUTH API ID, SECRET at following links and also register your callback URI, which is explained in the screeshot (to use at Tetrees, Bridge URL + endpoints explained in README, or ask the AI; for your own domain, set up a callback URI using your own domain + endpoints) https://github.com/settings/developers https://console.cloud.google.com/apis/credentials https://developers.facebook.com/apps/

Features

• React single-page frontend with routing (react-router-dom)
  • Login page, Profile page, OAuth callback and bridge pages
  • Protected route wrapper that redirects unauthenticated users
• Lightweight loading/landing HTML (frontend/index.html)
• Typed TypeScript API client (frontend/src/api.ts)
  • fetchWithRetry to handle cold starts (retries on 503)
  • unwrapResponse to standardize error handling from API responses
  • Typed domain models: User, Pagination, HealthData, etc.
  • Endpoints for health check, user CRUD, current user, and OAuth redirect URLs
  • LocalStorage helpers for token and user persistence
• Minimal build/dev scripts using Vite
• Tailwind + React tooling included in package.json (devDeps)

Tech Stack

• TypeScript
• React 19
• react-router-dom
• Vite
• Tailwind (mentioned in devDependencies)
• ESLint + TypeScript ESLint for linting
• Project target: browser frontend (module), typed API client

Repository layout (relevant files)

• frontend/index.html — light loading UI + mounts React app at #root
• frontend/package.json — scripts and dependencies
• frontend/src/App.tsx — route configuration and ProtectedRoute
• frontend/src/api.ts — full API client with types, fetch/retry, and OAuth URL helpers
• (Other referenced components exist in App.tsx: components/Navbar, LoginPage, ProfilePage, AuthCallback, AuthBridge; not included in source snippet)

Setup / Usage

Prerequisites

• Node.js (recommended recent LTS)
• npm or yarn

Install and run (frontend directory)

1. cd frontend
2. npm install
3. npm run dev
   • Runs Vite dev server; by default it will serve the app at http://localhost:5173 (or another port Vite chooses)
4. Build: npm run build
5. Preview build: npm run preview

Type checking and linting

• npm run typecheck (tsc --noEmit)
• npm run lint / npm run lint:fix (eslint on src/)

Environment

• The API client reads import.meta.env.VITE_API_BASE_URL for the backend base URL. If not provided, it defaults to an empty string (meaning relative requests).
  • Example: VITE_API_BASE_URL=https://api.example.com npm run dev

Notes

• The code uses localStorage keys (e.g., 'auth_token', 'auth_user') for simple persistence (see api.ts).
• The frontend expects the backend to return a consistent ApiResponse<T> shape: { success: boolean; data: T } for successful responses. unwrapResponse will throw on success=false or non-OK HTTP status.

API endpoints (expected backend surface)

The frontend's API client is implemented in frontend/src/api.ts and documents and calls the following endpoints and behaviors. All endpoints return a JSON envelope of the shape ApiResponse<T> = { success: boolean; data: T } on success (as used by unwrapResponse).

• GET /health

  • Returns: HealthData
  • Used by: checkHealth()
  • HealthData fields: status, timestamp, bridge_url

• GET /api/users?limit=&offset=

  • Returns: { users: User[], pagination: Pagination }
  • Used by: getUsers(limit?, offset?)
  • Pagination fields: total, limit, offset, has_more

• GET /api/users/:id

  • Returns: User
  • Used by: getUser(id)

• PUT /api/users/:id

  • Authorization: optional Bearer token header
  • Payload: UpdateUserPayload (name?, bio?, phone?, location?, website?, avatar_url?)
  • Returns: updated User
  • Used by: updateUser(id, payload, token?)

• DELETE /api/users/:id

  • Authorization: optional Bearer token header
  • Returns: { message: string }
  • Used by: deleteUser(id, token?)

• GET /api/me

  • Authorization: requires Bearer token header
  • Returns: User (the authenticated user)
  • Used by: getMe(token)

• OAuth redirect endpoints (used to open provider flows; backend should redirect to provider)

  • GET /api/auth/google
    • Used by: getGoogleAuthUrl()
  • GET /api/auth/github
    • Used by: getGitHubAuthUrl()
  • GET /api/auth/facebook
    • Used by: getFacebookAuthUrl()

Client-side behaviors to be aware of

• fetchWithRetry will retry fetch calls up to 3 attempts and specifically retries on HTTP 503 (useful for serverless cold starts).
• unwrapResponse reads response JSON and expects { success: boolean; data: T }. If response.ok is false it attempts to parse the body for error/message fields and throws a useful Error.
• authHeaders(token?) builds headers with Content-Type: application/json and optional Authorization: Bearer <token>.
• Token and user persistence are performed via localStorage keys (token key shown as 'auth_token' and user key as 'auth_user' in api.ts). The file contains saveToken/getToken helpers (getToken truncated in snippet but saveToken is present).

Notes & Limitations (based on provided code)

• The repository snippet includes the main app router and the typed API client but does not include the implementations of components: Navbar, LoginPage, ProfilePage, AuthCallback, AuthBridge — App.tsx references them, so ensure those files exist in your copy.
• The backend implementation is not included. The frontend assumes the backend follows the endpoint contracts and JSON envelope described above.
• Some details in api.ts were truncated in the provided snippet (getToken implementation cut off), but saveToken and most API functions are present and usable. Review the full api.ts in your copy if you modify token persistence behavior.

If you want, I can:

• Produce a small checklist of missing component files to complete the app
• Generate minimal stub implementations for Navbar, LoginPage, ProfilePage, AuthCallback, and AuthBridge so the app runs end-to-end locally with a mocked backend.