fix(backend): resolve issues in auth API endpoints, JWT strategy, and MongoDB connection

[harmeetsingh11]

Backend Fixes and Enhancements

Issue

The backend code had several issues that prevented proper functioning of API endpoints, including incorrect file naming, invalid routes, and improper authentication handling. These issues resulted in failure to connect to the database and authenticate users.

Description of Changes

1. Corrected Auth Router Endpoint:

   • The route for the auth router API endpoint was incorrect.
   • Fixed the route to align with the intended functionality.

2. Updated Logout Request Method:

   • Changed the HTTP method for the logout API from GET to POST.
   • This follows REST best practices.

3. Minor Fixes in authController.js:

   • Corrected HTTP status codes for consistent responses.
   • Added a JWT token to the response payload upon successful login.
   • Removed unnecessary console log statements for cleaner code.
   • Improved response messages for better clarity.

4. Fixed JWT Auth Strategy:

   • The getUser and logout API endpoints were failing because the JWT strategy only checked for tokens in cookies.
   • Updated the strategy to validate tokens from the Authorization header (bearer token).

---

Files Changed

1. app.js

   • Updated the authRouter configuration by ensuring it is correctly mounted at /api/auth. This ensures all authentication-related endpoints are accessible under this base route.

2. authRouter.js

   • Fixed incorrect endpoint routes.
   • Updated logout method to POST.

3. authController.js

   • Updated status codes, response payloads, and removed unnecessary logs.

4. jwt.strategy.js

   • Modified to check for tokens in the Authorization header.

---

Screenshots of API endpoints testing

1. API Testing: api/auth/signin

   • 

2. API Testing: api/auth/signup

   • 

3. API Testing: api/auth/user

   • 

4. API Testing: api/auth/logout

   • 

---

Checklist

• I have gone through the contributing guide
• I have updated my branch and synced it with project main branch before making this PR
• I have performed a self-review of my code
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers, screenshots, and videos after making the changes.
• I have commented my code, particularly in hard-to-understand areas.

@Anjaliavv51 please review this PR. Let me know if further adjustments are needed.
Thank you for reviewing this PR! 🙌

[github-actions]

Great job, @harmeetsingh11! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project.We will promptly review your changes and offer feedback. Keep up the excellent work!

[netlify]

✅ Deploy Preview for vintagevibe ready!

Name	Link
🔨 Latest commit	6137f3e
🔍 Latest deploy log	https://app.netlify.com/sites/vintagevibe/deploys/6785878a85e5750008a15025
😎 Deploy Preview	https://deploy-preview-873--vintagevibe.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Anjaliavv51]

@harmeetsingh11 will it be worked?

[Anjaliavv51]

And also more over I need Backend linked to my MongoDB account instead of your 's

[harmeetsingh11]

@Anjaliavv51 Yes, it'll work as expected, when someone setup project locally. To work on live link, the project needs to redeployed with backend, as backend is not deployed only frontend is deployed on netlify.
But before that, the backend is not correctly integrated with frontend. I have tested it, their is some issue in frontend when calling backend API's.

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀

[Anjaliavv51]

@harmeetsingh11 it's done what is the NXT step we have to do

[harmeetsingh11]

@Anjaliavv51 Thanks for merging the PR.

I tried to signin/signup using the frontend and noticed a significant issue: the backend APIs are not being called in frontend code. Instead, the signup/signin functionality is handled by Firebase, and the authentication logic for this implementation is incorrect/flawed. This further emphasizes the need for restructuring/refactoring the project.

I’ve been evaluating ways to improve a project that feels cluttered and unorganized. The project includes embedded CSS and JS logic within HTML files, repeated code, and irrelevant HTML, CSS, JS, and Python files that are not used in the project. There are excessively long HTML and CSS files, which makes it challenging to maintain, debug, and update the project effectively.

I’m considering two options to address these issues and would like know your thoughts on this:

Option 1: Convert to React with JWT Backend or Backend as a service like firebase, appwrite etc

• This would involve separating concerns with a React-based frontend and organizing the backend for better maintainability.
• The folder structure would follow industry standards, with reusable components, modular API routes, and authentication.

Proposed Folder Structure:

project/
├── client/                     # Frontend (React)
│   ├── public/                 # Static files
│   ├── src/
│   │   ├── assets/             # Images, fonts, etc.
│   │   ├── components/         # Reusable components
│   │   │   ├── Header.js
│   │   │   ├── Footer.js
│   │   │   ├── Navbar.js
│   │   │   └── ...
│   │   ├── context/            # Context API for global state management
│   │   │   └── AuthContext.js
│   │   ├── pages/              # Page components
│   │   │   ├── Home.js
│   │   │   ├── Login.js
│   │   │   ├── Signup.js
│   │   │   └── Dashboard.js
│   │   ├── services/           # API calls
│   │   │   ├── authService.js
│   │   │   └── ...
│   │   ├── styles/             # Global and component-specific styles
│   │   │   ├── App.css
│   │   │   ├── variables.css
│   │   │   └── ...
│   │   ├── App.js              # Main app component
│   │   ├── index.js            # Entry point
│   │   └── ...
├── server/                     # Backend
│   ├── config/                 # Configuration files
│   │   ├── db.js               # Database connection
│   │   └── jwtConfig.js        # JWT configurations
│   ├── controllers/            # Request handlers
│   │   ├── authController.js
│   │   └── ...
│   ├── middlewares/            # Middleware functions
│   │   ├── authMiddleware.js
│   │   └── errorMiddleware.js
│   ├── models/                 # Database models
│   │   ├── User.js
│   │   └── ...
│   ├── routes/                 # API routes
│   │   ├── authRoutes.js
│   │   └── ...
│   ├── utils/                  # Utility functions
│   │   └── ...
│   ├── .env                    # Environment variables
│   ├── server.js               # Entry point for the backend
│   └── package.json
├── .gitignore
└── README.md
 

Advantages:

• Clear separation of concerns between frontend and backend.
• Component-based architecture for reusable UI elements.
• it will improve code readability and reusability.
• Scalable and maintainable for long-term growth.
• JWT ensures secure user authentication and stateless sessions.

Disadvantages:

• Requires migrating to React, which might involve additional effort.
• New learning curve if contributors are not familiar with React or JWT.

---

Option 2: Improve the Existing Project

This would involve refactoring the current setup by separating CSS and JavaScript into their own directories while keeping the backend logic intact.

Proposed Folder Structure:

project/
├── public/                     # Static assets
│   ├── css/                    # All CSS files
│   │   ├── styles.css
│   │   └── ...
│   ├── js/                     # All JavaScript files
│   │   ├── main.js
│   │   ├── auth.js
│   │   └── ...
│   ├── images/                 # Images and icons
│   ├── index.html              # Main HTML file
│   └── ...
├── server/                     # Backend
│   ├── config/                 # Configuration files
│   │   └── db.js               # Database connection
│   ├── controllers/            # Logic for routes
│   │   ├── authController.js
│   │   └── ...
│   ├── routes/                 # API routes
│   │   ├── authRoutes.js
│   │   └── ...
│   ├── views/                  # Templates (HTML files)
│   │   ├── login.html
│   │   ├── dashboard.html
│   │   └── ...
│   ├── middlewares/            # Middleware functions
│   │   ├── authMiddleware.js
│   │   └── ...
│   ├── .env                    # Environment variables
│   ├── server.js               # Entry point for the backend
│   └── package.json
├── .gitignore
└── README.md

Advantages:

• Less time and effort required compared to migration.
• Maintains the existing technology stack.
• Gradual improvements can be made without breaking existing functionality.

Disadvantages:

• Limited scalability compared to a React-based architecture.
• Code may still be harder to manage due to embedded logic.
• Potentially more effort to achieve a modern, responsive UI.

---

Recommendation: If your goal is long-term maintainability and scalability, convert to React with a backend. If you prefer a quick cleanup for better organization, opt for improving the current structure with backend.

Looking forward to your advice. Let me know your thoughts on this.