- Add complete dark mode system with theme context and toggle - Implement dark mode toggle component in navigation menu - Add client-side routing with SSR-safe signal handling - Fix language selector styling for better dark mode compatibility - Add documentation system with mdBook integration - Improve navigation menu with proper external/internal link handling - Add comprehensive project documentation and configuration - Enhance theme system with localStorage persistence - Fix arena panic issues during server-side rendering - Add proper TypeScript configuration and build optimizations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
6.4 KiB
Authentication Error Handling Improvements Summary
Overview
This document summarizes the improvements made to the authentication context to handle error messages in the current language. Due to compatibility issues with newer Leptos versions and API changes, a simplified but functional approach was implemented.
Key Improvements Implemented
1. Enhanced Error Translation System
Files Modified:
template/content/en.ftl- Added comprehensive English error messagestemplate/content/es.ftl- Added Spanish translations for all error messages
New Error Messages Added:
# Authentication Errors
invalid-credentials = Invalid email or password
user-not-found = User not found
email-already-exists = An account with this email already exists
username-already-exists = This username is already taken
invalid-token = Invalid authentication token
token-expired = Your authentication token has expired
insufficient-permissions = You don't have permission to perform this action
account-not-verified = Please verify your email before signing in
account-suspended = Your account has been suspended
rate-limit-exceeded = Too many attempts. Please try again later
oauth-error = OAuth authentication error
database-error = A database error occurred. Please try again
internal-error = An internal error occurred. Please try again
validation-error = Please check your input and try again
authentication-failed = Authentication failed
server-error = Server error occurred. Please try again later
request-failed = Request failed. Please try again
unknown-error = An unknown error occurred
network-error = Network error. Please check your connection
login-failed = Login failed
registration-failed = Registration failed
session-expired = Your session has expired. Please sign in again
profile-update-failed = Failed to update profile
password-change-failed = Failed to change password
2. Error Handling Utilities
Created: template/client/src/auth/errors.rs
Features:
AuthErrorHandlerstruct for centralized error processing- Smart error mapping from server responses to translation keys
- Support for JSON API responses and plain text errors
- Fallback mechanisms for unknown errors
Key Functions:
impl AuthErrorHandler {
pub fn new(i18n: UseI18n) -> Self
pub fn map_error_to_localized_message(&self, error_text: &str) -> String
pub fn handle_auth_error(&self, error: &AuthError) -> String
pub fn handle_network_error(&self) -> String
pub fn handle_request_failure(&self, operation: &str) -> String
}
3. Updated Authentication Context
Modified: template/client/src/auth/context.rs
Improvements:
- All authentication operations now use localized error messages
- Consistent error handling across login, register, logout, profile updates
- Smart error mapping from server responses
- Session expiration handling with appropriate messages
4. Error Display Components
Created: template/client/src/auth/error_display.rs
Components provided:
AuthErrorDisplay- Full-featured alert-style error displayAuthErrorToast- Toast notification for non-blocking errorsInlineAuthError- Compact inline error displayAuthErrorExample- Example integration component
Technical Challenges Encountered
1. Leptos Version Compatibility
- Newer leptos-use versions (0.13+) have breaking API changes
- Signal API changes between Leptos versions
- Thread safety requirements changed (Rc vs Arc)
2. FluentBundle Thread Safety
- FluentBundle doesn't implement Send + Sync
- Required workarounds for context sharing
3. Closure Lifetime Issues
- Complex closure patterns in view macros
- FnOnce vs Fn trait requirements
Simplified Implementation Approach
Due to the compatibility issues, the final implementation focuses on:
- Core Error Translation: Essential error messages translated to English and Spanish
- Basic Error Mapping: Simple string matching for common error patterns
- Manual LocalStorage: Direct web_sys calls instead of leptos-use
- Simplified Context: Reduced complexity to ensure compilation
Usage Examples
Basic Error Display
#[component]
pub fn LoginForm() -> impl IntoView {
let auth = use_auth();
let i18n = use_i18n();
view! {
<div>
<Show when=move || auth.error().is_some()>
<div class="error-alert">
{move || auth.error().unwrap_or_default()}
</div>
</Show>
// ... rest of form
</div>
}
}
Custom Error Handling
#[component]
pub fn CustomErrorHandler() -> impl IntoView {
let i18n = use_i18n();
let error_handler = AuthErrorHandler::new(i18n.clone());
// Handle specific error
let error_message = error_handler.handle_request_failure("login");
view! {
<p>{error_message}</p>
}
}
Files Structure
template/
├── client/src/auth/
│ ├── context.rs # Enhanced auth context with i18n errors
│ ├── errors.rs # Error handling utilities
│ ├── error_display.rs # Reusable error display components
│ └── mod.rs # Module exports
├── content/
│ ├── en.ftl # English translations (enhanced)
│ └── es.ftl # Spanish translations (enhanced)
└── AUTH_ERROR_HANDLING.md # Detailed documentation
Benefits Achieved
- User Experience: All error messages now display in the user's preferred language
- Consistency: Standardized error handling across all authentication operations
- Maintainability: Centralized error mapping and translation system
- Extensibility: Easy to add new error messages and languages
- Fallback Safety: Always displays a meaningful message, even for unknown errors
Future Improvements
When Leptos ecosystem stabilizes, consider:
- Advanced Error Types: More granular error categorization
- Error Recovery: Automatic retry mechanisms
- Error Analytics: Track error patterns for UX improvements
- More Languages: Expand translation coverage
- Context-Aware Errors: Error messages based on user context
Conclusion
Despite technical challenges with dependency compatibility, the core goal was achieved: authentication errors now display in the user's current language with a robust fallback system. The implementation provides a solid foundation for future enhancements while maintaining backward compatibility.