How mtikcode/moji_jwt_auth works
Moji is a web application centered on account registration, sign-in, session persistence, protected user retrieval, and access to a chat page. The principal workflow is browser interaction through React forms, Zustand authentication state, Axios service calls, Express routing, JWT/session validation, and MongoDB-backed user data. The sampled code confirms authentication and profile retrieval; ChatAppPage is present in the tree, but its runtime behavior was not sampled.
Components 22
Frontend UI
- App Router
frontend/src/App.tsx - Sign-In Page
frontend/src/pages/SignInPage.tsx - Sign-Up Page
frontend/src/pages/SignUpPage.tsx - Chat Page
frontend/src/pages/ChatAppPage.tsx - Protected Route
frontend/src/components/auth/ProtectedRoute.tsx
Frontend Auth
- Sign-Up Form
frontend/src/components/auth/signup-form.tsx - Sign-In Form
frontend/src/components/auth/signin-form.tsx - Logout Control
frontend/src/components/auth/Logout.tsx - Auth Store
frontend/src/stores/useAuthStore.ts - Auth Service
frontend/src/services/authService.ts - API Client
frontend/src/lib/axios.ts
Backend Auth
- Express Server
backend/src/server.js - Auth Routes
backend/src/routes/authRoute.js - User Routes
backend/src/routes/userRoute.js - Auth Controller
backend/src/controllers/authController.js - User Controller
backend/src/controllers/userController.js - JWT Guard
backend/src/middlewares/authMiddleware.js
Persistence
- User Model
backend/src/models/User.js - Session Model
backend/src/models/Session.js - Database Connector
backend/src/libs/db.js
Other components
- Browser User
- MongoDB
Connections 25
- Browser User → App Router: opens app
- App Router → Sign-In Page: routes sign-in
- App Router → Sign-Up Page: routes sign-up
- App Router → Protected Route: protects routes
- Protected Route → Chat Page: allows chat
- Sign-In Page → Sign-In Form: renders form
- Sign-Up Page → Sign-Up Form: renders form
- Sign-In Form → Auth Store: submits credentials
- Sign-Up Form → Auth Store: submits registration
- Logout Control → Auth Store: requests logout
- Auth Store → Auth Service: calls auth API
- Auth Service → API Client: uses HTTP client
- API Client → Express Server: sends requests
- Express Server → Auth Routes: mounts auth routes
- Express Server → JWT Guard: guards users
- Express Server → User Routes: mounts user routes
- Auth Routes → Auth Controller: dispatches auth
- User Routes → User Controller: dispatches profile
- Auth Controller → User Model: reads or creates
- Auth Controller → Session Model: manages sessions
- JWT Guard → User Model: loads user
- JWT Guard → User Controller: passes user
- User Model → MongoDB: persists users
- Session Model → MongoDB: persists sessions
- Database Connector → MongoDB: connects database