fix(auth): correct field highlighting on login and signup errors

[yannickmonney]

Summary

• Login (Login field highlighted when the login failed #954): Remove isInvalid from both email and password fields on login failure. The error message still displays below the form, but no field is highlighted — preventing information leakage about which credential is wrong.
• Signup (Highlighted input is not correct signup process is failed #952): Route "user already exists" errors to the email field instead of the password field, so the correct field is highlighted when a duplicate email is used.

Fixes #952, fixes #954

Summary by CodeRabbit

• Bug Fixes
  • Updated form validation display on the login page.
  • Improved error handling in sign-up form to correctly attribute errors to the appropriate field based on error type.

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes modify error handling and validation display in authentication routes. In log-in.tsx, the isInvalid prop is removed from both email and password <Input> components, preventing visual error indicators on authentication failure. In sign-up.tsx, error routing logic is updated to conditionally assign errors to the email field when the error indicates a user already exists (via error code or message text), otherwise errors are assigned to the password field. Both email and password fields are now cleared at the start of form submission.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix(auth): use local state for login error to unblock submit button (#648) #670 — Refactors login error state to local loginError variable in log-in.tsx, closely related to error handling modifications in the same file.
• feat(platform): add isInvalid input prop, refactor auth errors, drop custom integrations #962 — Modifies error handling and input error states across both log-in.tsx and sign-up.tsx authentication components.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(auth): correct field highlighting on login and signup errors' clearly and concisely describes the main changes: fixing incorrect field highlighting behavior in authentication forms across both login and signup flows.
Linked Issues check	✅ Passed	The PR successfully addresses both linked issues: it removes field highlighting from login errors (#954) and routes 'user already exists' errors to the email field in signup (#952), matching the implementation details in the code changes.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the two issues: removing isInvalid props from login fields and updating error routing logic in signup. No unrelated modifications were introduced.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/auth-form-field-highlighting

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@services/platform/app/routes/_auth/sign-up.tsx`:
- Around line 112-118: Introduce a small helper (e.g., mapSignupErrorToField or
determineSignupErrorField) that takes the signup error object (use
result.error.code and result.error.message) and returns the target form field
name ('email' for USER_ALREADY_EXISTS / message includes "already exists",
otherwise 'password'); replace the duplicated conditional in sign-up flow(s) so
both call this helper and then call form.setError(field, { message: errorMessage
}) to keep logic centralized and avoid drift.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: d9251307-f42b-436d-b219-9411016cf9ba

📥 Commits

Reviewing files that changed from the base of the PR and between 058c549 and afec06c.

📒 Files selected for processing (2)

• services/platform/app/routes/_auth/log-in.tsx
• services/platform/app/routes/_auth/sign-up.tsx

💤 Files with no reviewable changes (1)

• services/platform/app/routes/_auth/log-in.tsx

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Deduplicate signup error-field mapping to avoid drift.

The same “duplicate user → email, else password” logic appears in two places. Extracting a helper will keep both paths consistent.

♻️ Proposed refactor

+  const mapAuthErrorToField = (error: { code?: string; message?: string }) => {
+    const errorMessage = error.message || t('signup.wrongCredentials');
+    const isUserExists =
+      error.code === 'USER_ALREADY_EXISTS' ||
+      errorMessage.toLowerCase().includes('already exists');
+    return {
+      field: isUserExists ? 'email' : 'password',
+      message: errorMessage,
+    } as const;
+  };

           onError: (ctx) => {
-            const errorMessage =
-              ctx.error.message || t('signup.wrongCredentials');
-            const isUserExists =
-              ctx.error.code === 'USER_ALREADY_EXISTS' ||
-              errorMessage.toLowerCase().includes('already exists');
-            form.setError(isUserExists ? 'email' : 'password', {
-              message: errorMessage,
-            });
+            const mapped = mapAuthErrorToField(ctx.error);
+            form.setError(mapped.field, { message: mapped.message });
           },

       if (result.error) {
         signUpStartedRef.current = false;
-        const errorMessage =
-          result.error.message || t('signup.wrongCredentials');
-        const isUserExists =
-          result.error.code === 'USER_ALREADY_EXISTS' ||
-          errorMessage.toLowerCase().includes('already exists');
-        form.setError(isUserExists ? 'email' : 'password', {
-          message: errorMessage,
-        });
+        const mapped = mapAuthErrorToField(result.error);
+        form.setError(mapped.field, { message: mapped.message });
         return;
       }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@services/platform/app/routes/_auth/sign-up.tsx` around lines 112 - 118,
Introduce a small helper (e.g., mapSignupErrorToField or
determineSignupErrorField) that takes the signup error object (use
result.error.code and result.error.message) and returns the target form field
name ('email' for USER_ALREADY_EXISTS / message includes "already exists",
otherwise 'password'); replace the duplicated conditional in sign-up flow(s) so
both call this helper and then call form.setError(field, { message: errorMessage
}) to keep logic centralized and avoid drift.