fix(build): ensure fresh Flutter build on each deploy

- Add flutter clean before build to prevent stale cached artifacts
- Add VERSION build arg for explicit cache busting
- Reorder build steps: clean → pub get → build_runner → health.json → build
- Replace deprecated dart:html with package:web in iframe_view_web.dart
- Add lint ignore to generate_health_json.dart

Fixes issue where Docker layer caching kept old main.dart.js
while regenerating health.json with new version number.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitignore

@@ -13,11 +13,12 @@ pubspec.lock
 *.gr.dart
 *.mocks.dart
 
-# Keep version.g.dart - it's generated but should be committed
-# so CI/CD builds have version info without running the generator
-# Other *.g.dart files (from json_serializable, etc.) are ignored
+# All generated *.g.dart files (from json_serializable, riverpod, version_builder)
+# These are regenerated by build_runner during CI/CD builds
 lib/**/*.g.dart
-!lib/version.g.dart
+
+# Generated health.json (regenerated by tool/generate_health_json.dart during build)
+web/health.json
 
 # IDE
 .idea/

AGENTS.md

@@ -22,14 +22,20 @@ This document contains instructions and documentation references for AI assistan
   * Related repos: , `core-api`, `tatlock`, `library-desk`, `scheduler`, `portainer-core`
 
 ### 🐳 Deployment & Infrastructure
+
+**⚠️ IMPORTANT: Service Port Reference**
+| Service | LAN Port | External URL | Notes |
+|---------|----------|--------------|-------|
+| **Core API** | 8083 | `api.schweitz.net` | FastAPI backend for this UI |
+| **Tatlock API** | 8000 | `tatlock.schweitz.net` | Legacy Python API (Ollama proxy) |
+| **Tatlock UI** | 9999 | `home.schweitz.net` | This Flutter app |
+
 * **Full stack documentation**: Available in the `portainer-core` repo
-  * Access: `curl http://localhost:3002/jpmschweitzer/portainer-core/raw/branch/main/CONTAINERS.md`
+  * Access: `curl http://192.168.86.149:3002/jpmschweitzer/portainer-core/raw/branch/main/CONTAINERS.md`
   * Contains: All service ports, URLs, Redis DB allocations, external domains
-* **Tatlock deployment**:
-  * LAN: `http://192.168.86.149:8000`
-  * External: `tatlock.schweitz.net` (behind Authentik SSO)
-  * Redis DBs: 1 (memory), 6 (benchmarks)
-* **Health check**: `curl http://192.168.86.149:8000/health`
+* **Health checks**:
+  * Core API: `curl http://192.168.86.149:8083/health`
+  * Tatlock API: `curl http://192.168.86.149:8000/health`
 
 ### 🛡️ Git Discipline
 * **Commit Messages:** Use the [Conventional Commits](https://www.conventionalcommits.org/) format.

CHANGELOG.md

@@ -7,6 +7,113 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.0] - 2026-01-04
+
+### Changed
+- **Dockerfile rebuild fix**: Added `flutter clean` before build to prevent stale cached artifacts
+  - VERSION build arg added for explicit cache busting
+  - Reordered build steps: clean → pub get → build_runner → health.json → flutter build
+  - Ensures deployed app always matches the version in health.json
+
+### Fixed
+- Replaced deprecated `dart:html` with `package:web` in iframe_view_web.dart
+  - Uses `web.HTMLIFrameElement` instead of `html.IFrameElement`
+  - Fixes deprecation warnings for Flutter 3.x web builds
+
+## [1.0.12] - 2026-01-04
+
+### Changed
+- Removed login page - auth now auto-initiates from AppScaffold
+  - No more redirect to /login, just auto-start OIDC if not authenticated
+  - Shows loading screen during auth, error screen on failure with retry
+  - Seamless experience when Authentik session exists
+
+### Removed
+- Removed /login route and _LoginPage widget
+
+## [1.0.11] - 2026-01-04
+
+### Changed
+- Web auth now extracts user info directly from JWT instead of syncing with core-api
+  - Eliminates CORS preflight issues with /auth/sync endpoint
+  - Decodes JWT claims (name, email, groups) client-side
+  - Bearer token will be used for API authentication
+
+## [1.0.10] - 2026-01-04
+
+### Fixed
+- Fixed OIDC callback route being redirected to login before processing
+  - Moved callback route exception check BEFORE the auth redirect check in router
+  - This was preventing token exchange from ever happening
+- Added favicon.ico to web root for proper browser tab icon display
+
+## [1.0.9] - 2026-01-04
+
+### Fixed
+- Fixed OIDC callback Riverpod state modification error
+  - Deferred callback processing to `addPostFrameCallback` to avoid modifying state during widget build
+
+## [1.0.8] - 2026-01-04
+
+### Changed
+- Switched from hash-based URLs (`/#/login`) to path-based URLs (`/login`)
+  - Required for OIDC callback to work correctly
+  - Uses conditional import to avoid breaking mobile/desktop builds
+
+## [1.0.7] - 2026-01-04
+
+### Fixed
+- Fixed OIDC PKCE state loss across browser redirect
+  - Code verifier and state now persist in sessionStorage instead of memory
+  - Prevents "No code verifier" error after Authentik redirect
+
+## [1.0.6] - 2026-01-04
+
+### Fixed
+- Fixed version generation in CI/CD builds
+- Removed generated files (version.g.dart, health.json) from git tracking
+- These files are now regenerated from pubspec.yaml during Docker build
+
+## [1.0.5] - 2026-01-04
+
+### Changed
+- **Web authentication now uses OIDC** instead of NPM forward auth
+  - Added `OidcServiceWeb` for browser redirect-based Authorization Code flow with PKCE
+  - Added `/callback` route to handle Authentik redirect after login
+  - Login page now shows "Sign in with Authentik" button for both web and mobile
+  - Tokens stored in SharedPreferences and synced with core-api via `/auth/sync`
+- Added web utility functions (`web_utils.dart`) with conditional imports for non-web platforms
+- Added `crypto` and `web` packages for PKCE SHA-256 and browser API access
+
+### Fixed
+- Removed cross-origin cookie dependency that caused authentication failures on web
+
+## [1.0.4] - 2026-01-03
+
+### Added
+- `health.json` generated at build time with app version info
+- `health.html` now displays version, title, and status from health.json
+
+## [1.0.3] - 2026-01-03
+
+### Fixed
+- Fixed auth endpoint path: `/auth/me` → `/auth/users/me`
+
+## [1.0.2] - 2026-01-03
+
+### Fixed
+- Production Docker build now uses correct API URLs
+  - Added `--dart-define` flags for `CORE_API_URL` and `TATLOCK_API_URL`
+  - This enables `requiresAuth=true` so authentication is actually triggered
+- Updated AGENTS.md with clear service port reference table
+
+## [1.0.1] - 2026-01-03
+
+### Fixed
+- Web authentication now works correctly with NPM forward auth
+  - Dio client sends cookies with requests via `withCredentials: true`
+  - Added platform-specific adapters (native vs web) for proper cookie handling
+
 ## [1.0.0] - 2026-01-03
 
 ### Added

Dockerfile

@@ -3,20 +3,34 @@ FROM ghcr.io/cirruslabs/flutter:stable AS builder
 
 WORKDIR /app
 
-# Copy dependency files first for better caching
-COPY pubspec.yaml ./
+# VERSION arg busts cache when version changes in pubspec.yaml
+# Extract version: docker build --build-arg VERSION=$(grep '^version:' pubspec.yaml | cut -d' ' -f2) .
+ARG VERSION=0.0.0
+RUN echo "Building version: $VERSION"
 
-# Get dependencies (generates pubspec.lock)
+# Copy dependency files first for better caching
+COPY pubspec.yaml pubspec.lock* ./
+
+# Get dependencies
 RUN flutter pub get
 
 # Copy the rest of the application
 COPY . .
 
-# Generate code with build_runner
+# Clean any cached build artifacts to ensure fresh build
+RUN flutter clean && flutter pub get
+
+# Generate code with build_runner (after clean for fresh generation)
 RUN dart run build_runner build --delete-conflicting-outputs
 
-# Build for web release
-RUN flutter build web --release
+# Generate health.json with version info
+RUN dart run tool/generate_health_json.dart
+
+# Build for web release with production configuration
+# These URLs enable authentication (requiresAuth = true when URL contains schweitz.net)
+RUN flutter build web --release \
+    --dart-define=CORE_API_URL=https://api.schweitz.net \
+    --dart-define=TATLOCK_API_URL=https://tatlock.schweitz.net
 
 # Stage 2: Serve with nginx
 FROM nginx:alpine

lib/core/api/api_client.dart

@@ -3,23 +3,26 @@ import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/core/api/api_interceptors.dart';
 import 'package:tatlock_ui/core/config/app_config.dart';
 
+import 'api_client_native.dart' if (dart.library.html) 'api_client_web.dart'
+    as platform;
+
 part 'api_client.g.dart';
 
 /// Provides the Dio instance for Core API.
 @riverpod
 Dio coreApiClient(Ref ref) {
-  final dio = Dio(
-    BaseOptions(
-      baseUrl: AppConfig.coreApiUrl,
-      connectTimeout: const Duration(seconds: 10),
-      receiveTimeout: const Duration(seconds: 30),
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-    ),
+  final options = BaseOptions(
+    baseUrl: AppConfig.coreApiUrl,
+    connectTimeout: const Duration(seconds: 10),
+    receiveTimeout: const Duration(seconds: 30),
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
   );
 
+  final dio = platform.createDio(options);
+
   dio.interceptors.addAll([
     AuthInterceptor(ref),
     LoggingInterceptor(),
@@ -32,18 +35,18 @@ Dio coreApiClient(Ref ref) {
 /// Provides the Dio instance for Tatlock API.
 @riverpod
 Dio tatlockApiClient(Ref ref) {
-  final dio = Dio(
-    BaseOptions(
-      baseUrl: AppConfig.tatlockApiUrl,
-      connectTimeout: const Duration(seconds: 10),
-      receiveTimeout: const Duration(minutes: 5), // Longer for LLM responses
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-    ),
+  final options = BaseOptions(
+    baseUrl: AppConfig.tatlockApiUrl,
+    connectTimeout: const Duration(seconds: 10),
+    receiveTimeout: const Duration(minutes: 5), // Longer for LLM responses
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
   );
 
+  final dio = platform.createDio(options);
+
   dio.interceptors.addAll([
     AuthInterceptor(ref),
     LoggingInterceptor(),

lib/core/api/api_client_native.dart

@@ -0,0 +1,6 @@
+import 'package:dio/dio.dart';
+
+/// Create a Dio instance for native platforms (mobile, desktop).
+Dio createDio(BaseOptions options) {
+  return Dio(options);
+}

lib/core/api/api_client_web.dart

@@ -0,0 +1,12 @@
+import 'package:dio/dio.dart';
+import 'package:dio_web_adapter/dio_web_adapter.dart';
+
+/// Create a Dio instance for web platform with credentials support.
+///
+/// Enables `withCredentials` to send cookies with requests, which is
+/// required for NPM forward auth to work correctly.
+Dio createDio(BaseOptions options) {
+  final dio = Dio(options);
+  dio.httpClientAdapter = BrowserHttpClientAdapter(withCredentials: true);
+  return dio;
+}

lib/core/auth/auth_datasource.dart

@@ -102,7 +102,7 @@ class AuthDatasource {
   /// Returns user profile if authenticated via the proxy.
   /// Throws 401 if not authenticated or accessing directly.
   Future<AuthSyncResponse> getCurrentUser() async {
-    final response = await _dio.get<Map<String, dynamic>>('/auth/me');
+    final response = await _dio.get<Map<String, dynamic>>('/auth/users/me');
     return AuthSyncResponse.fromJson(response.data!);
   }
 

lib/core/auth/auth_provider.dart

@@ -1,7 +1,6 @@
-import 'dart:convert';
+import 'dart:convert' show base64Url, jsonDecode, jsonEncode, utf8;
 import 'dart:developer' as developer;
 
-import 'package:dio/dio.dart';
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -10,19 +9,21 @@ import '../config/app_config.dart';
 import 'auth_datasource.dart';
 import 'auth_state.dart';
 import 'oidc_service.dart';
+import 'oidc_service_web.dart';
 import 'permissions.dart';
 import 'user_preferences.dart';
+import 'web_utils.dart' as web_utils;
 
 part 'auth_provider.g.dart';
 
 /// Provides authentication state and operations.
 ///
-/// Supports two authentication flows:
-/// - **Web**: NPM forward auth with Authentik (cookies handled by proxy)
-/// - **Mobile**: OIDC Authorization Code flow with flutter_appauth
+/// Supports OIDC Authorization Code flow with PKCE on all platforms:
+/// - **Web**: Browser redirect to Authentik, callback via /callback route
+/// - **Mobile**: flutter_appauth with custom URL scheme
 ///
-/// On web, the app calls GET /auth/me to check if user is authenticated
-/// via NPM forward auth headers. On mobile, uses OIDC flow then POST /auth/sync.
+/// After OIDC authentication, syncs with core-api via POST /auth/sync
+/// to get user profile, roles, and preferences.
 @riverpod
 class AuthNotifier extends _$AuthNotifier {
   // Storage keys
@@ -39,71 +40,10 @@ class AuthNotifier extends _$AuthNotifier {
 
   @override
   Future<AuthState> build() async {
-    // On web with auth required, try to get user from NPM forward auth
-    if (kIsWeb && AppConfig.requiresAuth) {
-      final webAuth = await _tryWebAuth();
-      if (webAuth != null) {
-        return webAuth;
-      }
-      // If web auth failed, user needs to refresh to trigger NPM login
-      developer.log('Web auth not available - user may need to login via proxy', name: 'auth');
-      return const AuthState();
-    }
-
-    // On mobile or LAN, load from stored auth
+    // Load stored auth on all platforms
     return _loadStoredAuth();
   }
 
-  /// Try to authenticate via NPM forward auth (web only).
-  ///
-  /// Returns AuthState if authenticated, null if not.
-  Future<AuthState?> _tryWebAuth() async {
-    try {
-      developer.log('Attempting web auth via /auth/me', name: 'auth');
-      final authDatasource = ref.read(authDatasourceProvider);
-      final syncResponse = await authDatasource.getCurrentUser();
-
-      developer.log(
-        'Web auth successful: ${syncResponse.name} with ${syncResponse.roles.length} roles',
-        name: 'auth',
-      );
-
-      // Store auth data for offline/cached access
-      await _storeAuth(
-        accessToken: 'web-session', // Placeholder - web uses cookies
-        userId: syncResponse.userId,
-        authentikId: syncResponse.authentikId,
-        userName: syncResponse.name,
-        userEmail: syncResponse.email,
-        avatarUrl: syncResponse.avatarUrl,
-        roles: syncResponse.roles,
-        preferences: syncResponse.preferences,
-      );
-
-      return AuthState(
-        isAuthenticated: true,
-        accessToken: 'web-session',
-        userId: syncResponse.userId,
-        authentikId: syncResponse.authentikId,
-        userName: syncResponse.name,
-        userEmail: syncResponse.email,
-        avatarUrl: syncResponse.avatarUrl,
-        roles: syncResponse.roles,
-        preferences: syncResponse.preferences,
-      );
-    } on DioException catch (e) {
-      if (e.response?.statusCode == 401) {
-        developer.log('Web auth: not authenticated via proxy', name: 'auth');
-        return null;
-      }
-      developer.log('Web auth error: $e', name: 'auth');
-      return null;
-    } catch (e) {
-      developer.log('Web auth unexpected error: $e', name: 'auth');
-      return null;
-    }
-  }
-
   Future<AuthState> _loadStoredAuth() async {
     try {
       final prefs = await SharedPreferences.getInstance();
@@ -224,7 +164,7 @@ class AuthNotifier extends _$AuthNotifier {
 
   /// Sign in with the appropriate method for the platform.
   ///
-  /// - **Web**: Triggers page reload to go through NPM forward auth
+  /// - **Web**: Redirects to Authentik for OIDC authentication
   /// - **Mobile**: Opens Authentik login via OIDC, then syncs with core-api
   Future<void> signIn() async {
     if (!AppConfig.requiresAuth) {
@@ -234,25 +174,25 @@ class AuthNotifier extends _$AuthNotifier {
       return;
     }
 
-    // On web, auth is handled by NPM forward auth
-    // User needs to access via the authenticated proxy URL
+    // Web: Use OIDC flow with browser redirect
     if (kIsWeb) {
-      developer.log('Web sign-in: user should access via authenticated proxy', name: 'auth');
-      // Try to refresh auth state from /auth/me
+      developer.log('Web sign-in: starting OIDC flow', name: 'auth');
       state = const AsyncLoading();
-      final webAuth = await _tryWebAuth();
-      if (webAuth != null) {
-        state = AsyncData(webAuth);
-      } else {
-        state = AsyncError(
-          Exception('Not authenticated - please access via the authenticated URL'),
-          StackTrace.current,
-        );
+
+      try {
+        final oidcService = OidcServiceWeb();
+        final authUrl = await oidcService.getAuthorizationUrl();
+        developer.log('Redirecting to: $authUrl', name: 'auth');
+        web_utils.redirectTo(authUrl);
+        // Browser will redirect, so we don't update state here
+      } catch (e, stack) {
+        developer.log('Failed to start OIDC flow: $e', name: 'auth');
+        state = AsyncError(e, stack);
       }
       return;
     }
 
-    // Mobile: Use OIDC flow
+    // Mobile: Use OIDC flow with flutter_appauth
     state = const AsyncLoading();
 
     try {
@@ -307,6 +247,99 @@ class AuthNotifier extends _$AuthNotifier {
     }
   }
 
+  /// Handle OIDC callback after Authentik redirects back (web only).
+  ///
+  /// [code] is the authorization code from the callback URL.
+  /// [state] is the state parameter for CSRF verification.
+  Future<void> handleOidcCallback(String code, String callbackState) async {
+    if (!kIsWeb) {
+      developer.log('handleOidcCallback called on non-web platform', name: 'auth');
+      return;
+    }
+
+    developer.log('Handling OIDC callback', name: 'auth');
+    state = const AsyncLoading();
+
+    try {
+      // Step 1: Exchange code for tokens
+      final oidcService = OidcServiceWeb();
+      final tokens = await oidcService.exchangeCode(code, callbackState);
+
+      // Step 2: Decode JWT to extract user info (skip core-api sync)
+      final claims = _decodeJwtClaims(tokens.accessToken);
+      final userName = claims['name'] as String? ??
+          claims['preferred_username'] as String? ??
+          'User';
+      final userEmail = claims['email'] as String? ?? '';
+      final authentikId = claims['sub'] as String?;
+      final groups = (claims['groups'] as List<dynamic>?)?.cast<String>() ?? [];
+
+      developer.log('JWT claims: name=$userName, email=$userEmail, groups=$groups', name: 'auth');
+
+      // Step 3: Store credentials and user data from JWT
+      await _storeAuth(
+        accessToken: tokens.accessToken,
+        refreshToken: tokens.refreshToken,
+        expiresAt: tokens.expiresAt,
+        authentikId: authentikId,
+        userName: userName,
+        userEmail: userEmail,
+        // Roles from groups - for now just store group names
+        // Full role parsing can be done later if needed
+      );
+
+      state = AsyncData(AuthState(
+        isAuthenticated: true,
+        accessToken: tokens.accessToken,
+        refreshToken: tokens.refreshToken,
+        expiresAt: tokens.expiresAt,
+        authentikId: authentikId,
+        userName: userName,
+        userEmail: userEmail,
+      ));
+
+      developer.log('Authenticated as $userName', name: 'auth');
+
+      // Clean up the URL by removing the query parameters
+      web_utils.replaceUrl('/');
+    } on OidcException catch (e) {
+      developer.log('OIDC callback failed: $e', name: 'auth');
+      state = AsyncError(e, StackTrace.current);
+    } catch (e, stack) {
+      developer.log('Callback handling failed: $e', name: 'auth');
+      state = AsyncError(e, stack);
+    }
+  }
+
+  /// Decode JWT payload without verification (validation happens server-side).
+  Map<String, dynamic> _decodeJwtClaims(String jwt) {
+    try {
+      final parts = jwt.split('.');
+      if (parts.length != 3) {
+        developer.log('Invalid JWT format', name: 'auth');
+        return {};
+      }
+
+      // Decode the payload (second part)
+      String payload = parts[1];
+      // Add padding if needed for base64
+      switch (payload.length % 4) {
+        case 2:
+          payload += '==';
+          break;
+        case 3:
+          payload += '=';
+          break;
+      }
+
+      final decoded = utf8.decode(base64Url.decode(payload));
+      return jsonDecode(decoded) as Map<String, dynamic>;
+    } catch (e) {
+      developer.log('Failed to decode JWT: $e', name: 'auth');
+      return {};
+    }
+  }
+
   /// Sign out and clear stored credentials.
   Future<void> signOut() async {
     await _clearStoredAuth();

lib/core/auth/oidc_service_web.dart

@@ -0,0 +1,212 @@
+import 'dart:async';
+import 'dart:convert';
+import 'dart:developer' as developer;
+import 'dart:math';
+
+import 'package:crypto/crypto.dart';
+import 'package:dio/dio.dart';
+
+import '../config/app_config.dart';
+import 'oidc_service.dart';
+import 'web_utils.dart' as web_utils;
+
+/// Web implementation of OIDC service using browser redirect flow.
+///
+/// Uses Authorization Code flow with PKCE for secure authentication.
+/// On web, we can't use flutter_appauth, so we implement the flow manually
+/// using browser redirects and URL parsing.
+class OidcServiceWeb implements OidcService {
+  OidcServiceWeb({Dio? dio}) : _dio = dio ?? Dio();
+
+  final Dio _dio;
+
+  /// OIDC scopes to request.
+  static const _scopes = ['openid', 'profile', 'email', 'offline_access'];
+
+  /// Redirect URI for web.
+  static String get _redirectUri => '${AppConfig.webBaseUrl}/callback';
+
+  // SessionStorage keys for PKCE state (persists across redirect)
+  static const _codeVerifierKey = 'oidc_code_verifier';
+  static const _stateKey = 'oidc_state';
+
+  /// Get the authorization URL to redirect the browser to.
+  ///
+  /// Returns a URL that the browser should navigate to for authentication.
+  /// The [codeVerifier] and [state] are stored for later verification.
+  Future<String> getAuthorizationUrl() async {
+    // Fetch OIDC discovery document
+    final discovery = await _fetchDiscovery();
+    final authEndpoint = discovery['authorization_endpoint'] as String;
+
+    // Generate PKCE code verifier and challenge
+    final codeVerifier = _generateCodeVerifier();
+    final codeChallenge = _generateCodeChallenge(codeVerifier);
+
+    // Generate state for CSRF protection
+    final state = _generateRandomString(32);
+
+    // Store PKCE state in sessionStorage (persists across redirect)
+    web_utils.setSessionStorage(_codeVerifierKey, codeVerifier);
+    web_utils.setSessionStorage(_stateKey, state);
+
+    // Build authorization URL
+    final params = {
+      'client_id': AppConfig.authClientId,
+      'redirect_uri': _redirectUri,
+      'response_type': 'code',
+      'scope': _scopes.join(' '),
+      'code_challenge': codeChallenge,
+      'code_challenge_method': 'S256',
+      'state': state,
+    };
+
+    final uri = Uri.parse(authEndpoint).replace(queryParameters: params);
+    developer.log('Authorization URL: $uri', name: 'oidc_web');
+    return uri.toString();
+  }
+
+  /// Exchange authorization code for tokens.
+  ///
+  /// Call this after the browser redirects back with the authorization code.
+  /// [code] is the authorization code from the callback URL.
+  /// [state] is the state parameter from the callback URL (verified for CSRF).
+  Future<OidcTokens> exchangeCode(String code, String state) async {
+    // Retrieve PKCE state from sessionStorage
+    final storedState = web_utils.getSessionStorage(_stateKey);
+    final codeVerifier = web_utils.getSessionStorage(_codeVerifierKey);
+
+    developer.log('Stored state: $storedState, received state: $state', name: 'oidc_web');
+    developer.log('Code verifier present: ${codeVerifier != null}', name: 'oidc_web');
+
+    // Verify state matches
+    if (storedState == null || state != storedState) {
+      _clearPkceState();
+      throw OidcException('State mismatch - possible CSRF attack');
+    }
+
+    if (codeVerifier == null) {
+      _clearPkceState();
+      throw OidcException('No code verifier - flow not started properly');
+    }
+
+    try {
+      // Fetch token endpoint from discovery
+      final discovery = await _fetchDiscovery();
+      final tokenEndpoint = discovery['token_endpoint'] as String;
+
+      developer.log('Exchanging code at: $tokenEndpoint', name: 'oidc_web');
+
+      // Exchange code for tokens
+      final response = await _dio.post<Map<String, dynamic>>(
+        tokenEndpoint,
+        data: {
+          'grant_type': 'authorization_code',
+          'client_id': AppConfig.authClientId,
+          'redirect_uri': _redirectUri,
+          'code': code,
+          'code_verifier': codeVerifier,
+        },
+        options: Options(
+          contentType: Headers.formUrlEncodedContentType,
+        ),
+      );
+
+      final data = response.data!;
+      developer.log('Token exchange successful', name: 'oidc_web');
+
+      // Clear stored PKCE state
+      _clearPkceState();
+
+      return OidcTokens(
+        accessToken: data['access_token'] as String,
+        refreshToken: data['refresh_token'] as String?,
+        expiresAt: DateTime.now().add(
+          Duration(seconds: data['expires_in'] as int? ?? 3600),
+        ),
+        idToken: data['id_token'] as String?,
+      );
+    } on DioException catch (e) {
+      developer.log('Token exchange failed: $e', name: 'oidc_web');
+      _clearPkceState();
+      throw OidcException('Token exchange failed: ${e.message}');
+    }
+  }
+
+  /// Clear PKCE state from sessionStorage.
+  void _clearPkceState() {
+    web_utils.removeSessionStorage(_codeVerifierKey);
+    web_utils.removeSessionStorage(_stateKey);
+  }
+
+  /// Not used on web - use [getAuthorizationUrl] and [exchangeCode] instead.
+  @override
+  Future<OidcTokens> signIn() async {
+    throw OidcException(
+      'signIn() not supported on web. Use getAuthorizationUrl() and exchangeCode() instead.',
+    );
+  }
+
+  /// Refresh the access token using a refresh token.
+  @override
+  Future<OidcTokens> refreshToken(String refreshToken) async {
+    try {
+      final discovery = await _fetchDiscovery();
+      final tokenEndpoint = discovery['token_endpoint'] as String;
+
+      final response = await _dio.post<Map<String, dynamic>>(
+        tokenEndpoint,
+        data: {
+          'grant_type': 'refresh_token',
+          'client_id': AppConfig.authClientId,
+          'refresh_token': refreshToken,
+        },
+        options: Options(
+          contentType: Headers.formUrlEncodedContentType,
+        ),
+      );
+
+      final data = response.data!;
+
+      return OidcTokens(
+        accessToken: data['access_token'] as String,
+        refreshToken: data['refresh_token'] as String? ?? refreshToken,
+        expiresAt: DateTime.now().add(
+          Duration(seconds: data['expires_in'] as int? ?? 3600),
+        ),
+        idToken: data['id_token'] as String?,
+      );
+    } on DioException catch (e) {
+      throw OidcException('Token refresh failed: ${e.message}');
+    }
+  }
+
+  /// Fetch OIDC discovery document.
+  Future<Map<String, dynamic>> _fetchDiscovery() async {
+    final response = await _dio.get<Map<String, dynamic>>(
+      AppConfig.authDiscoveryUrl,
+    );
+    return response.data!;
+  }
+
+  /// Generate a random code verifier for PKCE.
+  String _generateCodeVerifier() {
+    return _generateRandomString(64);
+  }
+
+  /// Generate code challenge from verifier using S256.
+  String _generateCodeChallenge(String verifier) {
+    final bytes = utf8.encode(verifier);
+    final digest = sha256.convert(bytes);
+    return base64Url.encode(digest.bytes).replaceAll('=', '');
+  }
+
+  /// Generate a random string of given length.
+  String _generateRandomString(int length) {
+    const chars =
+        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+    final random = Random.secure();
+    return List.generate(length, (_) => chars[random.nextInt(chars.length)])
+        .join();
+  }
+}

lib/core/auth/web_utils.dart

@@ -0,0 +1,7 @@
+/// Web utilities with conditional imports.
+///
+/// Uses stub implementation on non-web platforms.
+library;
+
+export 'web_utils_stub.dart'
+    if (dart.library.js_interop) 'web_utils_web.dart';

lib/core/auth/web_utils_stub.dart

@@ -0,0 +1,32 @@
+/// Stub for non-web platforms.
+library;
+
+/// Redirect to a URL (no-op on non-web).
+void redirectTo(String url) {
+  throw UnsupportedError('redirectTo is only supported on web');
+}
+
+/// Get current URL (no-op on non-web).
+String getCurrentUrl() {
+  throw UnsupportedError('getCurrentUrl is only supported on web');
+}
+
+/// Replace current URL without navigation (no-op on non-web).
+void replaceUrl(String url) {
+  throw UnsupportedError('replaceUrl is only supported on web');
+}
+
+/// Store a value in sessionStorage (no-op on non-web).
+void setSessionStorage(String key, String value) {
+  throw UnsupportedError('setSessionStorage is only supported on web');
+}
+
+/// Get a value from sessionStorage (no-op on non-web).
+String? getSessionStorage(String key) {
+  throw UnsupportedError('getSessionStorage is only supported on web');
+}
+
+/// Remove a value from sessionStorage (no-op on non-web).
+void removeSessionStorage(String key) {
+  throw UnsupportedError('removeSessionStorage is only supported on web');
+}

lib/core/auth/web_utils_web.dart

@@ -0,0 +1,34 @@
+/// Web-specific utilities for browser operations.
+library;
+
+import 'package:web/web.dart' as web;
+
+/// Redirect the browser to a URL.
+void redirectTo(String url) {
+  web.window.location.href = url;
+}
+
+/// Get the current browser URL.
+String getCurrentUrl() {
+  return web.window.location.href;
+}
+
+/// Replace the current URL in history without navigation.
+void replaceUrl(String url) {
+  web.window.history.replaceState(null, '', url);
+}
+
+/// Store a value in sessionStorage.
+void setSessionStorage(String key, String value) {
+  web.window.sessionStorage.setItem(key, value);
+}
+
+/// Get a value from sessionStorage.
+String? getSessionStorage(String key) {
+  return web.window.sessionStorage.getItem(key);
+}
+
+/// Remove a value from sessionStorage.
+void removeSessionStorage(String key) {
+  web.window.sessionStorage.removeItem(key);
+}

lib/core/config/app_config.dart

@@ -45,12 +45,18 @@ class AppConfig {
     defaultValue: 'tatlock-ui',
   );
 
-  /// Authentik redirect URI scheme
+  /// Authentik redirect URI scheme (for mobile/native)
   static const authRedirectScheme = String.fromEnvironment(
     'AUTH_REDIRECT_SCHEME',
     defaultValue: 'net.schweitz.tatlock',
   );
 
+  /// Web app base URL (for OIDC redirect URI on web)
+  static const webBaseUrl = String.fromEnvironment(
+    'WEB_BASE_URL',
+    defaultValue: 'https://home.schweitz.net',
+  );
+
   /// Whether running in debug mode
   static const isDebug = bool.fromEnvironment('DEBUG', defaultValue: false);
 

lib/core/config/url_strategy.dart

@@ -0,0 +1,5 @@
+/// URL strategy with conditional imports for web/non-web platforms.
+library;
+
+export 'url_strategy_stub.dart'
+    if (dart.library.js_interop) 'url_strategy_web.dart';

lib/core/config/url_strategy_stub.dart

@@ -0,0 +1,4 @@
+/// Stub for non-web platforms - does nothing.
+void configureUrlStrategy() {
+  // No-op on mobile/desktop
+}

lib/core/config/url_strategy_web.dart

@@ -0,0 +1,10 @@
+/// Web-specific URL strategy configuration.
+library;
+
+import 'package:flutter_web_plugins/url_strategy.dart';
+
+void configureUrlStrategy() {
+  // Use path-based URLs instead of hash-based (e.g., /login instead of /#/login)
+  // Required for OIDC callback to work properly
+  usePathUrlStrategy();
+}

lib/features/front_hall/presentation/widgets/iframe_view_web.dart

@@ -1,8 +1,8 @@
-import 'dart:html' as html;
 import 'dart:ui_web' as ui_web;
 
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
+import 'package:web/web.dart' as web;
 
 /// Embedded iframe view for displaying external content (web only).
 ///
@@ -31,7 +31,7 @@ class IframeView extends StatefulWidget {
 
 class _IframeViewState extends State<IframeView> {
   late final String _viewType;
-  late html.IFrameElement _iframe;
+  late web.HTMLIFrameElement _iframe;
   bool _isLoading = true;
 
   @override
@@ -42,17 +42,18 @@ class _IframeViewState extends State<IframeView> {
   }
 
   void _createIframe() {
-    _iframe = html.IFrameElement()
+    _iframe = web.document.createElement('iframe') as web.HTMLIFrameElement
       ..src = widget.url
       ..style.border = 'none'
       ..style.width = '100%'
       ..style.height = '100%'
-      ..allow = 'fullscreen'
-      ..onLoad.listen((_) {
-        if (mounted) {
-          setState(() => _isLoading = false);
-        }
-      });
+      ..allow = 'fullscreen';
+
+    _iframe.onLoad.listen((_) {
+      if (mounted) {
+        setState(() => _isLoading = false);
+      }
+    });
 
     // Register the view factory
     ui_web.platformViewRegistry.registerViewFactory(

lib/main.dart

@@ -4,19 +4,19 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'app.dart';
+import 'core/config/url_strategy.dart';
 import 'version.g.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
 
+  // Use path-based URLs on web (no-op on mobile/desktop)
+  configureUrlStrategy();
+
   developer.log(
     '${AppVersion.name} v${AppVersion.fullVersion}',
     name: 'tatlock_ui',
   );
 
-  runApp(
-    const ProviderScope(
-      child: TatlockApp(),
-    ),
-  );
+  runApp(const ProviderScope(child: TatlockApp()));
 }

lib/routing/app_router.dart

@@ -1,10 +1,8 @@
-import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:tatlock_ui/core/auth/auth_provider.dart';
-import 'package:tatlock_ui/core/config/app_config.dart';
 import 'package:tatlock_ui/features/control_room/router.dart';
 import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
 import 'package:tatlock_ui/features/security/router.dart';
@@ -17,44 +15,26 @@ abstract class AppRoutes {
   static const frontHall = '/';
   static const parlor = '/parlor';
   static const settings = '/settings';
-  static const login = '/login';
+  static const callback = '/callback';
 }
 
 /// Provides the GoRouter instance.
 @riverpod
 GoRouter appRouter(Ref ref) {
-  final authState = ref.watch(authProvider);
-
   return GoRouter(
     initialLocation: AppRoutes.frontHall,
     debugLogDiagnostics: true,
-    redirect: (context, state) {
-      // No auth required in LAN mode
-      if (!AppConfig.requiresAuth) {
-        return null;
-      }
-
-      final isAuthenticated = authState.value?.isAuthenticated ?? false;
-      final isLoginRoute = state.matchedLocation == AppRoutes.login;
-
-      // If not authenticated, redirect to login (except if already on login)
-      if (!isAuthenticated && !isLoginRoute) {
-        return AppRoutes.login;
-      }
-
-      // If authenticated and on login page, redirect to home
-      if (isAuthenticated && isLoginRoute) {
-        return AppRoutes.frontHall;
-      }
-
-      return null;
-    },
     routes: [
-      // Login route (outside shell - no app scaffold)
+      // OIDC callback route (handles auth code exchange)
       GoRoute(
-        path: AppRoutes.login,
-        name: 'login',
-        builder: (context, state) => const _LoginPage(),
+        path: AppRoutes.callback,
+        name: 'callback',
+        builder: (context, state) => _OidcCallbackPage(
+          code: state.uri.queryParameters['code'],
+          callbackState: state.uri.queryParameters['state'],
+          error: state.uri.queryParameters['error'],
+          errorDescription: state.uri.queryParameters['error_description'],
+        ),
       ),
       // Main app routes (inside shell with app scaffold)
       ShellRoute(
@@ -120,13 +100,79 @@ class _PlaceholderPage extends StatelessWidget {
   }
 }
 
-/// Login page displayed when user is not authenticated.
-class _LoginPage extends ConsumerWidget {
-  const _LoginPage();
+/// OIDC callback page that handles the authorization code exchange.
+class _OidcCallbackPage extends ConsumerStatefulWidget {
+  const _OidcCallbackPage({
+    this.code,
+    this.callbackState,
+    this.error,
+    this.errorDescription,
+  });
+
+  final String? code;
+  final String? callbackState;
+  final String? error;
+  final String? errorDescription;
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final authAsync = ref.watch(authProvider);
+  ConsumerState<_OidcCallbackPage> createState() => _OidcCallbackPageState();
+}
+
+class _OidcCallbackPageState extends ConsumerState<_OidcCallbackPage> {
+  bool _isProcessing = true;
+  String? _error;
+
+  @override
+  void initState() {
+    super.initState();
+    // Defer callback processing to avoid Riverpod state modification during build
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _processCallback();
+    });
+  }
+
+  Future<void> _processCallback() async {
+    // Check for error from Authentik
+    if (widget.error != null) {
+      setState(() {
+        _isProcessing = false;
+        _error = widget.errorDescription ?? widget.error;
+      });
+      return;
+    }
+
+    // Check for required parameters
+    if (widget.code == null || widget.callbackState == null) {
+      setState(() {
+        _isProcessing = false;
+        _error = 'Invalid callback - missing code or state parameter';
+      });
+      return;
+    }
+
+    // Exchange code for tokens
+    try {
+      await ref.read(authProvider.notifier).handleOidcCallback(
+            widget.code!,
+            widget.callbackState!,
+          );
+
+      // Navigate to home on success
+      if (mounted) {
+        context.go(AppRoutes.frontHall);
+      }
+    } catch (e) {
+      if (mounted) {
+        setState(() {
+          _isProcessing = false;
+          _error = e.toString();
+        });
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
 
     return Scaffold(
@@ -140,41 +186,43 @@ class _LoginPage extends ConsumerWidget {
                 mainAxisSize: MainAxisSize.min,
                 children: [
                   Icon(
-                    Icons.home_work_outlined,
+                    _error != null ? Icons.error_outline : Icons.home_work_outlined,
                     size: 64,
-                    color: colorScheme.primary,
+                    color: _error != null ? colorScheme.error : colorScheme.primary,
                   ),
                   const SizedBox(height: 24),
                   Text(
-                    'Tatlock Estate',
+                    _error != null ? 'Authentication Failed' : 'Signing in...',
                     style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                           fontWeight: FontWeight.w600,
                         ),
                   ),
-                  const SizedBox(height: 8),
-                  Text(
-                    'Sign in to access the estate management system',
-                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                          color: colorScheme.onSurfaceVariant,
-                        ),
-                    textAlign: TextAlign.center,
-                  ),
-                  const SizedBox(height: 32),
-                  authAsync.when(
-                    data: (_) => _buildSignInContent(context, ref),
-                    loading: () => const Column(
-                      children: [
-                        SizedBox(
-                          width: 24,
-                          height: 24,
-                          child: CircularProgressIndicator(strokeWidth: 2),
-                        ),
-                        SizedBox(height: 16),
-                        Text('Checking authentication...'),
-                      ],
+                  const SizedBox(height: 16),
+                  if (_isProcessing)
+                    const CircularProgressIndicator()
+                  else if (_error != null) ...[
+                    Container(
+                      padding: const EdgeInsets.all(12),
+                      decoration: BoxDecoration(
+                        color: colorScheme.errorContainer,
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      child: Text(
+                        _error!,
+                        style: TextStyle(color: colorScheme.onErrorContainer),
+                        textAlign: TextAlign.center,
+                      ),
                     ),
-                    error: (error, _) => _buildErrorContent(context, ref, error),
-                  ),
+                    const SizedBox(height: 16),
+                    OutlinedButton.icon(
+                      onPressed: () => context.go(AppRoutes.frontHall),
+                      icon: const Icon(Icons.refresh),
+                      label: const Text('Try again'),
+                      style: OutlinedButton.styleFrom(
+                        minimumSize: const Size(double.infinity, 48),
+                      ),
+                    ),
+                  ],
                 ],
               ),
             ),
@@ -183,92 +231,4 @@ class _LoginPage extends ConsumerWidget {
       ),
     );
   }
-
-  Widget _buildSignInContent(BuildContext context, WidgetRef ref) {
-    if (kIsWeb) {
-      // Web: User needs to access via authenticated proxy
-      return Column(
-        children: [
-          Text(
-            'Please access Tatlock via the authenticated URL.\n'
-            'If you see this page, the proxy authentication may not be configured.',
-            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                  color: Theme.of(context).colorScheme.onSurfaceVariant,
-                ),
-            textAlign: TextAlign.center,
-          ),
-          const SizedBox(height: 16),
-          OutlinedButton.icon(
-            onPressed: () => ref.read(authProvider.notifier).signIn(),
-            icon: const Icon(Icons.refresh),
-            label: const Text('Retry'),
-            style: OutlinedButton.styleFrom(
-              minimumSize: const Size(double.infinity, 48),
-            ),
-          ),
-        ],
-      );
-    }
-
-    // Mobile: Show sign in button
-    return FilledButton.icon(
-      onPressed: () => ref.read(authProvider.notifier).signIn(),
-      icon: const Icon(Icons.login),
-      label: const Text('Sign in with Authentik'),
-      style: FilledButton.styleFrom(
-        minimumSize: const Size(double.infinity, 48),
-      ),
-    );
-  }
-
-  Widget _buildErrorContent(BuildContext context, WidgetRef ref, Object error) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return Column(
-      children: [
-        Container(
-          padding: const EdgeInsets.all(12),
-          decoration: BoxDecoration(
-            color: colorScheme.errorContainer,
-            borderRadius: BorderRadius.circular(8),
-          ),
-          child: Row(
-            children: [
-              Icon(Icons.error_outline, color: colorScheme.onErrorContainer),
-              const SizedBox(width: 12),
-              Expanded(
-                child: Text(
-                  _formatError(error),
-                  style: TextStyle(color: colorScheme.onErrorContainer),
-                ),
-              ),
-            ],
-          ),
-        ),
-        const SizedBox(height: 16),
-        OutlinedButton.icon(
-          onPressed: () => ref.read(authProvider.notifier).signIn(),
-          icon: const Icon(Icons.refresh),
-          label: const Text('Try again'),
-          style: OutlinedButton.styleFrom(
-            minimumSize: const Size(double.infinity, 48),
-          ),
-        ),
-      ],
-    );
-  }
-
-  String _formatError(Object error) {
-    final message = error.toString();
-    if (message.contains('user_cancelled')) {
-      return 'Sign in was cancelled';
-    }
-    if (message.contains('network')) {
-      return 'Network error. Please check your connection.';
-    }
-    if (message.contains('authenticated URL')) {
-      return 'Not authenticated - please access via the authenticated URL';
-    }
-    return 'Authentication failed. Please try again.';
-  }
 }

lib/shared/layouts/app_scaffold.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
+import 'package:tatlock_ui/core/auth/auth_provider.dart';
+import 'package:tatlock_ui/core/config/app_config.dart';
 import 'package:tatlock_ui/features/control_room/router.dart';
 import 'package:tatlock_ui/features/security/router.dart';
 import 'package:tatlock_ui/routing/app_router.dart';
@@ -7,6 +10,11 @@ import 'package:tatlock_ui/shared/layouts/widgets/top_header_bar.dart';
 
 /// Main application scaffold with top header navigation.
 ///
+/// Handles authentication automatically:
+/// - If not authenticated, auto-initiates OIDC flow
+/// - Shows loading state during authentication
+/// - Shows error state if auth fails (with retry)
+///
 /// Layout structure per UI_LAYOUT.md:
 /// ```
 /// ┌─────────────────────────────────────────────────────────────────┐
@@ -15,16 +23,55 @@ import 'package:tatlock_ui/shared/layouts/widgets/top_header_bar.dart';
 /// │  BODY: Room page content (may include room-specific sidebar)    │
 /// └─────────────────────────────────────────────────────────────────┘
 /// ```
-class AppScaffold extends StatelessWidget {
+class AppScaffold extends ConsumerStatefulWidget {
   const AppScaffold({super.key, required this.child});
 
   final Widget child;
 
+  @override
+  ConsumerState<AppScaffold> createState() => _AppScaffoldState();
+}
+
+class _AppScaffoldState extends ConsumerState<AppScaffold> {
   // Header height must match TopHeaderBar._headerHeight
   static const double _headerHeight = 56.0;
 
+  bool _authInitiated = false;
+
   @override
   Widget build(BuildContext context) {
+    // No auth required in LAN mode - show content directly
+    if (!AppConfig.requiresAuth) {
+      return _buildScaffold(context);
+    }
+
+    final authAsync = ref.watch(authProvider);
+
+    return authAsync.when(
+      data: (authState) {
+        if (authState.isAuthenticated) {
+          // Authenticated - show the app
+          _authInitiated = false; // Reset for next time
+          return _buildScaffold(context);
+        }
+
+        // Not authenticated - auto-initiate OIDC
+        if (!_authInitiated) {
+          _authInitiated = true;
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            ref.read(authProvider.notifier).signIn();
+          });
+        }
+
+        // Show loading while redirecting to Authentik
+        return _buildAuthLoadingScreen(context, 'Redirecting to sign in...');
+      },
+      loading: () => _buildAuthLoadingScreen(context, 'Checking authentication...'),
+      error: (error, _) => _buildAuthErrorScreen(context, error),
+    );
+  }
+
+  Widget _buildScaffold(BuildContext context) {
     return Scaffold(
       body: Stack(
         children: [
@@ -32,7 +79,7 @@ class AppScaffold extends StatelessWidget {
           Positioned.fill(
             child: Padding(
               padding: const EdgeInsets.only(top: _headerHeight),
-              child: child,
+              child: widget.child,
             ),
           ),
 
@@ -51,6 +98,115 @@ class AppScaffold extends StatelessWidget {
     );
   }
 
+  Widget _buildAuthLoadingScreen(BuildContext context, String message) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Scaffold(
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.home_work_outlined,
+              size: 64,
+              color: colorScheme.primary,
+            ),
+            const SizedBox(height: 24),
+            Text(
+              'Tatlock Estate',
+              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                    fontWeight: FontWeight.w600,
+                  ),
+            ),
+            const SizedBox(height: 32),
+            const SizedBox(
+              width: 24,
+              height: 24,
+              child: CircularProgressIndicator(strokeWidth: 2),
+            ),
+            const SizedBox(height: 16),
+            Text(
+              message,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAuthErrorScreen(BuildContext context, Object error) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Scaffold(
+      body: Center(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 400),
+          child: Card(
+            child: Padding(
+              padding: const EdgeInsets.all(32),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(
+                    Icons.error_outline,
+                    size: 64,
+                    color: colorScheme.error,
+                  ),
+                  const SizedBox(height: 24),
+                  Text(
+                    'Authentication Failed',
+                    style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                          fontWeight: FontWeight.w600,
+                        ),
+                  ),
+                  const SizedBox(height: 16),
+                  Container(
+                    padding: const EdgeInsets.all(12),
+                    decoration: BoxDecoration(
+                      color: colorScheme.errorContainer,
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    child: Text(
+                      _formatError(error),
+                      style: TextStyle(color: colorScheme.onErrorContainer),
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                  const SizedBox(height: 24),
+                  FilledButton.icon(
+                    onPressed: () {
+                      _authInitiated = false;
+                      ref.read(authProvider.notifier).signIn();
+                    },
+                    icon: const Icon(Icons.refresh),
+                    label: const Text('Try again'),
+                    style: FilledButton.styleFrom(
+                      minimumSize: const Size(double.infinity, 48),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  String _formatError(Object error) {
+    final message = error.toString();
+    if (message.contains('user_cancelled')) {
+      return 'Sign in was cancelled';
+    }
+    if (message.contains('network')) {
+      return 'Network error. Please check your connection.';
+    }
+    return 'Authentication failed. Please try again.';
+  }
+
   int _selectedIndex(BuildContext context) {
     final location = GoRouterState.of(context).matchedLocation;
 

lib/version.g.dart

@@ -1,13 +0,0 @@
-// GENERATED FILE - DO NOT EDIT
-// Generated by build_runner from pubspec.yaml
-
-/// Application version information from pubspec.yaml
-class AppVersion {
-  AppVersion._();
-
-  static const String name = 'tatlock_ui';
-  static const String description = 'Tatlock - a Home Lab AI';
-  static const String version = '0.3.3';
-  static const int buildNumber = 1;
-  static const String fullVersion = '0.3.3+1';
-}

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.0.0+1
+version: 1.1.0+1
 
 environment:
   sdk: ^3.10.4
@@ -30,6 +30,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  flutter_web_plugins:
+    sdk: flutter
 
   # State Management
   flutter_riverpod: ^3.0.0
@@ -52,6 +54,8 @@ dependencies:
 
   # Authentication (OIDC/OAuth2)
   flutter_appauth: ^8.0.0
+  crypto: ^3.0.3
+  web: ^1.1.0
 
   # UI
   flex_color_scheme: ^8.1.0
@@ -67,6 +71,7 @@ dependencies:
   url_launcher: ^6.3.1
   flutter_code_editor: ^0.3.5
   highlight: ^0.7.0
+  dio_web_adapter: ^2.1.1
 
 dev_dependencies:
   flutter_test:

tool/generate_health_json.dart

@@ -0,0 +1,51 @@
+#!/usr/bin/env dart
+// Generates web/health.json from pubspec.yaml
+// Run: dart run tool/generate_health_json.dart
+
+// ignore_for_file: avoid_print
+
+import 'dart:convert';
+import 'dart:io';
+
+import 'package:yaml/yaml.dart';
+
+void main() {
+  final pubspecFile = File('pubspec.yaml');
+  if (!pubspecFile.existsSync()) {
+    stderr.writeln('Error: pubspec.yaml not found');
+    exit(1);
+  }
+
+  final pubspecContent = pubspecFile.readAsStringSync();
+  final pubspec = loadYaml(pubspecContent) as YamlMap;
+
+  final name = pubspec['name'] as String;
+  final description = pubspec['description'] as String? ?? '';
+  final versionString = pubspec['version'] as String;
+
+  // Parse version: "1.0.3+1" -> version="1.0.3", buildNumber=1
+  final versionParts = versionString.split('+');
+  final version = versionParts[0];
+  final buildNumber = versionParts.length > 1 ? int.parse(versionParts[1]) : 0;
+
+  final health = {
+    'status': 'healthy',
+    'name': name,
+    'title': description,
+    'version': version,
+    'buildNumber': buildNumber,
+    'fullVersion': '$version+$buildNumber',
+  };
+
+  final webDir = Directory('web');
+  if (!webDir.existsSync()) {
+    webDir.createSync(recursive: true);
+  }
+
+  final healthFile = File('web/health.json');
+  healthFile.writeAsStringSync(
+    const JsonEncoder.withIndent('  ').convert(health),
+  );
+
+  print('Generated web/health.json with version $version+$buildNumber');
+}

web/health.html

@@ -1,7 +1,30 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>OK</title>
+  <title>Health Check</title>
+  <style>
+    body { font-family: monospace; padding: 20px; background: #1a1a1a; color: #0f0; }
+    .healthy { color: #0f0; }
+    .error { color: #f00; }
+    pre { background: #222; padding: 15px; border-radius: 5px; }
+  </style>
 </head>
-<body>OK</body>
+<body>
+  <h1 id="status">Loading...</h1>
+  <pre id="data"></pre>
+  <script>
+    fetch('/health.json')
+      .then(r => r.json())
+      .then(data => {
+        document.getElementById('status').textContent = data.status?.toUpperCase() || 'OK';
+        document.getElementById('status').className = data.status === 'healthy' ? 'healthy' : 'error';
+        document.getElementById('data').textContent = JSON.stringify(data, null, 2);
+      })
+      .catch(err => {
+        document.getElementById('status').textContent = 'ERROR';
+        document.getElementById('status').className = 'error';
+        document.getElementById('data').textContent = err.message;
+      });
+  </script>
+</body>
 </html>

web/index.html

@@ -27,6 +27,7 @@
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
   <link rel="icon" type="image/png" href="favicon.png"/>
 
   <title>Tatlock</title>