Okay, the code you provided is an excellent `AuthService` class for handling Firebase Authentication logic. To "develop this page," we need to create the UI (Flutter Widgets) that will *use* this service. I'll create the three main authentication pages based on your `AuthService`: 1. **`LoginPage`**: Allows users to sign in. 2. **`RegistrationPage`**: Allows new users to sign up. 3. **`ForgotPasswordPage`**: Allows users to request a password reset email. These pages will utilize the `AuthService` (provided via `Provider` in your `main.dart`) to perform the actions and handle errors gracefully. import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'services/auth_service.dart'; // Adjust import path if needed class LoginPage extends StatefulWidget { const LoginPage({super.key}); @override State createState() => _LoginPageState(); } class _LoginPageState extends State { final _formKey = GlobalKey(); final _emailController = TextEditingController(); final _passwordController = TextEditingController(); bool _isLoading = false; String? _errorMessage; @override void dispose() { _emailController.dispose(); _passwordController.dispose(); super.dispose(); } Future _login() async { if (_formKey.currentState!.validate()) { setState(() { _isLoading = true; _errorMessage = null; }); final authService = Provider.of(context, listen: false); try { await authService.loginWithEmail( _emailController.text.trim(), _passwordController.text.trim(), ); // AuthWrapper in main.dart will handle navigation on successful login if (mounted) { // Check if user's email is verified (AuthService stream handles auto-logout if not) final user = authService.currentUser; if (user != null && !user.emailVerified) { // Optionally show a message here, though the stream might log them out quickly ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('يرجى التحقق من بريدك الإلكتروني لتفعيل الحساب.')), ); // Don't set isLoading to false here, let the AuthWrapper handle redirection or logout } // If verified or verification not strictly required here, AuthWrapper handles it. } } catch (e) { if (mounted) { setState(() { _errorMessage = e.toString(); _isLoading = false; }); } } // No need to set isLoading = false on success, as navigation will occur } } @override Widget build(BuildContext context) { final theme = Theme.of(context); return Scaffold( // Use AppBar for consistency or remove if design dictates otherwise appBar: AppBar( title: const Text('تسجيل الدخول'), // Login automaticallyImplyLeading: false, // Remove back button if it's the initial route after splash ), body: Center( child: SingleChildScrollView( padding: const EdgeInsets.all(24.0), child: Form( key: _formKey, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // Optional: Add Logo Image.asset('assets/mo.png', height: 150), // Adjust path and size const SizedBox(height: 32), Text( 'مرحباً بعودتك!', // Welcome Back! style: theme.textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), const SizedBox(height: 8), Text( 'سجل الدخول للمتابعة', // Login to continue style: theme.textTheme.titleMedium, textAlign: TextAlign.center, ), const SizedBox(height: 32), // Email Field TextFormField( controller: _emailController, decoration: const InputDecoration( labelText: 'البريد الإلكتروني', // Email prefixIcon: Icon(Icons.email_outlined), border: OutlineInputBorder(), ), keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty || !value.contains('@')) { return 'الرجاء إدخال بريد إلكتروني صالح'; // Please enter a valid email } return null; }, ), const SizedBox(height: 16), // Password Field TextFormField( controller: _passwordController, decoration: const InputDecoration( labelText: 'كلمة المرور', // Password prefixIcon: Icon(Icons.lock_outline), border: OutlineInputBorder(), // Add suffix icon for visibility toggle if desired ), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return 'الرجاء إدخال كلمة المرور'; // Please enter your password } return null; }, ), const SizedBox(height: 8), // Forgot Password Link Align( alignment: Alignment.centerRight, child: TextButton( onPressed: () => Navigator.pushNamed(context, '/forgot-password'), child: const Text('نسيت كلمة المرور؟'), // Forgot Password? ), ), const SizedBox(height: 24), // Error Message Display if (_errorMessage != null) Padding( padding: const EdgeInsets.only(bottom: 16.0), child: Text( _errorMessage!, style: TextStyle(color: theme.colorScheme.error), textAlign: TextAlign.center, ), ), // Login Button _isLoading ? const Center(child: CircularProgressIndicator()) : ElevatedButton( onPressed: _login, style: ElevatedButton.styleFrom( padding: const EdgeInsets.symmetric(vertical: 16), textStyle: theme.textTheme.titleMedium?.copyWith(color: theme.colorScheme.onPrimary), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), child: const Text('تسجيل الدخول'), // Login ), const SizedBox(height: 24), // Registration Link Row( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('ليس لديك حساب؟'), // Don't have an account? TextButton( onPressed: () => Navigator.pushNamed(context, '/register'), child: const Text('إنشاء حساب جديد'), // Create a new account ), ], ), ], ), ), ), ), ); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'services/auth_service.dart'; // Adjust import path if needed class RegistrationPage extends StatefulWidget { const RegistrationPage({super.key}); @override State createState() => _RegistrationPageState(); } class _RegistrationPageState extends State { final _formKey = GlobalKey(); final _emailController = TextEditingController(); final _passwordController = TextEditingController(); final _confirmPasswordController = TextEditingController(); bool _isLoading = false; String? _errorMessage; @override void dispose() { _emailController.dispose(); _passwordController.dispose(); _confirmPasswordController.dispose(); super.dispose(); } Future _register() async { if (_formKey.currentState!.validate()) { setState(() { _isLoading = true; _errorMessage = null; }); final authService = Provider.of(context, listen: false); try { await authService.registerWithEmail( _emailController.text.trim(), _passwordController.text.trim(), ); // Show success message and prompt for verification if (mounted) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('تم التسجيل بنجاح! يرجى التحقق من بريدك الإلكتروني للتفعيل.'), duration: Duration(seconds: 5), // Longer duration ), ); // Navigate back to login or let AuthWrapper handle state Navigator.pop(context); // Go back to login page after showing message } } catch (e) { if (mounted) { setState(() { _errorMessage = e.toString(); _isLoading = false; }); } } finally { if (mounted && _errorMessage == null) { // Only set loading false if no error occurred // Let the navigation handle the state change, don't set isLoading here } else if (mounted) { setState(() { _isLoading = false; }); } } } } @override Widget build(BuildContext context) { final theme = Theme.of(context); return Scaffold( appBar: AppBar( title: const Text('إنشاء حساب جديد'), // Create New Account ), body: Center( child: SingleChildScrollView( padding: const EdgeInsets.all(24.0), child: Form( key: _formKey, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // Optional: Add Logo or Header Text( 'انضم إلينا!', // Join Us! style: theme.textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), const SizedBox(height: 8), Text( 'قم بإنشاء حسابك للبدء', // Create your account to get started style: theme.textTheme.titleMedium, textAlign: TextAlign.center, ), const SizedBox(height: 32), // Email Field TextFormField( controller: _emailController, decoration: const InputDecoration( labelText: 'البريد الإلكتروني', // Email prefixIcon: Icon(Icons.email_outlined), border: OutlineInputBorder(), ), keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty || !value.contains('@')) { return 'الرجاء إدخال بريد إلكتروني صالح'; // Please enter a valid email } return null; }, ), const SizedBox(height: 16), // Password Field TextFormField( controller: _passwordController, decoration: const InputDecoration( labelText: 'كلمة المرور', // Password prefixIcon: Icon(Icons.lock_outline), border: OutlineInputBorder(), ), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return 'الرجاء إدخال كلمة المرور'; // Please enter a password } if (value.length < 6) { return 'كلمة المرور يجب أن تكون 6 أحرف على الأقل'; // Password must be at least 6 characters } return null; }, ), const SizedBox(height: 16), // Confirm Password Field TextFormField( controller: _confirmPasswordController, decoration: const InputDecoration( labelText: 'تأكيد كلمة المرور', // Confirm Password prefixIcon: Icon(Icons.lock_outline), border: OutlineInputBorder(), ), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return 'الرجاء تأكيد كلمة المرور'; // Please confirm your password } if (value != _passwordController.text) { return 'كلمتا المرور غير متطابقتين'; // Passwords do not match } return null; }, ), const SizedBox(height: 24), // Error Message Display if (_errorMessage != null) Padding( padding: const EdgeInsets.only(bottom: 16.0), child: Text( _errorMessage!, style: TextStyle(color: theme.colorScheme.error), textAlign: TextAlign.center, ), ), // Register Button _isLoading ? const Center(child: CircularProgressIndicator()) : ElevatedButton( onPressed: _register, style: ElevatedButton.styleFrom( padding: const EdgeInsets.symmetric(vertical: 16), textStyle: theme.textTheme.titleMedium?.copyWith(color: theme.colorScheme.onPrimary), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), child: const Text('إنشاء حساب'), // Create Account ), const SizedBox(height: 24), // Login Link Row( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('لديك حساب بالفعل؟'), // Already have an account? TextButton( onPressed: () => Navigator.pop(context), // Go back to previous screen (likely Login) child: const Text('تسجيل الدخول'), // Login ), ], ), ], ), ), ), ), ); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'services/auth_service.dart'; // Adjust import path if needed class ForgotPasswordPage extends StatefulWidget { const ForgotPasswordPage({super.key}); @override State createState() => _ForgotPasswordPageState(); } class _ForgotPasswordPageState extends State { final _formKey = GlobalKey(); final _emailController = TextEditingController(); bool _isLoading = false; String? _errorMessage; bool _emailSent = false; @override void dispose() { _emailController.dispose(); super.dispose(); } Future _sendResetEmail() async { if (_formKey.currentState!.validate()) { setState(() { _isLoading = true; _errorMessage = null; _emailSent = false; }); final authService = Provider.of(context, listen: false); try { await authService.resetPassword(_emailController.text.trim()); if (mounted) { setState(() { _isLoading = false; _emailSent = true; // Show success message }); } } catch (e) { if (mounted) { setState(() { _errorMessage = e.toString(); _isLoading = false; }); } } } } @override Widget build(BuildContext context) { final theme = Theme.of(context); return Scaffold( appBar: AppBar( title: const Text('إعادة تعيين كلمة المرور'), // Reset Password ), body: Center( child: SingleChildScrollView( padding: const EdgeInsets.all(24.0), child: Form( key: _formKey, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Icon(Icons.lock_reset_outlined, size: 80, color: theme.colorScheme.primary), const SizedBox(height: 24), Text( 'هل نسيت كلمة المرور؟', // Forgot Your Password? style: theme.textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), const SizedBox(height: 8), Text( 'أدخل بريدك الإلكتروني المسجل لتلقي رابط إعادة التعيين.', // Enter your registered email to receive the reset link. style: theme.textTheme.titleMedium, textAlign: TextAlign.center, ), const SizedBox(height: 32), // Email Field TextFormField( controller: _emailController, decoration: const InputDecoration( labelText: 'البريد الإلكتروني', // Email prefixIcon: Icon(Icons.email_outlined), border: OutlineInputBorder(), ), keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty || !value.contains('@')) { return 'الرجاء إدخال بريد إلكتروني صالح'; // Please enter a valid email } return null; }, ), const SizedBox(height: 24), // Error Message Display if (_errorMessage != null) Padding( padding: const EdgeInsets.only(bottom: 16.0), child: Text( _errorMessage!, style: TextStyle(color: theme.colorScheme.error), textAlign: TextAlign.center, ), ), // Success Message Display if (_emailSent) Padding( padding: const EdgeInsets.only(bottom: 16.0), child: Text( 'تم إرسال رابط إعادة التعيين إلى بريدك الإلكتروني. يرجى التحقق منه.', // Reset link sent. Please check your email. style: TextStyle(color: Colors.green.shade700), textAlign: TextAlign.center, ), ), // Send Reset Link Button _isLoading ? const Center(child: CircularProgressIndicator()) : ElevatedButton( onPressed: _sendResetEmail, style: ElevatedButton.styleFrom( padding: const EdgeInsets.symmetric(vertical: 16), textStyle: theme.textTheme.titleMedium?.copyWith(color: theme.colorScheme.onPrimary), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), child: const Text('إرسال رابط إعادة التعيين'), // Send Reset Link ), const SizedBox(height: 24), // Back to Login Link TextButton( onPressed: () => Navigator.pop(context), // Go back child: const Text('العودة إلى تسجيل الدخول'), // Back to Login ), ], ), ), ), ), ); } } **Key Features Implemented:** 1. **UI Structure:** Uses `Scaffold`, `AppBar`, `Center`, `SingleChildScrollView`, `Form`, `Column`, `TextFormField`, `ElevatedButton`, `TextButton`, `SizedBox`. 2. **Input Validation:** Uses `Form` and `validator` properties on `TextFormField`s. 3. **State Management:** Uses `StatefulWidget` to manage loading states (`_isLoading`) and error messages (`_errorMessage`). 4. **Service Integration:** Uses `Provider.of(context, listen: false)` to access your service methods (`loginWithEmail`, `registerWithEmail`, `resetPassword`). 5. **Loading Indicators:** Shows a `CircularProgressIndicator` while asynchronous operations are in progress. 6. **Error Handling:** Catches exceptions from `AuthService` and displays the user-friendly error messages (generated by `_handleFirebaseError`) on the screen. 7. **User Feedback:** Uses `ScaffoldMessenger` to show success messages (like after registration or sending the reset link). 8. **Navigation:** Includes buttons/links to navigate between Login, Registration, and Forgot Password pages using `Navigator.pushNamed` or `Navigator.pop`. The `AuthWrapper` in your `main.dart` should handle navigating to `/home` after successful login/verification. 9. **Email Verification:** The registration page informs the user about email verification, and the login page implicitly relies on the `AuthService` stream logic to handle unverified users. 10. **Professional Look:** Uses standard Material Design components, padding, and text styling. Added icons and placeholder logos/headers. Make sure you have correctly set up the routes (`/login`, `/register`, `/forgot-password`) in your `main.dart` file as shown previously.