Build a Login Page with Auth Metrics Tracking

PROJECT CONTEXT:
The project is an investment-related app that needs a real login page with authentication and metrics tracking. The goal is not just to render a UI, but to implement working auth flows and capture measurable events around user access behavior.

GOAL:
Build a functional login page with real authentication, validation, error handling, and analytics events for key auth metrics so the app owner can measure user behavior around access and conversion.

REQUIREMENTS:
- Create a login page with email and password inputs
- Implement real authentication against the app's auth provider or backend
- Support login success and login failure states
- Validate email format and required password before submission
- Show clear error messages for invalid credentials and network failures
- Track metrics for page view, login attempt, login success, login failure, and logout
- Track failed login reason when possible, such as invalid credentials or network error
- Persist authenticated session so refresh does not immediately log the user out
- Redirect authenticated users to a protected app area after login
- Prevent unauthenticated users from viewing protected pages
- Add a simple metrics view or data output path so tracked events can be confirmed
- Ensure implementation works in the actual app, not only as a mock UI

CONSTRAINTS:
- Use the existing stack in the project instead of replacing it
- Do not fake authentication with local-only UI state unless explicitly labeled as temporary
- Do not claim analytics works unless events are actually sent or stored
- Keep the first version focused on auth metrics, not full product analytics

DEFINITION OF DONE:
- A user can enter valid credentials and access a protected page
- Invalid credentials produce a visible error and a tracked failed-login event
- A successful login produces a tracked success event with timestamp
- Refreshing the app preserves the authenticated session when supported by the auth provider
- Protected routes block unauthenticated access and redirect to login
- Login page view, submit attempt, success, failure, and logout events can be verified in storage, logs, or analytics output
- The implementation is wired to real auth logic and not just visual front-end behavior

COMMON FAILURES TO AVOID:
- Building a login form that looks complete but does not authenticate against a real backend or auth service
- Tracking metrics only in console logs without storing or sending them anywhere testable
- Redirecting after login without actually persisting the authenticated session
- Showing generic success states even when auth requests fail
- Leaving protected routes accessible because route guards were not implemented