From ebeedff5d016646ab2e1a69c1e21d32cfa0564dd Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Tue, 8 Jul 2025 15:51:50 +0200
Subject: [PATCH] Add error page for when a session has been taken

Describe to the user what it means when a session has been detected as
taken and provide a means to abandoned the session and log in again.
---
 error.vue               | 57 ++++++++++++++++++++++++++++++++++-------
 server/utils/session.ts |  1 +
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/error.vue b/error.vue
index fafbcd1..68d0f9d 100644
--- a/error.vue
+++ b/error.vue
@@ -3,26 +3,65 @@
 	SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Header />
-	<h1>{{ error.statusCode }} {{ error.statusMessage }}</h1>
-	<p v-if="error.message !== error.statusMessage">
-		{{ error.message }}
-	</p>
-	<pre v-if="error.stack"><code>{{ error.stack }}</code></pre>
+	<template v-if='data?.data?.code === "SESSION_TAKEN"'>
+		<h1>Session taken</h1>
+		<p>
+			Your session with the server has been taken over by another browser, device, or HTTP agent. This could happen due to one of the following reasons:
+		</p>
+		<ul>
+			<li>
+				The session cookie on this device got restored to an earlier state for example as a result of a restore or a crash.
+			</li>
+			<li>
+				The server issued a new session to the client but the client didn't get the repsonse.
+			</li>
+			<li>
+				The session cookie was copied and used on another device, browser or HTTP agent.
+			</li>
+		</ul>
+		<p>
+			It's possible however unlikely that someone else have hijacked your session.
+		</p>
+		<p>
+			<button
+				type="button"
+				@click="abandonSession"
+			>
+				Abandon Session
+			</button>
+		</p>
+	</template>
+	<template v-else>
+		<Header />
+		<h1>{{ error.statusCode }} {{ error.statusMessage }}</h1>
+		<p v-if="error.message !== error.statusMessage">
+			{{ error.message }}
+		</p>
+		<pre v-if="error.stack"><code>{{ error.stack }}</code></pre>
+	</template>
 </template>
 
 <script setup lang="ts">
-defineProps<{ error: {
+const props = defineProps<{ error: {
 	statusCode: number,
 	fatal: boolean,
 	unhandled: boolean,
 	statusMessage?: string,
-	data?: unknown,
+	data?: string,
 	cause?: unknown,
 
 	// Undocumented fields
 	url?: string,
 	message?: string,
 	stack?: string,
-} }>()
+}}>();
+const data = computed<{
+	data?: {
+		code?: string,
+	},
+}>(() => props.error.data ? JSON.parse(props.error.data) : undefined);
+async function abandonSession() {
+	await $fetch("/api/auth/session", { method: "DELETE", }).catch(err => alert(err.message));
+	await navigateTo("/");
+}
 </script>
diff --git a/server/utils/session.ts b/server/utils/session.ts
index db819e4..194e5c2 100644
--- a/server/utils/session.ts
+++ b/server/utils/session.ts
@@ -106,6 +106,7 @@ export async function getServerSession(event: H3Event, ignoreExpired: boolean) {
 					statusCode: 403,
 					statusMessage: "Forbidden",
 					message: "Session has been taken by another agent.",
+					data: { code: "SESSION_TAKEN" },
 				});
 			}
 			const now = Date.now();