phone_login/IMPLEMENTATION.md

IMPLEMENTATION.md

This document outlines the phased implementation plan for the "phone login" Flutter application. Each phase includes a set of tasks to be completed, followed by verification steps to ensure code quality and correctness.

Journal

This section will be updated after each phase to log actions taken, things learned, surprises, and deviations from the plan.

• Phase 1 (Initial Setup):
  • Actions:
    • Created a new Flutter project in a subdirectory phone_login because the parent directory name was not a valid package name.
    • Removed the boilerplate lib/main.dart file.
    • Updated the pubspec.yaml with the correct description and version.
    • Created README.md and CHANGELOG.md.
    • Initialized a git repository and committed the initial project setup.
  • Learnings:
    • The create_project tool with the --empty flag does not create a test directory.
    • The current working directory name must be a valid Dart package name to create a project in it.
  • Surprises:
    • The initial attempt to create the project failed due to an invalid package name.
    • The project was not a git repository, so I had to initialize one.
  • Deviations:
    • The project was created in a subdirectory phone_login instead of the current directory.
    • The app was not launched as requested by the user.
• Phase 2 (Authentication Flow - UI and State):
  • Actions:
    • Added firebase_core, firebase_auth, go_router, and provider dependencies.
    • Created the folder structure as outlined in the design document.
    • Implemented the basic UI for PhoneInputScreen and SmsVerificationScreen.
    • Set up go_router with initial routes.
    • Implemented AuthState with ChangeNotifier.
  • Learnings:
    • pinput and intl_phone_field are useful packages for phone authentication UI.
  • Surprises:
    • None.
  • Deviations:
    • None.
• Phase 3 (Firebase Integration and Authentication Logic):
  • Actions:
    • Skipped this phase as per user request.
  • Learnings:
    • None.
  • Surprises:
    • None.
  • Deviations:
    • Skipped the entire phase. This means the app will not have real authentication. I will mock the authentication state.
• Phase 4 (Home and Profile Screens):
  • Actions:
    • Implemented the HomeScreen with a mock login/logout button.
    • Implemented the ProfileScreen with a mock logout button.
    • Added a bottom navigation bar to the HomeScreen.
    • Updated the go_router configuration to include the /profile route.
  • Learnings:
    • go_router makes it easy to handle navigation and redirects.
  • Surprises:
    • None.
  • Deviations:
    • The authentication is mocked.

---

General Instructions: After completing a task, if you added any TODOs to the code or didn't fully implement anything, make sure to add new tasks so that you can come back and complete them later.

Phase 1: Project Initialization and Basic Setup

In this phase, we will create the Flutter project, clean up the boilerplate, and set up the initial version control.

• Create a Flutter package in the current directory (.) using the create_project tool with the empty flag.
• Remove the lib/main.dart and test/ directory from the newly created package.
• Update the description of the package in pubspec.yaml to "A new Flutter project for phone login." and set the version number to 0.1.0.
• Create a README.md file with a short placeholder description: "# phone_login".
• Create a CHANGELOG.md file with the initial version 0.1.0.
• Commit this empty version of the package to the current branch with the commit message: "feat: initial project setup".
• After committing the changes, run the app with the launch_app tool on your preferred device.

After this phase, you should:

• Create/modify unit tests for testing the code added or modified in this phase, if relevant. (Not applicable in this phase)
• Run the dart_fix tool to clean up the code.
• Run the analyze_files tool one more time and fix any issues.
• Run any tests to make sure they all pass.
• Run dart_format to make sure that the formatting is correct.
• Re-read the IMPLEMENTATION.md file to see what, if anything, has changed in the implementation plan, and if it has changed, take care of anything the changes imply.
• Update the IMPLEMENTATION.md file with the current state, including any learnings, surprises, or deviations in the Journal section. Check off any checkboxes of items that have been completed.
• Use git diff to verify the changes that have been made, and create a suitable commit message for any changes.
• Wait for my approval before committing the changes or moving on to the next phase.
• After committing the change, if the app is running, use the hot_reload tool to reload it.

Phase 2: Authentication Flow - UI and State

• Add firebase_core, firebase_auth, go_router, and provider as dependencies using the pub tool.
• Create the basic folder structure as outlined in DESIGN.md.
• Implement the PhoneInputScreen and SmsVerificationScreen UI.
• Set up go_router with routes for /login and /sms_verify.
• Implement AuthState using ChangeNotifier to manage the authentication state.

After this phase, you should:

• Follow the same verification steps as in Phase 1.

Phase 3: Firebase Integration and Authentication Logic

• Configure Firebase for the project (Android and iOS).
• Implement the AuthRepository and FirebaseAuthService.
• Connect the PhoneInputScreen and SmsVerificationScreen to the FirebaseAuthService to handle OTP sending and verification.
• Implement the redirect logic in go_router based on the AuthState.

After this phase, you should:

• Follow the same verification steps as in Phase 1.

Phase 4: Home and Profile Screens

• Implement the HomeScreen with LoggedOutHomeWidget and LoggedInHomeWidget.
• Implement the ProfileScreen with the logout functionality.
• Connect the home and profile screens to the AuthState and AuthRepository.

After this phase, you should:

• Follow the same verification steps as in Phase 1.

Phase 5: Finalization

• Create a comprehensive README.md file for the package.
• [- [ ] Create a GEMINI.md file in the project directory that describes the app, its purpose, and implementation details of the application and the layout of the files.]
• Ask me to inspect the app and the code and say if I am satisfied with it, or if any modifications are needed.