Skip to content

feat(auth): Add field-level error handling and improved error parsing#95

Merged
ayshadogo merged 1 commit into
Dfunder:mainfrom
SudiptaPaul-31:fix-auth-errors
Jun 23, 2026
Merged

feat(auth): Add field-level error handling and improved error parsing#95
ayshadogo merged 1 commit into
Dfunder:mainfrom
SudiptaPaul-31:fix-auth-errors

Conversation

@SudiptaPaul-31

Copy link
Copy Markdown
Contributor

Summary

Correctly parses and displays all backend authentication error responses in the UI. Errors are mapped to user-friendly messages, shown in context (inline field errors or general alert), and automatically cleared when the user starts typing.


closes #61

Changes

src/features/auth/authThunks.js

  • Added parseAuthError helper that maps backend error codes to structured { message, field? } objects
  • Mapped codes: EMAIL_NOT_VERIFIED, INVALID_CREDENTIALS, EMAIL_TAKEN, USER_NOT_FOUND, INVALID_TOKEN, TOKEN_EXPIRED
  • registerUser and loginUser now call rejectWithValue(parseAuthError(err)) instead of passing the raw error

src/features/auth/authSlice.js

  • Added fieldErrors: {} to initial state for field-specific backend errors
  • Updated setAuthError to accept both plain strings and { message, field? } objects
  • Added clearAuthError action to reset both error and fieldErrors
  • registerUser.rejected and loginUser.rejected now populate fieldErrors when the error targets a specific field, otherwise populate general error

src/features/auth/authSelectors.js

  • Added selectAuthFieldErrors selector

src/pages/Login.jsx

  • Replaced local error / loading state with useSelector(selectAuthError) / useSelector(selectAuthLoading)
  • Error alert box now reads from Redux state and has role="alert" for accessibility
  • Both inputs dispatch clearAuthError on change
  • Dispatches clearAuthError on unmount to prevent stale errors bleeding into other pages
  • Fixed broken success check — now uses loginUser.fulfilled.match(result) instead of checking result.payload (which was truthy even on error)

src/pages/Register.jsx

  • Reads selectAuthError and selectAuthFieldErrors from Redux
  • fieldErrors.email (e.g. EMAIL_TAKEN) renders inline below the email field, falling back to yup validation error
  • General backend errors render in a red alert box above the submit button
  • handleFieldChange wrapper clears Redux errors on any field interaction
  • Dispatches clearAuthError on unmount
  • handleCreate uses registerUser.fulfilled.match(result) pattern, removed stale try/catch

Error Display Behavior

Error code Where it shows
INVALID_CREDENTIALS Red alert above submit button
EMAIL_NOT_VERIFIED Red alert above submit button
EMAIL_TAKEN Inline below the email field
USER_NOT_FOUND Inline below the email field
INVALID_TOKEN / TOKEN_EXPIRED Red alert above submit button
  • All errors clear as soon as the user types in any field
  • Errors are cleared on page unmount so they don't persist across navigation

@ayshadogo ayshadogo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your effort boss

@ayshadogo ayshadogo merged commit 3e3c7ad into Dfunder:main Jun 23, 2026
2 checks passed
@grantfox-oss grantfox-oss Bot mentioned this pull request Jun 23, 2026
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Display Auth Errors from Backend

2 participants