feat(mobile): Add support for Basic Authentication (#6840)

mobile/lib/shared/providers/websocket.provider.dart

@@ -1,3 +1,5 @@
+import 'dart:convert';
+
 import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
@@ -106,6 +108,10 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
       final accessToken = Store.get(StoreKey.accessToken);
       try {
         final endpoint = Uri.parse(Store.get(StoreKey.serverEndpoint));
+        final headers = {"x-immich-user-token": accessToken};
+        if (endpoint.userInfo.isNotEmpty) {
+          headers["Authorization"] = "Basic ${base64.encode(utf8.encode(endpoint.userInfo))}";
+        }
 
         debugPrint("Attempting to connect to websocket");
         // Configure socket transports must be specified
@@ -118,7 +124,7 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
               .enableForceNew()
               .enableForceNewConnection()
               .enableAutoConnect()
-              .setExtraHeaders({"Authorization": "Bearer $accessToken"})
+              .setExtraHeaders(headers)
               .build(),
         );
 

mobile/lib/shared/services/api.service.dart

@@ -31,12 +31,12 @@ class ApiService {
       setEndpoint(endpoint);
     }
   }
-  String? _authToken;
+  String? _accessToken;
 
   setEndpoint(String endpoint) {
     _apiClient = ApiClient(basePath: endpoint);
-    if (_authToken != null) {
-      setAccessToken(_authToken!);
+    if (_accessToken != null) {
+      setAccessToken(_accessToken!);
     }
     userApi = UserApi(_apiClient);
     authenticationApi = AuthenticationApi(_apiClient);
@@ -134,8 +134,8 @@ class ApiService {
   }
 
   setAccessToken(String accessToken) {
-    _authToken = accessToken;
-    _apiClient.addDefaultHeader('Authorization', 'Bearer $accessToken');
+    _accessToken = accessToken;
+    _apiClient.addDefaultHeader('x-immich-user-token', accessToken);
   }
 
   ApiClient get apiClient => _apiClient;

mobile/lib/shared/ui/immich_image.dart

@@ -95,11 +95,11 @@ class ImmichImage extends StatelessWidget {
         },
       );
     }
-    final String? token = Store.get(StoreKey.accessToken);
+    final String? accessToken = Store.get(StoreKey.accessToken);
     final String thumbnailRequestUrl = getThumbnailUrl(asset, type: type);
     return CachedNetworkImage(
       imageUrl: thumbnailRequestUrl,
-      httpHeaders: {"Authorization": "Bearer $token"},
+      httpHeaders: {"x-immich-user-token": accessToken ?? ""},
       cacheKey: getThumbnailCacheKey(asset, type: type),
       width: width,
       height: height,
@@ -177,7 +177,7 @@ class ImmichImage extends StatelessWidget {
         getThumbnailUrlForRemoteId(assetId, type: type),
         cacheKey: getThumbnailCacheKeyForRemoteId(assetId, type: type),
         headers: {
-          "Authorization": 'Bearer ${Store.get(StoreKey.accessToken)}',
+          "x-immich-user-token": Store.get(StoreKey.accessToken),
         },
       );
 
@@ -195,10 +195,10 @@ class ImmichImage extends StatelessWidget {
         context,
       );
     } else {
-      final authToken = 'Bearer ${Store.get(StoreKey.accessToken)}';
+      final accessToken = Store.get(StoreKey.accessToken);
       // Precache the remote image since we are not using local images
       return precacheImage(
-        remoteThumbnailProvider(asset, type, {"Authorization": authToken}),
+        remoteThumbnailProvider(asset, type, {"x-immich-user-token": accessToken}),
         context,
       );
     }

mobile/lib/shared/ui/user_avatar.dart

@@ -13,7 +13,7 @@ Widget userAvatar(BuildContext context, User u, {double? radius}) {
     backgroundColor: context.primaryColor.withAlpha(50),
     foregroundImage: CachedNetworkImageProvider(
       url,
-      headers: {"Authorization": "Bearer ${Store.get(StoreKey.accessToken)}"},
+      headers: {"x-immich-user-token": Store.get(StoreKey.accessToken)},
       cacheKey: "user-${u.id}-profile",
     ),
     // silence errors if user has no profile image, use initials as fallback

mobile/lib/shared/ui/user_circle_avatar.dart

@@ -51,7 +51,7 @@ class UserCircleAvatar extends ConsumerWidget {
                 placeholder: (_, __) => Image.memory(kTransparentImage),
                 imageUrl: profileImageUrl,
                 httpHeaders: {
-                  "Authorization": "Bearer ${Store.get(StoreKey.accessToken)}",
+                  "x-immich-user-token": Store.get(StoreKey.accessToken),
                 },
                 fadeInDuration: const Duration(milliseconds: 300),
                 errorWidget: (context, error, stackTrace) => textIcon,