fixup! feat(auth): params for embedding yir in apps

Author: seferturan

projects/client/src/hooks.client.ts

@@ -2,11 +2,18 @@ import '$lib/polyfills/at.ts';
 import '$lib/polyfills/mapGroupBy.ts';
 import '$lib/polyfills/randomUUID.ts';
 import '$lib/polyfills/toSorted.ts';
+import { captureWebviewSession } from '$lib/features/webview/captureWebviewSession.ts';
 import { SENTRY_DSN } from '$lib/utils/constants.ts';
 import { safeSessionStorage } from '$lib/utils/storage/safeStorage.ts';
 import * as Sentry from '@sentry/sveltekit';
 import { handleErrorWithSentry } from '@sentry/sveltekit';
 
+// Must run before Sentry.init and before SvelteKit reads `location`: strips the
+// WebView params (slurm VIP token, standalone flag) from the URL and latches
+// them to sessionStorage, so page.url, Sentry tracing/replay and analytics never
+// see the token.
+captureWebviewSession();
+
 Sentry.init({
   dsn: SENTRY_DSN,
 

projects/client/src/hooks.server.ts

@@ -14,6 +14,7 @@ import { handle as handleTheme } from '$lib/features/theme/handle.ts';
 import { isBotAgent } from '$lib/utils/devices/isBotAgent.ts';
 
 import { SENTRY_DSN } from '$lib/utils/constants.ts';
+import { stripWebviewParams } from '$lib/utils/url/stripWebviewParams.ts';
 import {
   handleErrorWithSentry,
   initCloudflareSentryHandle,
@@ -65,6 +66,26 @@ export const handleCacheControl: Handle = async ({ event, resolve }) => {
   });
 };
 
+// Keep the slurm VIP token out of Sentry. The client strips the WebView params
+// before anything reads them, but the server request URL still carries them, so
+// scrub the request URL from every error and transaction report.
+function scrubWebviewParams<T extends { request?: { url?: string } }>(
+  event: T,
+): T {
+  const request = event.request;
+  if (!request?.url) {
+    return event;
+  }
+
+  try {
+    request.url = stripWebviewParams(new URL(request.url)).href;
+  } catch {
+    // Leave a non-absolute / unparseable URL untouched.
+  }
+
+  return event;
+}
+
 export const handle: Handle = sequence(
   initCloudflareSentryHandle({
     dsn: SENTRY_DSN,
@@ -76,6 +97,8 @@ export const handle: Handle = sequence(
       // whichever subrequest or body-read was in flight.
       'Network connection lost.',
     ],
+    beforeSend: scrubWebviewParams,
+    beforeSendTransaction: scrubWebviewParams,
   }),
   sentryHandle(),
   // Must run before any feature that touches `event.locals` or session

projects/client/src/lib/features/standalone/standaloneFlag.ts

@@ -0,0 +1,20 @@
+import { safeSessionStorage } from '$lib/utils/storage/safeStorage.ts';
+
+// The native apps append `standalone_mode` (see WEBVIEW_PARAMS) when they open a
+// YIR/MIR inside a WebView; when set, the app chrome is stripped so the page
+// reads as a native screen. The flag is captured at client boot
+// (captureWebviewSession) and latched here so it survives in-page navigation and
+// a param-less reload. WebView-local.
+const STORAGE_KEY = 'trakt-standalone-mode';
+
+export function isStandaloneValue(value: string | null | undefined): boolean {
+  return value === '1' || value === 'true';
+}
+
+export function getStandalone(): boolean {
+  return safeSessionStorage.getItem(STORAGE_KEY) === '1';
+}
+
+export function setStandalone(): void {
+  safeSessionStorage.setItem(STORAGE_KEY, '1');
+}

projects/client/src/lib/features/standalone/useStandaloneMode.svelte.ts

@@ -0,0 +1,42 @@
+import {
+  isStandaloneValue,
+  setStandalone,
+} from '$lib/features/standalone/standaloneFlag.ts';
+import { WEBVIEW_PARAMS } from '$lib/utils/url/webviewParams.ts';
+import { setSlurm } from './slurmToken.ts';
+
+// Runs once at client boot (from hooks.client), before Sentry.init and before
+// SvelteKit reads `location` to build `page.url`. It latches the WebView params
+// into sessionStorage and strips them from the URL with a raw History replace.
+//
+// Doing it this early is the whole point: SvelteKit then builds `page.url` from
+// the already-clean `location`, so no downstream sink ever sees the slurm token
+// (Sentry tracing/replay, analytics page_view, shared links). A raw
+// replaceState is fine here precisely because it runs before `page.url` exists;
+// the same call from a component's onMount would not update `page.url`.
+export function captureWebviewSession(): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const url = new URL(window.location.href);
+
+  const slurm = url.searchParams.get(WEBVIEW_PARAMS.slurm);
+  if (slurm) {
+    setSlurm(slurm);
+  }
+
+  if (isStandaloneValue(url.searchParams.get(WEBVIEW_PARAMS.standaloneMode))) {
+    setStandalone();
+  }
+
+  const present = Object.values(WEBVIEW_PARAMS).filter((param) =>
+    url.searchParams.has(param)
+  );
+  if (present.length === 0) {
+    return;
+  }
+
+  present.forEach((param) => url.searchParams.delete(param));
+  window.history.replaceState(window.history.state, '', url);
+}

projects/client/src/lib/features/webview/captureWebviewSession.ts

@@ -0,0 +1,12 @@
+import { page } from '$app/state';
+import { WEBVIEW_PARAMS } from '$lib/utils/url/webviewParams.ts';
+import { getSlurm } from './slurmToken.ts';
+
+// Resolves the WebView VIP token for a YIR/MIR data request. On the client the
+// token was latched to sessionStorage at boot (captureWebviewSession) and the
+// URL is already clean, so getSlurm() wins; on the server (no storage) it falls
+// back to the URL param that is still present during SSR.
+export function resolveSlurm(): string | undefined {
+  return getSlurm() ?? page.url.searchParams.get(WEBVIEW_PARAMS.slurm) ??
+    undefined;
+}

projects/client/src/lib/features/webview/resolveSlurm.ts

@@ -1,13 +1,11 @@
 import { safeSessionStorage } from '$lib/utils/storage/safeStorage.ts';
 
 // The native apps open a Year/Month in Review in a WebView with a `slurm` URL
-// param carrying the viewer's VIP token. It authorizes only the YIR/MIR data
-// requests (mirroring trakt.tv v2, where the backend resolves the token to the
-// viewing user) — it is not an app-wide login session. Latched in
-// sessionStorage so it survives in-page navigation and a param-less reload,
+// param (see WEBVIEW_PARAMS) carrying the viewer's VIP token. It authorizes only
+// the YIR/MIR data requests (mirroring trakt.tv v2, where the backend resolves
+// the token to the viewing user); it is not an app-wide login session. Latched
+// in sessionStorage so it survives in-page navigation and a param-less reload,
 // and stays WebView-local.
-export const SLURM_PARAM = 'slurm';
-
 const STORAGE_KEY = 'trakt-slurm';
 
 export function getSlurm(): string | null {

projects/client/src/lib/features/webview/slurmToken.ts

@@ -0,0 +1,25 @@
+import { browser } from '$app/environment';
+import { page } from '$app/state';
+import {
+  getStandalone,
+  isStandaloneValue,
+} from '$lib/features/standalone/standaloneFlag.ts';
+import { WEBVIEW_PARAMS } from '$lib/utils/url/webviewParams.ts';
+import { getSlurm } from './slurmToken.ts';
+
+// Exposes the WebView session params for a page. Capture + URL strip already
+// happened at client boot (captureWebviewSession, from hooks.client), so on the
+// client these read from sessionStorage while the URL is clean; on the server
+// (no storage) they read the URL params that are still present during SSR. Both
+// yield the same values, so the first client render matches SSR.
+export function useWebviewSession() {
+  const slurm = browser
+    ? getSlurm() ?? undefined
+    : page.url.searchParams.get(WEBVIEW_PARAMS.slurm) ?? undefined;
+
+  const isStandalone = browser ? getStandalone() : isStandaloneValue(
+    page.url.searchParams.get(WEBVIEW_PARAMS.standaloneMode),
+  );
+
+  return { slurm, isStandalone };
+}

projects/client/src/lib/features/webview/useSlurm.svelte.ts

@@ -8,6 +8,11 @@ type RawApiFetchParams = {
   fetch?: typeof fetch;
   path: string;
   init?: Omit<RequestInit, 'headers'> & { headers?: Record<string, string> };
+  // Defaults to true (attach the signed-in user's Bearer token). Pass false for
+  // requests authorized out-of-band (e.g. the WebView `slurm` token): no Bearer
+  // is sent, so a different account's token can never mix with the request, and
+  // a 401 cannot tear down the web session.
+  authenticated?: boolean;
 };
 
 export type ApiParams = Omit<TraktApiOptions, 'apiKey' | 'environment'> & {
@@ -55,10 +60,13 @@ export const rawApiFetch = ({
   fetch = globalThis.fetch,
   path,
   init,
+  authenticated = true,
 }: RawApiFetchParams) => {
   const { headers: additionalHeaders, ...restInit } = init ?? {};
-  const authenticatedFetch = createAuthenticatedFetch(fetch);
-  return authenticatedFetch(`${environment}${path}`, {
+  // Unauthenticated requests use the bare fetch: no Bearer token, and none of
+  // the 401 re-authentication side effects that would sign out a web session.
+  const baseFetch = authenticated ? createAuthenticatedFetch(fetch) : fetch;
+  return baseFetch(`${environment}${path}`, {
     ...restInit,
     headers: {
       'trakt-api-version': '2',