warlock/tasktracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
8b42ea43b7
tasktracker/AUTH_README.md
warlock 8b42ea43b7 init
2025-10-07 21:54:06 +05:30

3.1 KiB
Raw Blame History

TaskTracker - Authentication UI

This Flutter application features a beautiful Material Design authentication system with OAuth support for Google, Facebook, and GitHub.

Features

🎨 Material Design 3

  • Modern Material Design 3 components
  • Custom color scheme with indigo primary color
  • Google Fonts (Poppins) for typography
  • Smooth animations and transitions

🔐 Authentication Screens

  • Login Screen: Email/password authentication with form validation
  • Register Screen: User registration with password confirmation and terms agreement
  • Tab-based Navigation: Smooth switching between login and register modes

🌐 OAuth Integration Ready

  • Google OAuth: Styled button with Google branding
  • Facebook OAuth: Styled button with Facebook branding
  • GitHub OAuth: Styled button with GitHub branding
  • Ready for Appwrite integration

📱 UI Components

Custom Text Fields

  • Material Design 3 styling
  • Form validation with error states
  • Password visibility toggle
  • Icon prefixes and suffixes
  • Proper focus states and animations

OAuth Buttons

  • Provider-specific colors and icons
  • Consistent styling across all providers
  • Hover and press states
  • Accessibility support

Form Validation

  • Email format validation
  • Password strength requirements
  • Password confirmation matching
  • Terms and conditions agreement
  • Real-time validation feedback

File Structure

lib/
├── main.dart                 # App entry point with Material 3 theming
├── screens/
│   ├── auth_screen.dart     # Main authentication container with tabs
│   ├── login_screen.dart    # Login form with validation
│   └── register_screen.dart # Registration form with validation
└── widgets/
    ├── custom_text_field.dart # Reusable text input component
    └── oauth_button.dart      # OAuth provider buttons

Dependencies

  • google_fonts: ^6.2.1 - For Poppins font family
  • flutter_svg: ^2.0.10+1 - For SVG icon support (ready for OAuth icons)

Integration with Appwrite

The UI is designed to work seamlessly with Appwrite authentication. To integrate:

  1. Add Appwrite SDK to pubspec.yaml
  2. Replace the TODO comments in login/register methods with actual Appwrite calls
  3. Implement OAuth handlers for Google, Facebook, and GitHub
  4. Add proper error handling and success navigation

Usage

Run the app to see the authentication UI:

flutter run

The app will display a beautiful authentication screen with login and register tabs, complete with OAuth buttons and form validation.

Customization

  • Colors: Modify the seedColor in main.dart to change the primary color
  • Fonts: Change the font family in the theme configuration
  • Styling: Adjust border radius, padding, and other design tokens in the theme
  • OAuth Providers: Add or remove OAuth providers by modifying the button lists

Next Steps

  1. Integrate with Appwrite SDK
  2. Add proper navigation after successful authentication
  3. Implement forgot password functionality
  4. Add loading states and error handling
  5. Implement biometric authentication (optional)