frontend: add admin panel for user and permission management

Admin-only page at /admin with:
- Create user form (username, password, admin toggle)
- User list table with edit and delete actions
- Inline user editing (change password, toggle admin role)
- Inline permission editor with per-app checkboxes grouped by server
- Access guarded by checking is_admin from /api/auth/me

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>
 			{@render children()}
 		</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/admin/+page.svelte

@@ -0,0 +1,535 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { getToken, handleUnauthorized } from '../stores/authStore.svelte';
+	import { fetchApps, type App } from '../apps';
+
+	interface User {
+		id: string;
+		username: string;
+		is_admin: boolean;
+		created_at: string;
+	}
+
+	interface AppPermission {
+		server: string;
+		app_id: number;
+	}
+
+	let users: User[] = $state([]);
+	let allApps: Record<string, App[]> = $state({});
+	let loading = $state(true);
+	let error = $state('');
+
+	// Create user form
+	let newUsername = $state('');
+	let newPassword = $state('');
+	let newIsAdmin = $state(false);
+	let createError = $state('');
+
+	// Edit permissions
+	let editingUserId: string | null = $state(null);
+	let editingPermissions: Set<string> = $state(new Set());
+
+	// Edit user
+	let editingUserDetails: string | null = $state(null);
+	let editPassword = $state('');
+	let editIsAdmin = $state(false);
+	let editError = $state('');
+
+	function authHeaders(): Record<string, string> {
+		return {
+			'Authorization': `Bearer ${getToken()}`,
+			'Content-Type': 'application/json'
+		};
+	}
+
+	async function authFetch(url: string, options: RequestInit = {}) {
+		const response = await fetch(url, {
+			...options,
+			headers: { ...authHeaders(), ...(options.headers || {}) }
+		});
+		if (response.status === 401) {
+			handleUnauthorized();
+			throw new Error('Unauthorized');
+		}
+		return response;
+	}
+
+	async function loadUsers() {
+		const response = await authFetch('/api/admin/users');
+		if (response.ok) {
+			users = await response.json();
+		}
+	}
+
+	async function loadApps() {
+		try {
+			const data = await fetchApps();
+			allApps = data.apps;
+		} catch {
+			// Apps may fail if no servers paired, that's ok
+		}
+	}
+
+	onMount(async () => {
+		try {
+			// Verify admin access
+			const meResp = await authFetch('/api/auth/me');
+			if (!meResp.ok) return;
+			const me = await meResp.json();
+			if (!me.is_admin) {
+				await goto('/');
+				return;
+			}
+
+			await Promise.all([loadUsers(), loadApps()]);
+		} catch (e) {
+			error = 'Failed to load admin data';
+		} finally {
+			loading = false;
+		}
+	});
+
+	async function createUser() {
+		createError = '';
+		if (!newUsername || !newPassword) {
+			createError = 'Username and password are required';
+			return;
+		}
+		try {
+			const response = await authFetch('/api/admin/users', {
+				method: 'POST',
+				body: JSON.stringify({
+					username: newUsername,
+					password: newPassword,
+					is_admin: newIsAdmin
+				})
+			});
+			if (!response.ok) {
+				const data = await response.json().catch(() => null);
+				createError = data?.description || 'Failed to create user';
+				return;
+			}
+			newUsername = '';
+			newPassword = '';
+			newIsAdmin = false;
+			await loadUsers();
+		} catch {
+			createError = 'Connection error';
+		}
+	}
+
+	async function deleteUser(userId: string, username: string) {
+		if (!confirm(`Delete user "${username}"? This cannot be undone.`)) return;
+		await authFetch(`/api/admin/users/${userId}`, { method: 'DELETE' });
+		await loadUsers();
+	}
+
+	function startEditUser(user: User) {
+		editingUserDetails = user.id;
+		editPassword = '';
+		editIsAdmin = user.is_admin;
+		editError = '';
+	}
+
+	function cancelEditUser() {
+		editingUserDetails = null;
+	}
+
+	async function saveEditUser() {
+		if (!editingUserDetails) return;
+		editError = '';
+
+		const body: Record<string, unknown> = {};
+		if (editPassword) body.password = editPassword;
+		body.is_admin = editIsAdmin;
+
+		try {
+			const response = await authFetch(`/api/admin/users/${editingUserDetails}`, {
+				method: 'PUT',
+				body: JSON.stringify(body)
+			});
+			if (!response.ok) {
+				const data = await response.json().catch(() => null);
+				editError = data?.description || 'Failed to update user';
+				return;
+			}
+			editingUserDetails = null;
+			await loadUsers();
+		} catch {
+			editError = 'Connection error';
+		}
+	}
+
+	async function startEditPermissions(userId: string) {
+		editingUserId = userId;
+		const response = await authFetch(`/api/admin/users/${userId}/permissions`);
+		if (response.ok) {
+			const perms: AppPermission[] = await response.json();
+			editingPermissions = new Set(perms.map(p => `${p.server}:${p.app_id}`));
+		}
+	}
+
+	function cancelEditPermissions() {
+		editingUserId = null;
+		editingPermissions = new Set();
+	}
+
+	function togglePermission(server: string, appId: number) {
+		const key = `${server}:${appId}`;
+		const next = new Set(editingPermissions);
+		if (next.has(key)) {
+			next.delete(key);
+		} else {
+			next.add(key);
+		}
+		editingPermissions = next;
+	}
+
+	async function savePermissions() {
+		if (!editingUserId) return;
+		const permissions: AppPermission[] = Array.from(editingPermissions).map(key => {
+			const [server, appId] = key.split(':');
+			return { server, app_id: parseInt(appId) };
+		});
+
+		await authFetch(`/api/admin/users/${editingUserId}/permissions`, {
+			method: 'PUT',
+			body: JSON.stringify({ permissions })
+		});
+
+		editingUserId = null;
+		editingPermissions = new Set();
+	}
+
+	function permKey(server: string, appId: number): string {
+		return `${server}:${appId}`;
+	}
+</script>
+
+<svelte:head>
+	<title>Admin</title>
+</svelte:head>
+
+<div class="admin-container">
+	<h1>User Management</h1>
+
+	{#if loading}
+		<p class="loading">Loading...</p>
+	{:else if error}
+		<p class="error">{error}</p>
+	{:else}
+		<!-- Create User -->
+		<div class="section">
+			<h2>Create User</h2>
+			<form class="create-form" onsubmit={(e) => { e.preventDefault(); createUser(); }}>
+				<input type="text" placeholder="Username" bind:value={newUsername} />
+				<input type="password" placeholder="Password" bind:value={newPassword} />
+				<label class="checkbox-label">
+					<input type="checkbox" bind:checked={newIsAdmin} />
+					Admin
+				</label>
+				<button type="submit">Create</button>
+			</form>
+			{#if createError}
+				<p class="error">{createError}</p>
+			{/if}
+		</div>
+
+		<!-- User List -->
+		<div class="section">
+			<h2>Users</h2>
+			<table>
+				<thead>
+					<tr>
+						<th>Username</th>
+						<th>Role</th>
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each users as user}
+						<tr>
+							<td>{user.username}</td>
+							<td>
+								<span class="role-badge" class:admin={user.is_admin}>
+									{user.is_admin ? 'Admin' : 'User'}
+								</span>
+							</td>
+							<td class="actions">
+								<button class="btn-sm" onclick={() => startEditUser(user)}>Edit</button>
+								<button class="btn-sm" onclick={() => startEditPermissions(user.id)}>Permissions</button>
+								<button class="btn-sm btn-danger" onclick={() => deleteUser(user.id, user.username)}>Delete</button>
+							</td>
+						</tr>
+
+						<!-- Edit User Inline -->
+						{#if editingUserDetails === user.id}
+							<tr class="edit-row">
+								<td colspan="3">
+									<div class="edit-form">
+										<div class="field-row">
+											<label>New Password (leave blank to keep)</label>
+											<input type="password" bind:value={editPassword} placeholder="New password" />
+										</div>
+										<div class="field-row">
+											<label class="checkbox-label">
+												<input type="checkbox" bind:checked={editIsAdmin} />
+												Admin
+											</label>
+										</div>
+										{#if editError}
+											<p class="error">{editError}</p>
+										{/if}
+										<div class="button-row">
+											<button class="btn-sm" onclick={saveEditUser}>Save</button>
+											<button class="btn-sm" onclick={cancelEditUser}>Cancel</button>
+										</div>
+									</div>
+								</td>
+							</tr>
+						{/if}
+
+						<!-- Edit Permissions Inline -->
+						{#if editingUserId === user.id}
+							<tr class="edit-row">
+								<td colspan="3">
+									<div class="permissions-editor">
+										<h3>App Permissions for {user.username}</h3>
+										{#if Object.keys(allApps).length === 0}
+											<p class="muted">No servers paired. Pair a server first to manage app permissions.</p>
+										{:else}
+											{#each Object.entries(allApps) as [serverName, apps]}
+												<div class="server-group">
+													<h4>{serverName}</h4>
+													{#each apps as app}
+														<label class="perm-checkbox">
+															<input
+																type="checkbox"
+																checked={editingPermissions.has(permKey(serverName, app.id))}
+																onchange={() => togglePermission(serverName, app.id)}
+															/>
+															{app.title}
+														</label>
+													{/each}
+												</div>
+											{/each}
+										{/if}
+										<div class="button-row">
+											<button class="btn-sm" onclick={savePermissions}>Save Permissions</button>
+											<button class="btn-sm" onclick={cancelEditPermissions}>Cancel</button>
+										</div>
+									</div>
+								</td>
+							</tr>
+						{/if}
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.admin-container {
+		max-width: 800px;
+		margin: 2rem auto;
+		padding: 0 1rem;
+	}
+
+	h1 {
+		color: #e0e0e0;
+		font-size: 1.5rem;
+		margin-bottom: 1.5rem;
+	}
+
+	h2 {
+		color: #ccc;
+		font-size: 1.1rem;
+		margin-bottom: 0.8rem;
+	}
+
+	h3 {
+		color: #ccc;
+		font-size: 1rem;
+		margin: 0 0 0.5rem 0;
+	}
+
+	h4 {
+		color: #aaa;
+		font-size: 0.9rem;
+		margin: 0.5rem 0 0.3rem 0;
+	}
+
+	.section {
+		margin-bottom: 2rem;
+	}
+
+	.loading, .error {
+		color: #aaa;
+	}
+
+	.error {
+		color: #ff4444;
+		font-size: 0.85rem;
+	}
+
+	.muted {
+		color: #666;
+		font-size: 0.85rem;
+	}
+
+	.create-form {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.create-form input[type="text"],
+	.create-form input[type="password"] {
+		padding: 0.4rem 0.6rem;
+		border: 1px solid #444;
+		border-radius: 4px;
+		background-color: #0f0f23;
+		color: #e0e0e0;
+		font-size: 0.9rem;
+	}
+
+	.create-form button {
+		padding: 0.4rem 1rem;
+		border: none;
+		border-radius: 4px;
+		background-color: #00aaff;
+		color: white;
+		cursor: pointer;
+		font-size: 0.9rem;
+	}
+
+	.create-form button:hover {
+		background-color: #0088cc;
+	}
+
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		color: #ccc;
+		font-size: 0.9rem;
+		cursor: pointer;
+	}
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	th, td {
+		padding: 0.6rem 0.8rem;
+		text-align: left;
+		border-bottom: 1px solid #333;
+	}
+
+	th {
+		color: #888;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		font-weight: normal;
+	}
+
+	td {
+		color: #ddd;
+		font-size: 0.9rem;
+	}
+
+	.role-badge {
+		padding: 0.15rem 0.5rem;
+		border-radius: 3px;
+		font-size: 0.8rem;
+		background-color: #2a2a4e;
+		color: #aaa;
+	}
+
+	.role-badge.admin {
+		background-color: #1a3a2a;
+		color: #4ade80;
+	}
+
+	.actions {
+		display: flex;
+		gap: 0.3rem;
+	}
+
+	.btn-sm {
+		padding: 0.25rem 0.6rem;
+		border: 1px solid #444;
+		border-radius: 3px;
+		background-color: transparent;
+		color: #ccc;
+		cursor: pointer;
+		font-size: 0.8rem;
+	}
+
+	.btn-sm:hover {
+		background-color: #2a2a4e;
+	}
+
+	.btn-danger {
+		border-color: #662222;
+		color: #ff6666;
+	}
+
+	.btn-danger:hover {
+		background-color: #331111;
+	}
+
+	.edit-row td {
+		background-color: #111122;
+		border-bottom: 1px solid #333;
+	}
+
+	.edit-form, .permissions-editor {
+		padding: 0.5rem 0;
+	}
+
+	.field-row {
+		margin-bottom: 0.5rem;
+	}
+
+	.field-row label {
+		display: block;
+		color: #888;
+		font-size: 0.8rem;
+		margin-bottom: 0.2rem;
+	}
+
+	.field-row input[type="password"] {
+		padding: 0.3rem 0.5rem;
+		border: 1px solid #444;
+		border-radius: 4px;
+		background-color: #0f0f23;
+		color: #e0e0e0;
+		font-size: 0.85rem;
+	}
+
+	.button-row {
+		display: flex;
+		gap: 0.3rem;
+		margin-top: 0.5rem;
+	}
+
+	.server-group {
+		margin-bottom: 0.5rem;
+	}
+
+	.perm-checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		color: #ccc;
+		font-size: 0.85rem;
+		padding: 0.15rem 0;
+		cursor: pointer;
+	}
+</style>

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,

gamestream-webtransport-proxy/src/main.rs

@@ -124,9 +124,9 @@ async fn run_backend(port: u16) -> Result<()> {
     Ok(())
 }
 
-async fn run_proxy(port: u16, stream_id: uuid::Uuid) -> Result<()> {
+async fn run_proxy(port: u16, stream_id: uuid::Uuid, stream_token: String) -> Result<()> {
     let (config, cert_hash) = certs::get_webtransport_stream_config(stream_id)?;
-    let proxy = proxy::Proxy::new(cert_hash);
+    let proxy = proxy::Proxy::new(cert_hash, stream_token);
     let proxy_arc = std::sync::Arc::new(proxy);
 
     let router = Router::new()
@@ -166,8 +166,11 @@ async fn main() -> anyhow::Result<()> {
                     .nth(3)
                     .ok_or(anyhow!("Cert ID argument missing"))?,
             )?;
+            let stream_token = std::env::args()
+                .nth(4)
+                .ok_or(anyhow!("Stream token argument missing"))?;
 
-            run_proxy(port, stream_id).await
+            run_proxy(port, stream_id, stream_token).await
         }
         _ => Err(anyhow!("Unknown mode: {mode}")),
     }

gamestream-webtransport-proxy/src/proxy/handler.rs

@@ -85,6 +85,18 @@ impl crate::proxy::Proxy {
             description: "Could not start stream".to_string(),
         });
 
+        // Validate single-use stream token via the shared helper so this
+        // handler and its unit tests exercise the same code path.
+        let provided_token = req.query::<String>("token").unwrap_or_default();
+        if let Err(msg) = super::validate_stream_token(&self, &provided_token).await {
+            error!("Stream token validation failed: {msg}");
+            return Err(AppError {
+                status_code: StatusCode::UNAUTHORIZED,
+                description: msg,
+            });
+        }
+        info!("Stream token validated and consumed");
+
         info!("WebTransport connection initiated");
         let (wt_stream_send, wt_stream_recv, wt_datagram_send) = match setup_webtransport(req).await
         {

gamestream-webtransport-proxy/src/proxy/mod.rs

@@ -11,16 +11,16 @@ mod video;
 
 pub struct Proxy {
     pub cert_hash: [u8; 32],
-    //pub cert_hash: String,
     pub stream: RwLock<Option<backend::Stream>>,
+    pub stream_token: RwLock<Option<String>>,
 }
 
 impl Proxy {
-    pub fn new(cert_hash: [u8; 32]) -> Self {
+    pub fn new(cert_hash: [u8; 32], stream_token: String) -> Self {
-        //pub fn new(cert_hash: String) -> Self {
         Proxy {
             stream: RwLock::new(None),
             cert_hash,
+            stream_token: RwLock::new(Some(stream_token)),
         }
     }
 }
@@ -78,6 +78,22 @@ async fn proxy_main(
     Ok(())
 }
 
+/// Validate a provided token against the stored token. Consumes the token on success (single-use).
+/// Returns Ok(()) if valid, Err with description if invalid or already consumed.
+pub async fn validate_stream_token(proxy: &Proxy, provided: &str) -> std::result::Result<(), String> {
+    let mut token_guard = proxy.stream_token.write().await;
+    match token_guard.take() {
+        Some(expected) if expected == provided => Ok(()),
+        Some(_) => {
+            // Wrong token: still consumed by the `take()` above. Any validation
+            // attempt — correct or not — invalidates the token, so a wrong
+            // guess cannot be followed by a correct one.
+            Err("Invalid stream token".to_string())
+        }
+        None => Err("Stream token already used".to_string()),
+    }
+}
+
 async fn spawn_gamestream(stream: backend::Stream) -> Result<Channels> {
     let (tx, rx) = tokio::sync::oneshot::channel();
     let (stop_tx, stop_rx) = tokio::sync::oneshot::channel::<()>();
@@ -99,3 +115,59 @@ async fn spawn_gamestream(stream: backend::Stream) -> Result<Channels> {
             .context("Could not get gamestream communication channels")?,
     })
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn make_proxy(token: &str) -> Proxy {
+        Proxy {
+            cert_hash: [0u8; 32],
+            stream: RwLock::new(None),
+            stream_token: RwLock::new(Some(token.to_string())),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_valid_token_accepted() {
+        let proxy = make_proxy("abc123");
+        let result = validate_stream_token(&proxy, "abc123").await;
+        assert!(result.is_ok());
+    }
+
+    #[tokio::test]
+    async fn test_wrong_token_rejected() {
+        let proxy = make_proxy("abc123");
+        let result = validate_stream_token(&proxy, "wrong").await;
+        assert!(result.is_err());
+        assert_eq!(result.unwrap_err(), "Invalid stream token");
+    }
+
+    #[tokio::test]
+    async fn test_missing_token_rejected() {
+        let proxy = make_proxy("abc123");
+        let result = validate_stream_token(&proxy, "").await;
+        assert!(result.is_err());
+    }
+
+    #[tokio::test]
+    async fn test_token_consumed_after_use() {
+        let proxy = make_proxy("abc123");
+        let first = validate_stream_token(&proxy, "abc123").await;
+        assert!(first.is_ok());
+
+        let second = validate_stream_token(&proxy, "abc123").await;
+        assert!(second.is_err());
+        assert_eq!(second.unwrap_err(), "Stream token already used");
+    }
+
+    #[tokio::test]
+    async fn test_wrong_attempt_consumes_token() {
+        let proxy = make_proxy("abc123");
+        // Wrong token attempt should consume it
+        let _ = validate_stream_token(&proxy, "wrong").await;
+        // Correct token should also fail now
+        let result = validate_stream_token(&proxy, "abc123").await;
+        assert!(result.is_err());
+    }
+}

gamestream-webtransport-proxy/src/stream.rs

@@ -25,7 +25,7 @@ struct PostStreamStartParams {
 struct PostStreamStartResponse {
     url: String,
     cert_hash: [u8; 32],
-    //cert_hash: String,
+    stream_token: String,
 }
 
 #[derive(Deserialize)]
@@ -301,6 +301,19 @@ impl crate::backend::Backend {
 
         let port = self.port + <u16>::try_from((*writer).len()).unwrap();
 
+        // Generate single-use stream token for proxy authentication
+        let stream_token = {
+            let mut bytes = [0u8; 32];
+            openssl::rand::rand_bytes(&mut bytes).map_err(|e| {
+                error!("Failed to generate stream token: {e}");
+                AppError {
+                    status_code: StatusCode::INTERNAL_SERVER_ERROR,
+                    description: "Could not start stream".to_string(),
+                }
+            })?;
+            hex::encode(bytes)
+        };
+
         // Spawn WebTransport proxy
         let binary_path = match std::env::current_exe() {
             Ok(b) => b,
@@ -314,7 +327,7 @@ impl crate::backend::Backend {
             stream_id, port
         );
         match tokio::process::Command::new(binary_path)
-            .args(["proxy", &port.to_string(), &stream_id.to_string()])
+            .args(["proxy", &port.to_string(), &stream_id.to_string(), &stream_token])
             .spawn()
         {
             Ok(_) => (),
@@ -355,6 +368,7 @@ impl crate::backend::Backend {
         let post_stream_response = PostStreamStartResponse {
             url: webtransport_url,
             cert_hash: setup_resp.cert_hash,
+            stream_token,
         };
 
         Ok(Json(post_stream_response))