needs to improve the login poopup and can be bypased easily

[aucxtix]

Description

I noticed that the login popup/modal can be bypassed very easily from the client side, which may allow users to access restricted UI sections without proper authentication checks.

Additionally, the current login UI/UX feels inconsistent and could be improved for better usability and security perception.

Current Behavior

• Login modal can be dismissed/bypassed easily.
• Certain actions/pages may still remain accessible.
• UI alignment and responsiveness feel inconsistent.

Expected Behavior

• Protected actions/routes should always verify authentication state properly.
• Login modal should not be bypassable for restricted functionality.
• Better UI feedback and cleaner UX flow.

Possible Improvements

Security

• Add proper route protection.
• Validate auth state on backend/server side.
• Avoid relying only on frontend modal visibility.

UI/UX

• Improve modal responsiveness.
• Add loading/error states.
• Improve spacing, button hierarchy, and accessibility.

Reproduction Steps

1. Open application
2. Trigger login modal
3. Close/inspect/bypass modal
4. Observe access to restricted functionality

Suggested Tech Improvements

• Middleware/Auth guards
• Token/session validation
• Better modal state handling

I would like to work on this issue.

[aucxtix]

I am GSSoC contributor 2026 I would like to work on this issue.

[Shrinivas9370]

Hi @Charushi06 ,

I would like to work on this issue. I’ve reviewed the description and identified that the core vulnerability lies in client-side state reliance rather than a unified Middleware/Auth Guard strategy. As a developer experienced in the MERN stack and Next.js, I can implement a solution that secures the application logic while modernizing the UX.

My Proposed Technical Fix
Server-Side Auth Guard: I will implement/refine a Middleware layer to intercept requests to protected routes. By validating the [JWT/Session Token] on the server side, we ensure that even if a user bypasses the frontend modal, the backend will reject unauthorized data fetching.

State-Synchronized UI: I will refactor the login modal to trigger based on a global authentication state (e.g., Redux or Context API) and implement Route Guards to redirect unauthenticated users, preventing "flicker" or manual bypass via the Inspector tool.

UI/UX Refinement: I'll enhance the modal using a mobile-first approach, adding:

Skeleton loaders and disabled states during auth requests.

ARIA labels for better accessibility.

Improved button hierarchy and responsive spacing for a cleaner look.

Relevant Experience
Backend & Security: I have extensive experience building full-stack applications (MERN/Spring Boot) where I’ve implemented Role-Based Access Control (RBAC) and secure CI/CD pipelines.

MERN & Next.js: I am proficient in handling complex state management and building custom middleware for authentication flows.

Problem Solving: I hold a Knight rank on LeetCode (1603 rating), ensuring that my code is not only functional but also optimized and secure.

Action Plan
Step 1: Audit current route protection and implement a robust Middleware/Auth Guard.

Step 2: Ensure the backend validates tokens for all restricted API calls.

Step 3: Overhaul the Login UI for responsiveness and user feedback.

I am ready to start immediately. Could you please assign this to me?

[Mantra-17]

Hi, @Charushi06 I am a GSSoC'26 Contributor and would like to work on this issue, please assign it to me

[Charushi06]

Assigned @aucxtix

[aucxtix]

please review @Charushi06
#1014