From 7ea073611170483c7111a283d2869b89f097fbdf Mon Sep 17 00:00:00 2001
From: theluckystrike <51033404+theluckystrike@users.noreply.github.com>
Date: Thu, 5 Mar 2026 00:30:21 +0700
Subject: [PATCH] fix: Retry socket authentication on auth failure

When socket authentication fails (e.g., race condition when token is not
yet loaded from storage), the client now retries authentication after
a short delay. This fixes the issue where:

- Login page shows spinning icon forever
- Playback fails with 'invalid token' errors
- Socket stays unauthenticated after transient failures

The fix adds a 500ms retry delay that allows time for the token to
become available (e.g., after hydration from localStorage).

Fixes #5101
---
 client/layouts/default.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 75753b214..ad73b739c 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -143,6 +143,18 @@ export default {
     authFailed(payload) {
       console.error('[SOCKET] auth failed', payload.message)
       this.isSocketAuthenticated = false
+
+      // Retry authentication after a short delay (e.g., token might not be loaded yet)
+      // This handles race conditions where socket connects before token is available
+      setTimeout(() => {
+        if (!this.isSocketAuthenticated && this.socket?.connected) {
+          const token = this.$store.getters['user/getToken']
+          if (token) {
+            console.log('[SOCKET] Retrying authentication after auth failure')
+            this.socket.emit('auth', token)
+          }
+        }
+      }, 500)
     },
     init(payload) {
       console.log('Init Payload', payload)