frontend: attach auth credentials to all API requests

Add Authorization Bearer header to all fetch calls (apps, stream
start). Handle 401 responses by clearing token and redirecting to
login. Pass stream_token from the stream start response through to
the WebTransport URL as a query parameter for proxy authentication.

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

frontend/src/routes/+layout.svelte

@@ -1,22 +1,67 @@
 <script lang="ts">
-	//import Header from './Header.svelte';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { isAuthenticated, getToken, handleUnauthorized } from './stores/authStore.svelte';
 	import '../app.css';
 
 	let { children } = $props();
+
+	let userProfile: { username: string; is_admin: boolean } | null = $state(null);
+	let authChecked = $state(false);
+
+	onMount(async () => {
+		const currentPath = page.url.pathname;
+
+		if (currentPath === '/login') {
+			authChecked = true;
+			return;
+		}
+
+		if (!isAuthenticated()) {
+			await goto('/login');
+			authChecked = true;
+			return;
+		}
+
+		// Validate token by fetching user profile
+		try {
+			const response = await fetch('/api/auth/me', {
+				headers: { Authorization: `Bearer ${getToken()}` }
+			});
+
+			if (!response.ok) {
+				handleUnauthorized();
+				authChecked = true;
+				return;
+			}
+
+			userProfile = await response.json();
+		} catch {
+			handleUnauthorized();
+		}
+
+		authChecked = true;
+	});
 </script>
 
 <div class="app">
-	<!--<Header />-->
+	{#if authChecked}
+		{#if userProfile && page.url.pathname !== '/login'}
+			<nav class="top-nav">
+				<a href="/" class="nav-link">Apps</a>
+				{#if userProfile.is_admin}
+					<a href="/admin" class="nav-link">Admin</a>
+				{/if}
+				<span class="nav-spacer"></span>
+				<span class="nav-user">{userProfile.username}</span>
+			</nav>
+		{/if}
 
-	<main>
+		<main>
-		{@render children()}
+			{@render children()}
-	</main>
+		</main>
-
+	{/if}
-	<!--<footer>
-		<p>
-			visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
-		</p>
-	</footer>-->
 </div>
 
 <style>
@@ -27,31 +72,39 @@
 	}
 
 	main {
-		/*flex: 1;*/
-		/*display: flex;*/
-		/*flex-direction: column;*/
-		/*padding: 1rem;*/
 		width: 100%;
-		/*max-width: 64rem;*/
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
 
-	footer {
+	.top-nav {
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		align-items: center;
-		padding: 12px;
+		padding: 0.5rem 1rem;
+		background-color: #1a1a2e;
+		border-bottom: 1px solid #333;
 	}
 
-	footer a {
+	.nav-link {
-		font-weight: bold;
+		color: #aaa;
+		text-decoration: none;
+		padding: 0.4rem 0.8rem;
+		border-radius: 4px;
+		font-size: 0.9rem;
 	}
 
-	@media (min-width: 480px) {
+	.nav-link:hover {
-		footer {
+		color: #e0e0e0;
-			padding: 12px 0;
+		background-color: #2a2a4e;
-		}
+		text-decoration: none;
+	}
+
+	.nav-spacer {
+		flex-grow: 1;
+	}
+
+	.nav-user {
+		color: #888;
+		font-size: 0.85rem;
 	}
 </style>

frontend/src/routes/Cover.svelte

@@ -25,6 +25,7 @@
 		streamStore.CertHash = streamData.CertHash;
 		streamStore.Width = streamData.Width;
 		streamStore.Height = streamData.Height;
+		streamStore.StreamToken = streamData.StreamToken;
 
 		console.log(`Stream data retrieved. Navigating to /stream.`);
 		await goto('/stream');

frontend/src/routes/apps.ts

@@ -1,3 +1,5 @@
+import { getToken, handleUnauthorized } from './stores/authStore.svelte';
+
 export interface App {
   title: string;
   id: number;
@@ -12,7 +14,15 @@ export interface AppsResponse {
 
 export async function fetchApps() {
   console.log('Getting apps');
-  const response = await fetch('/api/apps');
+  const response = await fetch('/api/apps', {
+    headers: { 'Authorization': `Bearer ${getToken()}` }
+  });
+
+  if (response.status === 401) {
+    handleUnauthorized();
+    throw new Error('Unauthorized');
+  }
+
   console.log(response);
   const data = (await response.json()) as AppsResponse;
   console.log(data);

frontend/src/routes/getStreamData.ts

@@ -1,8 +1,11 @@
+import { getToken, handleUnauthorized } from './stores/authStore.svelte';
+
 type StreamData = {
   Url: string,
   CertHash: Array<number>,
   Width: number,
   Height: number,
+  StreamToken: string,
 }
 
 export async function getStreamData(appId: number, server_name: string): Promise<StreamData> {
@@ -34,10 +37,16 @@ export async function getStreamData(appId: number, server_name: string): Promise
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        'Authorization': `Bearer ${getToken()}`,
       },
       body: JSON.stringify(payload)
     });
 
+    if (response.status === 401) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}: ${await response.text()}`);
     }
@@ -45,15 +54,17 @@ export async function getStreamData(appId: number, server_name: string): Promise
     const streamDataResp = await response.json();
     console.log('Stream started:', streamDataResp);
 
-    let streamData: StreamData = { Url: streamDataResp.url, CertHash: streamDataResp.cert_hash, Width: width, Height: height };
+    let streamData: StreamData = {
+      Url: streamDataResp.url,
+      CertHash: streamDataResp.cert_hash,
+      Width: width,
+      Height: height,
+      StreamToken: streamDataResp.stream_token,
+    };
     return streamData;
 
-
   } catch (error) {
     console.error('Error getting stream data: ', error);
     throw new Error('Failed to start stream: ' + error);
   }
 }
-
-
-

frontend/src/routes/login/+page.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { setToken, isAuthenticated } from '../stores/authStore.svelte';
+	import { onMount } from 'svelte';
+
+	let username = $state('');
+	let password = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	onMount(() => {
+		if (isAuthenticated()) {
+			goto('/');
+		}
+	});
+
+	async function handleLogin(event: Event) {
+		event.preventDefault();
+		error = '';
+		loading = true;
+
+		try {
+			const response = await fetch('/api/auth/login', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ username, password })
+			});
+
+			if (!response.ok) {
+				const data = await response.json().catch(() => null);
+				error = data?.description || 'Invalid username or password';
+				return;
+			}
+
+			const data = await response.json();
+			setToken(data.token);
+			await goto('/');
+		} catch (e) {
+			error = 'Connection error. Please try again.';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Login</title>
+</svelte:head>
+
+<div class="login-container">
+	<div class="login-box">
+		<h1>GameStream</h1>
+		<form onsubmit={handleLogin}>
+			<div class="field">
+				<label for="username">Username</label>
+				<input
+					id="username"
+					type="text"
+					bind:value={username}
+					autocomplete="username"
+					required
+					disabled={loading}
+				/>
+			</div>
+			<div class="field">
+				<label for="password">Password</label>
+				<input
+					id="password"
+					type="password"
+					bind:value={password}
+					autocomplete="current-password"
+					required
+					disabled={loading}
+				/>
+			</div>
+			{#if error}
+				<div class="error">{error}</div>
+			{/if}
+			<button type="submit" disabled={loading}>
+				{loading ? 'Signing in...' : 'Sign in'}
+			</button>
+		</form>
+	</div>
+</div>
+
+<style>
+	.login-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 100vh;
+	}
+
+	.login-box {
+		background-color: #1a1a2e;
+		border: 1px solid #333;
+		border-radius: 12px;
+		padding: 2.5rem;
+		width: 100%;
+		max-width: 380px;
+	}
+
+	h1 {
+		color: #e0e0e0;
+		margin: 0 0 1.5rem 0;
+		font-size: 1.5rem;
+	}
+
+	.field {
+		margin-bottom: 1rem;
+	}
+
+	label {
+		display: block;
+		color: #aaa;
+		font-size: 0.85rem;
+		margin-bottom: 0.3rem;
+	}
+
+	input {
+		width: 100%;
+		padding: 0.6rem 0.8rem;
+		border: 1px solid #444;
+		border-radius: 6px;
+		background-color: #0f0f23;
+		color: #e0e0e0;
+		font-size: 1rem;
+		box-sizing: border-box;
+	}
+
+	input:focus {
+		outline: none;
+		border-color: #00aaff;
+	}
+
+	input:disabled {
+		opacity: 0.6;
+	}
+
+	.error {
+		color: #ff4444;
+		font-size: 0.85rem;
+		margin-bottom: 1rem;
+	}
+
+	button {
+		width: 100%;
+		padding: 0.7rem;
+		border: none;
+		border-radius: 6px;
+		background-color: #00aaff;
+		color: white;
+		font-size: 1rem;
+		cursor: pointer;
+		transition: background-color 0.2s;
+	}
+
+	button:hover:not(:disabled) {
+		background-color: #0088cc;
+	}
+
+	button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+</style>

frontend/src/routes/stores/authStore.svelte.ts

@@ -0,0 +1,43 @@
+import { goto } from '$app/navigation';
+
+interface AuthState {
+	token: string | null;
+}
+
+function loadToken(): string | null {
+	if (typeof window === 'undefined') return null;
+	return localStorage.getItem('auth_token');
+}
+
+export const authStore: AuthState = $state({
+	token: loadToken()
+});
+
+export function getToken(): string | null {
+	return authStore.token;
+}
+
+export function setToken(token: string) {
+	authStore.token = token;
+	localStorage.setItem('auth_token', token);
+}
+
+export function clearToken() {
+	authStore.token = null;
+	localStorage.removeItem('auth_token');
+}
+
+export function isAuthenticated(): boolean {
+	return authStore.token !== null;
+}
+
+export function requireAuth() {
+	if (!isAuthenticated()) {
+		goto('/login');
+	}
+}
+
+export function handleUnauthorized() {
+	clearToken();
+	goto('/login');
+}

frontend/src/routes/stores/streamStore.svelte.ts

@@ -3,4 +3,5 @@ export const streamStore = $state({
   CertHash: [0],
   Width: 0,
   Height: 0,
+  StreamToken: '',
 });

frontend/src/routes/stream/+page.svelte

@@ -6,6 +6,7 @@
 	$: certHash = streamStore.CertHash;
 	$: width = streamStore.Width;
 	$: height = streamStore.Height;
+	$: streamToken = streamStore.StreamToken;
 </script>
 
 <svelte:head>
@@ -13,9 +14,7 @@
 	<meta name="description" content="Streaming game" />
 </svelte:head>
 
-<!--<section>
+<Stream {url} {certHash} {width} {height} {streamToken} />
-</section>-->
-<Stream {url} {certHash} {width} {height} />
 
 <style>
 	section {

frontend/src/routes/stream/Stream.svelte

@@ -8,17 +8,20 @@
 		certHash: Array<number>;
 		width: number;
 		height: number;
+		streamToken: string;
 	}
 
-	let { url, certHash, width, height }: Props = $props();
+	let { url, certHash, width, height, streamToken }: Props = $props();
 	let loading = $state(true);
 	let fullscreen = $state(false);
 	let gameplayView: HTMLDivElement;
 	let gameplayCanvas: HTMLCanvasElement;
 
 	async function startStream() {
+		// Append stream token to URL for proxy authentication
+		const authenticatedUrl = url + (url.includes('?') ? '&' : '?') + 'token=' + encodeURIComponent(streamToken);
 		await startWebtransportStream(
-			url,
+			authenticatedUrl,
 			certHash,
 			width,
 			height,