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.

*   [x] Create a Flutter package in the current directory (`.`) using the `create_project` tool with the `empty` flag.
*   [x] Remove the `lib/main.dart` and `test/` directory from the newly created package.
*   [x] 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`.
*   [x] Create a `README.md` file with a short placeholder description: "# phone_login".
*   [x] Create a `CHANGELOG.md` file with the initial version `0.1.0`.
*   [x] Commit this empty version of the package to the current branch with the commit message: "feat: initial project setup".
*   [x] After committing the changes, run the app with the `launch_app` tool on your preferred device.

**After this phase, you should:**

*   [x] Create/modify unit tests for testing the code added or modified in this phase, if relevant. (Not applicable in this phase)
*   [x] Run the `dart_fix` tool to clean up the code.
*   [x] Run the `analyze_files` tool one more time and fix any issues.
*   [x] Run any tests to make sure they all pass.
*   [x] Run `dart_format` to make sure that the formatting is correct.
*   [x] 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.
*   [x] 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.
*   [x] Use `git diff` to verify the changes that have been made, and create a suitable commit message for any changes.
*   [x] Wait for my approval before committing the changes or moving on to the next phase.
*   [x] After committing the change, if the app is running, use the `hot_reload` tool to reload it.

## Phase 2: Authentication Flow - UI and State

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

**After this phase, you should:**

*   [x] Follow the same verification steps as in Phase 1.

## Phase 3: Firebase Integration and Authentication Logic

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

**After this phase, you should:**

*   [x] Follow the same verification steps as in Phase 1.

## Phase 4: Home and Profile Screens

*   [x] Implement the `HomeScreen` with `LoggedOutHomeWidget` and `LoggedInHomeWidget`.
*   [x] Implement the `ProfileScreen` with the logout functionality.
*   [x] Connect the home and profile screens to the `AuthState` and `AuthRepository`.

**After this phase, you should:**

*   [x] 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.