kulakpos_web/walkthroughs/2026-04-13_e2512454_Walkthrough__Login_API_Integration.md

Walkthrough - Login API Integration

I have successfully integrated the login API into the Employee Portal application.

Changes Made

API Layer

• Created lib/api/login/login_api.dart using the dio package (the Flutter equivalent of Axios).
• Implemented a robust login method that handles JSON serialization and error states automatically.
• Added detailed debug logging for requests (URL, payload, headers) and responses/errors (status code, data, error types) to simplify troubleshooting.
• Integrated flutter_dotenv to manage the API base URL via an .env file, removing hardcoded URLs from the code.
• Created lib/api/profile/profile_api.dart for Profile API Integration, implementing token acquisition and employee detail retrieval.
• Fixed a critical URL formatting bug (leading space) in LoginApi.dart that caused connection errors.
• Enhanced login validation to properly handle successful authentication and store the logged-in NIK in a global auth_state.
• Refactored ProfilePage.dart to use the dynamic loggedInNik, ensuring it loads relevant employee data automatically after login.
• Implemented lib/utils/dialog_utils.dart, a modular Error Dialog utility that provides premium-styled popups for login failures and validation errors.
• Structured the API code to follow the axios style configuration highly requested by you.

UI Layer

• Modified lib/pages/login_page.dart to use the new LoginApi.
• Added a CircularProgressIndicator to the "Sign In" button to indicate an ongoing request.
• Implemented error handling to display messages from the API (e.g., "Invalid credentials" or connection issues).
• Maintained the existing CAPTCHA verification before proceeding with the API call.

Configuration

• Added the http package to pubspec.yaml to enable network requests.

Verification

Manual Test Steps

1. Enter Credentials: Input nik: "2231487" and password: "Eko54r99".
2. CAPTCHA: Enter the verification code displayed on the screen.
3. Submit: Click "Sign In".
4. Loading State: Observe the loading indicator on the button.
5. Success: Verify that you are redirected to the dashboard.
6. Failure: Try with incorrect credentials to verify the error message display.

---

Troubleshooting CORS (Flutter Web)

If you are running the app on Flutter Web, you will encounter a CORS error because the API server does not allow requests from localhost.

Recommended Fixes:

1. Mobile Emulator: Run the app on an Android Emulator or iOS Simulator.
2. Disable Web Security: Run the app with the following flag:

   flutter run -d chrome --web-browser-flag "--disable-web-security"
   

---

Note: Make sure your device has internet access to reach https://ess-api.ebi-ict.my.id.