BUG-Vague error message returned on invalid login credentials

[ShreyaLbs]

Description

The backend returns a generic unclear error message when a user enters wrong credentials making it hard for the user to understand what went wrong.

Goals

-[Help users clearly understand what went wrong when login fails]
-[Reduce user frustration and confusion during login]
-[Guide users to take the correct next step — whether that is checking their email, resetting password or signing up]
-[Improve overall user experience on the login page]

Expected Outcome

The backend should return a clear and helpful error message that helps the user understand what went wrong, such as "No account found with this email or MUID" or "Incorrect password, please try again."

Acceptance Criteria

• Wrong email or MUID shows → "No account found with this email or MUID"
  -Wrong password shows → "Incorrect password, please try again"
  -Inactive account shows → "Your account is inactive, please contact support"
  -Error message appears near the input field not at the bottom
  -Message is simple enough for any user to understand
  -Consistent styling across all error messages on the login page
  -Verified working on both password and OTP login modes

Implementation Details

Technologies Used:

• Python and Django REST Framework — to update the login view and return specific error messages
• Django's built in exception handling — to catch different login failure scenarios and return the correct message for each one
• React.js — to read the error message from the API response and display it correctly on the screen
• Tailwind CSS — to style the error message and position it near the input field

Technical Details:

• In the Django login view inside api/auth/ check each failure condition separately — if the email or MUID does not exist in the database return one message, if the password is wrong return a different message, if the account is inactive return another message
• Update the API response format to include a specific error code along with the message so the frontend can identify what type of error occurred and display it correctly
• On the React side read the error code from the API response and map it to the correct user friendly message to display on screen
• Use Django REST Framework's ValidationError to return proper 400 Bad Request responses with clear error details instead of a single generic message

Mockups / Wireframes

[Include links to any visual aids, mockups, wireframes, or diagrams that help illustrate what the final product should look like. This is not always necessary, but can be very helpful in many cases.]

[Please note that the below section of the ticket has to be in the format as mentioned as it is key to enabling proper listing of the project. Please only choose the options mentioned under the headings wherever applicable.]

Product Name

[Product Name: For eg: Beckn, Sunbird Obsrv etc]

Project Name

[Project Name: Descriptive of the ticket]

Tech Skills Needed:

[Required technical skills for the project]

Mentor(s)

[@Mentor1] [@mentor2] [@Mentor3]

Complexity

Pick one of [High]/[Medium]/[Low]

Category

Pick one or more of [CI/CD], [Integrations], [Performance Improvement], [Security], [UI/UX/Design], [Bug], [Feature], [Documentation], [Deployment], [Test], [PoC]

Sub Category

Pick one or more of [API], [Database], [Analytics], [Refactoring], [Data Science], [Machine Learning], [Accessibility], [Internationalization], [Localization], [Frontend], [Backend], [Mobile], [SEO], [Configuration], [Deprecation], [Breaking Change], [Maintenance], [Support], [Question], [Technical Debt], [Beginner friendly], [Research], [Reproducible], [Needs Reproduction].