Improve sign-in email screen with state management and error handling #370
Conversation
Improve sign-in form with loading states, detailed error messages, input validation feedback, and proper error handling for Clerk authentication responses
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
WalkthroughThe pull request modifies the sign-in email screen in an Expo application, introducing enhanced state management and error handling for the authentication process. The changes focus on improving the user experience during email-based sign-in by adding a submission state, implementing input validation, and providing more detailed error feedback. The modifications prevent multiple form submissions and offer clearer guidance when authentication attempts fail. Changes
Sequence DiagramsequenceDiagram
participant User
participant SignInForm
participant AuthService
User->>SignInForm: Enter email and password
SignInForm->>SignInForm: Validate inputs
SignInForm->>SignInForm: Set isSubmitting = true
SignInForm->>AuthService: Attempt sign-in
alt Sign-in Successful
AuthService-->>SignInForm: Authentication success
SignInForm->>SignInForm: Set isSubmitting = false
SignInForm->>User: Navigate to next screen
else Sign-in Failed
AuthService-->>SignInForm: Return error
SignInForm->>SignInForm: Display specific error message
SignInForm->>SignInForm: Set isSubmitting = false
end
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
coderabbitai
bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/expo/src/app/(auth)/sign-in-email.tsx (1)
51-60: Nice handling of the sign-in status.Logging the
completeSignIn.statusand providing user feedback if further verification is needed covers multiple sign-in states. Consider surfacing more detailed instructions if multi-factor authentication or any additional steps are required.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/expo/src/app/(auth)/sign-in-email.tsx(5 hunks)
🔇 Additional comments (11)
apps/expo/src/app/(auth)/sign-in-email.tsx (11)
25-25: Good addition for preventing double submissions.Initializing the new
isSubmittingstate is a well-structured approach for controlling submission flow and avoiding multiple concurrent form submissions.
30-30: Great usage of form state tracking.Listening to
errorsandisValidfrom the form state is a best practice that helps maintain a clean, declarative form experience.
37-37: Clear & responsive validation mode.Using
"onChange"mode provides immediate user feedback on each keystroke, improving the user experience.
41-42: Guard ensures no redundant operations.Checking
!isLoadedorisSubmittingbefore proceeding is a straightforward and effective way to prevent unintended sign-in attempts.
43-44: Resetting errors on each submission is good practice.Calling
setGeneralError("")once the submission begins helps avoid stale error messages from previous attempts.
48-48: Trimming the email is a useful safeguard.Applying
trim()before submitting avoids leading/trailing whitespace issues and potential login failures.
62-102: Comprehensive error handling logic.Catching errors, logging them, and switching on
clerkError.errors?.[0].codeensures clear and actionable feedback. The fallback message for unknown exceptions is a valid fallback strategy.
139-139: Simple yet effective display for general errors.Rendering the
generalErrortext conditionally helps keep the UI consistent. No changes needed here.
153-162: Well-handled email input and validation.
- Trimming input text on change helps mitigate accidental whitespaces.
- Dynamic border color clearly indicates validation errors.
- Disabling the field when
isSubmittingprevents unintended edits during submission.
182-192: Password input is consistent with email handling.The approach here matches that of the email input, providing consistent UX, validation, and submission gating.
203-209: Button states align with submission logic.
- Disabling the button when
!isValidorisSubmittingprevents accidental double submissions or incomplete form submissions.- Changing label text to "Signing in..." is user-friendly feedback.
Improve sign-in form with loading states, detailed error messages, input validation
feedback, and proper error handling for Clerk authentication responses
Summary by CodeRabbit
New Features
Bug Fixes
User Experience Improvements