Backend changes: - Add PATCH /api/users/me endpoint for profile updates (firstName, lastName, email) - Add PATCH /api/users/me/password endpoint for password change - Email change triggers re-verification flow (emailVerified=false, new verification token/code) - Send verification email automatically on email change - Return new JWT token when email changes (to update emailVerified status) - Add validation for profile update and password change - Create user controller with updateProfile and changePassword functions Frontend changes: - Add ProfilePage with tabbed interface (Profile & Password tabs) - Profile tab: Edit firstName, lastName, email - Password tab: Change password (requires current password) - Add Profile link to navigation bar - Add authAPI.updateProfile() and authAPI.changePassword() functions - Update AuthContext user data when profile is updated - Display success/error messages for profile and password updates Security: - Username cannot be changed (permanent identifier) - Email uniqueness validation - Password change requires current password - Email change forces re-verification to prevent hijacking User flow: 1. User edits profile and changes email 2. Backend sets emailVerified=false and generates new verification tokens 3. Verification email sent to new address 4. User must verify new email to access all features 5. Banner appears until email is verified
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.