Sign-In

The Sign-In module provides a complete authentication solution with support for email/password login and social authentication (Google, Apple). It includes form validation, error handling, and customizable UI components.

Overview

The Sign-In module is built using a compound component pattern, allowing for maximum flexibility and customization while maintaining consistency across your application.

Key Features

• Email/Password Authentication: Built-in form with validation
• Social Login: Google and Apple authentication support
• Customizable UI: Theme-aware components with style override capabilities
• Form Validation: Yup-based validation with custom validation support
• Responsive Design: Adapts to different screen sizes and orientations
• Accessibility: Screen reader support and keyboard navigation
• TypeScript: Full type safety throughout

Components

• SignIn - Main container component
• SignIn.Header - Header section with title and description
  • SignIn.Header.Title - Title text component
  • SignIn.Header.Description - Description text component
• SignIn.EmailForm - Email/password form components
  • SignIn.EmailForm.Inputs - Email and password inputs
  • SignIn.EmailForm.SigninButton - Submit button
  • SignIn.EmailForm.ForgotPassword - Forgot password link
  • SignIn.EmailForm.Spacing - Layout spacing component
• SignIn.SocialLogins - Social authentication components
  • SignIn.SocialLogins.GoogleLogin - Google authentication
  • SignIn.SocialLogins.AppleLogin - Apple authentication
  • SignIn.LoginWithSeparator - Visual separator
• SignIn.Footer - Footer section

Related Components

• Register - User registration component
• Reset Password - Password reset functionality
• Logout Button - User logout functionality