Merge pull request #52 from mucsi96/claude/mobile-token-rejection-auth-woc2E

Add mobile token renewal and PWA support

Author: mucsi96

client/public/favicon.png

@@ -0,0 +1,37 @@
+{
+  "name": "Skeleton App",
+  "short_name": "Skeleton",
+  "description": "Reference application demonstrating authentication, AI integration and deployment patterns.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#121212",
+  "theme_color": "#121212",
+  "icons": [
+    {
+      "src": "icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/icon-maskable-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icons/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

client/public/icons/apple-touch-icon.png

@@ -1,4 +1,9 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  inject,
+  provideAppInitializer,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import {
@@ -13,7 +18,9 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy
 import { provideAngularMaterialTheme } from '@mucsi96/angular-material-theme';
 import { routes } from './app.routes';
 import { errorInterceptor } from './utils/error.interceptor';
+import { authRetryInterceptor } from './utils/auth-retry.interceptor';
 import { timezoneInterceptor } from './utils/timezone.interceptor';
+import { TokenRenewalService } from './utils/token-renewal.service';
 import { authInterceptor } from 'angular-auth-oidc-client';
 import { provideOidcAuth } from './auth.config';
 import {
@@ -31,13 +38,19 @@ export function getAppConfig(environment: EnvironmentConfig): ApplicationConfig
       provideZoneChangeDetection({ eventCoalescing: true }),
       provideRouter(routes),
       provideHttpClient(
-        withInterceptors([authInterceptor(), timezoneInterceptor, errorInterceptor])
+        withInterceptors([
+          errorInterceptor,
+          authRetryInterceptor,
+          authInterceptor(),
+          timezoneInterceptor,
+        ])
       ),
       { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig },
       provideAnimationsAsync(),
       provideAngularMaterialTheme(),
       { provide: ENVIRONMENT_CONFIG, useValue: environment },
       provideOidcAuth(environment),
+      provideAppInitializer(() => inject(TokenRenewalService).init()),
     ],
   };
 }

client/public/icons/icon-192.png

@@ -0,0 +1,36 @@
+import { HttpErrorResponse, HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { catchError, switchMap, throwError } from 'rxjs';
+
+const isApiRequest = (url: string): boolean => /\/api(\/|$)/.test(url);
+
+/**
+ * Recovers from an expired access token without forcing a full re-login.
+ *
+ * If a request to the API comes back 401 (typically because the token expired
+ * while the app was backgrounded on mobile), silently refresh the session and
+ * retry the request once. Only if that retry also fails does the error
+ * propagate to the error interceptor.
+ *
+ * Sits outside the bearer-token interceptor so the retried request is re-issued
+ * with the freshly refreshed token, and inside the error interceptor so a
+ * successful retry never surfaces a spurious error notification.
+ */
+export const authRetryInterceptor: HttpInterceptorFn = (req, next) => {
+  const oidcSecurityService = inject(OidcSecurityService);
+
+  return next(req).pipe(
+    catchError((error: unknown) => {
+      const is401 = error instanceof HttpErrorResponse && error.status === 401;
+
+      if (!is401 || !isApiRequest(req.url)) {
+        return throwError(() => error);
+      }
+
+      return oidcSecurityService
+        .forceRefreshSession()
+        .pipe(switchMap(() => next(req)));
+    })
+  );
+};

client/public/icons/icon-512.png

@@ -0,0 +1,53 @@
+import { DestroyRef, inject, Injectable } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { fromEvent, merge, throttleTime } from 'rxjs';
+
+/**
+ * Keeps the access token fresh on mobile.
+ *
+ * `angular-auth-oidc-client` schedules silent renewal on a JS timer, but iOS
+ * freezes timers (and the whole page) while the app is backgrounded - which on
+ * a phone is most of the time. The scheduled renewal therefore never fires and
+ * the user returns to an expired token and a forced re-login.
+ *
+ * This service renews proactively whenever the app comes back to the
+ * foreground (the moment iOS un-freezes the page and the user is about to make
+ * a request anyway), so the hourly access-token expiry stops being noticeable.
+ */
+@Injectable({ providedIn: 'root' })
+export class TokenRenewalService {
+  private readonly oidcSecurityService = inject(OidcSecurityService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  init(): void {
+    const visible$ = fromEvent(document, 'visibilitychange');
+    const focus$ = fromEvent(window, 'focus');
+    const online$ = fromEvent(window, 'online');
+
+    merge(visible$, focus$, online$)
+      .pipe(
+        throttleTime(30_000, undefined, { leading: true, trailing: false }),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe(() => this.renewIfForeground());
+  }
+
+  private renewIfForeground(): void {
+    if (document.visibilityState !== 'visible') {
+      return;
+    }
+
+    this.oidcSecurityService
+      .isAuthenticated()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((isAuthenticated) => {
+        if (isAuthenticated) {
+          this.oidcSecurityService
+            .forceRefreshSession()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        }
+      });
+  }
+}