Handle authenticated room instance takeover

resources/js/composables/useRoomRealtime.ts

@@ -42,6 +42,16 @@ export function useRoomRealtime(
             return;
         }
 
+        if (
+            payload.change === 'player_instance_replaced' &&
+            payload.affected_player_id === currentPlayer.value.id &&
+            payload.affected_instance_id === currentPlayer.value.instance_id
+        ) {
+            router.visit(home().url, { replace: true });
+
+            return;
+        }
+
         if (payload.change === 'room_closed') {
             router.visit(
                 join({ query: { join_code: room.value.join_code } }).url,

resources/js/pages/embedded/Error.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
+import { Head, Link } from '@inertiajs/vue3';
 import { CircleAlert } from '@lucide/vue';
 
+import { login } from '@/routes';
+
 defineProps<{
     message: string;
+    showLoginAction: boolean;
 }>();
 </script>
 
@@ -19,6 +22,13 @@ defineProps<{
             <CircleAlert class="size-10 text-amber-300" />
             <h1 class="text-2xl font-bold">Raum kann nicht geöffnet werden</h1>
             <p class="text-slate-300">{{ message }}</p>
+            <Link
+                v-if="showLoginAction"
+                :href="login()"
+                class="inline-flex rounded-lg bg-white px-4 py-2 font-semibold text-slate-900 transition hover:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+            >
+                Anmelden
+            </Link>
             <p class="text-sm text-slate-400">
                 Bitte ändere Raumcode oder Anzeigename auf der Home-Seite der
                 Fillibri Hub App und öffne Scrum Poker erneut.

resources/js/types/room.ts

@@ -30,6 +30,7 @@ export type RoomPlayer = {
 
 export type CurrentRoomPlayer = {
     id: number;
+    instance_id: string;
     name: string;
     is_moderator: boolean;
     current_vote: string | null;
@@ -163,6 +164,7 @@ export type RoomStateChange =
     | 'player_joined'
     | 'player_updated'
     | 'player_kicked'
+    | 'player_instance_replaced'
     | 'vote_changed'
     | 'cards_revealed'
     | 'votes_reset'
@@ -177,6 +179,7 @@ export type RoomStateChangedPayload = {
     change: RoomStateChange;
     state: RoomRealtimeState | null;
     affected_player_id?: number;
+    affected_instance_id?: string;
 };
 
 export type RoomRealtimeState = Pick<