Compass App: Basic auth (#2385)

This PR introduces basic auth implementation between the app and the
server as part of the architectural example.

This PR is a big bigger than the previous ones so I hope this
explanation helps:

### Server implementation

The server introduces a new endpoint `/login` to perform login requests,
which accepts login requests defined in the `LoginRequest` data class,
with an email and password.

The login process "simulates" checking on the email and password and
responds with a "token" and user ID, defined by the `LoginResponse` data
class. This is a simple hard-coded check and in any way a guide on how
to implement authentication, just a way to demonstrate an architectural
example.

The server also implements a middleware in
`server/lib/middleware/auth.dart`. This checks that the requests between
the app and the server carry a valid authorization token in the headers,
responding with an unauthorized error otherwise.

### App implementation

The app introduces the following new parts:

- `AuthTokenRepository`: In charge of storing the auth token.
- `AuthLoginComponent`: In charge of performing login.
- `AuthLogoutComponent`: In charge of performing logout.
- `LoginScreen` with `LoginViewModel`: Displays the login screen.
- `LogoutButton` with `LogoutViewModel`: Displays a logout button.

The `AuthTokenRepository` acts as the source of truth to decide if the
user is logged in or not. If the repository contains a token, it means
the user is logged in, otherwise if the token is null, it means that the
user is logged out. This repository is also a `ChangeNotifier`, which
allows listening to change in it.

The `GoRouter` has been modified so it listens to changes in the
`AuthTokenRepository` using the `refreshListenable` property. It also
implements a `redirect`, so if the token is set to `null` in the
repository, the router will redirect users automatically to the login
screen. This follows the example found in
https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/redirection.dart

On app start, `GoRouter` checks the `AuthTokenRepository`, if a token
exists the user stays in `/`, if not, the user is redirected to
`/login`.

The `ApiClient` has also been modified, so it reads the stored token
from the repository when performing network calls, and adds it to the
auth headers.

The two new components implement basic login and logout functionality.
The `AuthLoginComponent` will send the request using the `ApiClient`,
and then store the token from the response. The `AuthLogoutComponent`
clears the stored token from the repository, and as well clears any
existing itinerary configuration, effectively cleaning the app state.
Performing logout redirects the user to the login screen, as explained.

The `LoginScreen` uses the `AuthLoginComponent` internally, it displays
two text fields and a login button, plus the application logo on top. A
successful login redirects the user to `/`.

The `LogoutButton` replaces the home button at the `/`, and on tap it
will perform logout using the `AuthLogoutComponent`.

**Development target app**

The development target app works slightly different compared to the
staging build. In this case, the `AuthTokenRepository` always contains a
fake token, so the app believes it is always logged in.

Auth is only used in the staging build when the server is involved.

## Screenshots

<details>
<summary>Screenshots</summary>

The logout button in the top right corner:

![Screenshot from 2024-08-14
15-28-54](https://github.com/user-attachments/assets/1c5a37dc-9fa1-4950-917e-0c7272896780)

The login screen:

![Screenshot from 2024-08-14
15-28-12](https://github.com/user-attachments/assets/3c26ccc2-8e3b-42d2-a230-d31048af6960)


</details>

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md
[CLA]: https://cla.developers.google.com/
[Discord]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md

Author: miquelbeltran

compass_app/app/assets/logo.svg

@@ -1,9 +1,14 @@
 import 'package:provider/single_child_widget.dart';
 import 'package:provider/provider.dart';
 
+import '../domain/components/auth/auth_login_component.dart';
+import '../domain/components/auth/auth_logout_component.dart';
 import '../data/repositories/activity/activity_repository.dart';
 import '../data/repositories/activity/activity_repository_local.dart';
 import '../data/repositories/activity/activity_repository_remote.dart';
+import '../data/repositories/auth/auth_token_repository.dart';
+import '../data/repositories/auth/auth_token_repository_dev.dart';
+import '../data/repositories/auth/auth_token_repository_shared_prefs.dart';
 import '../data/repositories/continent/continent_repository.dart';
 import '../data/repositories/continent/continent_repository_local.dart';
 import '../data/repositories/continent/continent_repository_remote.dart';
@@ -13,8 +18,8 @@ import '../data/repositories/destination/destination_repository_remote.dart';
 import '../data/repositories/itinerary_config/itinerary_config_repository.dart';
 import '../data/repositories/itinerary_config/itinerary_config_repository_memory.dart';
 import '../data/services/api_client.dart';
-import '../ui/booking/components/booking_create_component.dart';
-import '../ui/booking/components/booking_share_component.dart';
+import '../domain/components/booking/booking_create_component.dart';
+import '../domain/components/booking/booking_share_component.dart';
 
 /// Shared providers for all configurations.
 List<SingleChildWidget> _sharedProviders = [
@@ -29,27 +34,44 @@ List<SingleChildWidget> _sharedProviders = [
     lazy: true,
     create: (context) => BookingShareComponent.withSharePlus(),
   ),
+  Provider(
+    lazy: true,
+    create: (context) => AuthLogoutComponent(
+      authTokenRepository: context.read(),
+      itineraryConfigRepository: context.read(),
+    ),
+  ),
 ];
 
 /// Configure dependencies for remote data.
 /// This dependency list uses repositories that connect to a remote server.
 List<SingleChildWidget> get providersRemote {
-  final apiClient = ApiClient();
-
   return [
-    Provider.value(
-      value: DestinationRepositoryRemote(
-        apiClient: apiClient,
+    ChangeNotifierProvider.value(
+      value: AuthTokenRepositorySharedPrefs() as AuthTokenRepository,
+    ),
+    Provider(
+      create: (context) => ApiClient(authTokenRepository: context.read()),
+    ),
+    Provider(
+      create: (context) => AuthLoginComponent(
+        authTokenRepository: context.read(),
+        apiClient: context.read(),
+      ),
+    ),
+    Provider(
+      create: (context) => DestinationRepositoryRemote(
+        apiClient: context.read(),
       ) as DestinationRepository,
     ),
-    Provider.value(
-      value: ContinentRepositoryRemote(
-        apiClient: apiClient,
+    Provider(
+      create: (context) => ContinentRepositoryRemote(
+        apiClient: context.read(),
       ) as ContinentRepository,
     ),
-    Provider.value(
-      value: ActivityRepositoryRemote(
-        apiClient: apiClient,
+    Provider(
+      create: (context) => ActivityRepositoryRemote(
+        apiClient: context.read(),
       ) as ActivityRepository,
     ),
     Provider.value(
@@ -61,8 +83,12 @@ List<SingleChildWidget> get providersRemote {
 
 /// Configure dependencies for local data.
 /// This dependency list uses repositories that provide local data.
+/// The user is always logged in.
 List<SingleChildWidget> get providersLocal {
   return [
+    ChangeNotifierProvider.value(
+      value: AuthTokenRepositoryDev() as AuthTokenRepository,
+    ),
     Provider.value(
       value: DestinationRepositoryLocal() as DestinationRepository,
     ),

compass_app/app/lib/config/dependencies.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/foundation.dart';
+
+import '../../../utils/result.dart';
+
+/// Repository to save and get auth token.
+/// Notifies listeners when the token changes e.g. user logs out.
+abstract class AuthTokenRepository extends ChangeNotifier {
+  /// Get the token.
+  /// If the value is null, usually means that the user is logged out.
+  Future<Result<String?>> getToken();
+
+  /// Store the token.
+  /// Will notifiy listeners.
+  Future<Result<void>> saveToken(String? token);
+
+  /// Returns true when the token exists, otherwise false.
+  Future<bool> hasToken() async {
+    final result = await getToken();
+    return result is Ok<String?> && result.value != null;
+  }
+}

compass_app/app/lib/data/repositories/auth/auth_token_repository.dart

@@ -0,0 +1,16 @@
+import '../../../utils/result.dart';
+import 'auth_token_repository.dart';
+
+/// Development [AuthTokenRepository] that always returns a fake token
+class AuthTokenRepositoryDev extends AuthTokenRepository {
+  @override
+  Future<Result<String?>> getToken() async {
+    return Result.ok('token');
+  }
+
+  @override
+  Future<Result<void>> saveToken(String? token) async {
+    notifyListeners();
+    return Result.ok(null);
+  }
+}

compass_app/app/lib/data/repositories/auth/auth_token_repository_dev.dart

@@ -0,0 +1,41 @@
+import 'package:shared_preferences/shared_preferences.dart';
+
+import '../../../utils/result.dart';
+import 'auth_token_repository.dart';
+
+/// [AuthTokenRepository] that stores the token in Shared Preferences.
+/// Provided for demo purposes, consider using a secure store instead.
+class AuthTokenRepositorySharedPrefs extends AuthTokenRepository {
+  static const _tokenKey = 'TOKEN';
+  String? cachedToken;
+
+  @override
+  Future<Result<String?>> getToken() async {
+    if (cachedToken != null) return Result.ok(cachedToken);
+
+    try {
+      final sharedPreferences = await SharedPreferences.getInstance();
+      final token = sharedPreferences.getString(_tokenKey);
+      return Result.ok(token);
+    } on Exception catch (e) {
+      return Result.error(e);
+    }
+  }
+
+  @override
+  Future<Result<void>> saveToken(String? token) async {
+    try {
+      final sharedPreferences = await SharedPreferences.getInstance();
+      if (token == null) {
+        await sharedPreferences.remove(_tokenKey);
+      } else {
+        await sharedPreferences.setString(_tokenKey, token);
+      }
+      cachedToken = token;
+      notifyListeners();
+      return Result.ok(null);
+    } on Exception catch (e) {
+      return Result.error(e);
+    }
+  }
+}

compass_app/app/lib/data/repositories/auth/auth_token_repository_shared_prefs.dart

@@ -3,14 +3,52 @@ import 'dart:io';
 import 'package:compass_model/model.dart';
 
 import '../../utils/result.dart';
+import '../repositories/auth/auth_token_repository.dart';
+
+typedef AuthTokenProvider = Future<String?> Function();
 
-// TODO: Basic auth request
 // TODO: Configurable baseurl/host/port
 class ApiClient {
+  ApiClient({
+    required AuthTokenRepository authTokenRepository,
+  }) : _authTokenRepository = authTokenRepository;
+
+  /// Provides the auth token to be used in the request
+  final AuthTokenRepository _authTokenRepository;
+
+  Future<void> _authHeader(HttpHeaders headers) async {
+    final result = await _authTokenRepository.getToken();
+    if (result is Ok<String?>) {
+      if (result.value != null) {
+        headers.add(HttpHeaders.authorizationHeader, 'Bearer ${result.value}');
+      }
+    }
+  }
+
+  Future<Result<LoginResponse>> login(LoginRequest loginRequest) async {
+    final client = HttpClient();
+    try {
+      final request = await client.post('localhost', 8080, '/login');
+      request.write(jsonEncode(loginRequest));
+      final response = await request.close();
+      if (response.statusCode == 200) {
+        final stringData = await response.transform(utf8.decoder).join();
+        return Result.ok(LoginResponse.fromJson(jsonDecode(stringData)));
+      } else {
+        return Result.error(const HttpException("Login error"));
+      }
+    } on Exception catch (error) {
+      return Result.error(error);
+    } finally {
+      client.close();
+    }
+  }
+
   Future<Result<List<Continent>>> getContinents() async {
     final client = HttpClient();
     try {
       final request = await client.get('localhost', 8080, '/continent');
+      await _authHeader(request.headers);
       final response = await request.close();
       if (response.statusCode == 200) {
         final stringData = await response.transform(utf8.decoder).join();
@@ -31,6 +69,7 @@ class ApiClient {
     final client = HttpClient();
     try {
       final request = await client.get('localhost', 8080, '/destination');
+      await _authHeader(request.headers);
       final response = await request.close();
       if (response.statusCode == 200) {
         final stringData = await response.transform(utf8.decoder).join();
@@ -52,6 +91,7 @@ class ApiClient {
     try {
       final request =
           await client.get('localhost', 8080, '/destination/$ref/activity');
+      await _authHeader(request.headers);
       final response = await request.close();
       if (response.statusCode == 200) {
         final stringData = await response.transform(utf8.decoder).join();

compass_app/app/lib/data/services/api_client.dart

@@ -0,0 +1,41 @@
+import 'package:compass_model/model.dart';
+import 'package:logging/logging.dart';
+
+import '../../../utils/result.dart';
+import '../../../data/repositories/auth/auth_token_repository.dart';
+import '../../../data/services/api_client.dart';
+
+/// Performs user login.
+class AuthLoginComponent {
+  AuthLoginComponent({
+    required AuthTokenRepository authTokenRepository,
+    required ApiClient apiClient,
+  })  : _authTokenRepository = authTokenRepository,
+        _apiClient = apiClient;
+
+  final AuthTokenRepository _authTokenRepository;
+  final ApiClient _apiClient;
+  final _log = Logger('AuthLoginComponent');
+
+  /// Login with username and password.
+  /// Performs login with the server and stores the obtained auth token.
+  Future<Result<void>> login({
+    required String email,
+    required String password,
+  }) async {
+    final result = await _apiClient.login(
+      LoginRequest(
+        email: email,
+        password: password,
+      ),
+    );
+    switch (result) {
+      case Ok<LoginResponse>():
+        _log.info('User logged int');
+        return await _authTokenRepository.saveToken(result.value.token);
+      case Error<LoginResponse>():
+        _log.warning('Error logging in: ${result.error}');
+        return Result.error(result.error);
+    }
+  }
+}