fix(realtime): eliminate race condition in custom JWT token authentication

Author: mandarini

packages/core/realtime-js/src/RealtimeClient.ts

@@ -620,7 +620,19 @@ export default class RealtimeClient {
   private _onConnOpen() {
     this._setConnectionState('connected')
     this.log('transport', `connected to ${this.endpointURL()}`)
-    this.flushSendBuffer()
+
+    // Wait for any pending auth operations before flushing send buffer
+    // This ensures channel join messages include the correct access token
+    this._waitForAuthIfNeeded()
+      .then(() => {
+        this.flushSendBuffer()
+      })
+      .catch((e) => {
+        this.log('error', 'error waiting for auth on connect', e)
+        // Proceed anyway to avoid hanging connections
+        this.flushSendBuffer()
+      })
+
     this._clearTimer('reconnect')
 
     if (!this.worker) {

packages/core/supabase-js/src/SupabaseClient.ts

@@ -157,11 +157,10 @@ export default class SupabaseClient<
       ...settings.realtime,
     })
     if (this.accessToken) {
-      setTimeout(() => {
-        this.accessToken?.()
-          ?.then((token) => this.realtime.setAuth(token))
-          .catch((e) => console.warn('Failed to set initial Realtime auth token:', e))
-      }, 0)
+      // Start auth immediately to avoid race condition with channel subscriptions
+      this.accessToken()
+        .then((token) => this.realtime.setAuth(token))
+        .catch((e) => console.warn('Failed to set initial Realtime auth token:', e))
     }
 
     this.rest = new PostgrestClient(new URL('rest/v1', baseUrl).href, {

packages/core/supabase-js/test/integration.test.ts

@@ -367,23 +367,27 @@ describe('Custom JWT', () => {
       const supabaseWithCustomJwt = createClient(SUPABASE_URL, ANON_KEY, {
         accessToken: () => Promise.resolve(jwtToken),
       })
-      await new Promise((resolve) => setTimeout(resolve, 100))
-      expect(supabaseWithCustomJwt.realtime.accessTokenValue).toBe(jwtToken)
-      let subscribed = false
-      let attempts = 0
-      supabaseWithCustomJwt.channel('test-channel').subscribe((status) => {
-        if (status == 'SUBSCRIBED') subscribed = true
-      })
 
-      // Wait for subscription
-      while (!subscribed) {
-        if (attempts > 50) throw new Error('Timeout waiting for subscription')
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        attempts++
-      }
+      // Wait for subscription using Promise to avoid polling
+      await new Promise<void>((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          reject(new Error('Timeout waiting for subscription'))
+        }, 10000)
+
+        supabaseWithCustomJwt.channel('test-channel').subscribe((status, err) => {
+          if (status === 'SUBSCRIBED') {
+            clearTimeout(timeout)
+            // Verify token was set
+            expect(supabaseWithCustomJwt.realtime.accessTokenValue).toBe(jwtToken)
+            resolve()
+          } else if (status === 'CHANNEL_ERROR' || status === 'TIMED_OUT') {
+            clearTimeout(timeout)
+            reject(err || new Error(`Subscription failed with status: ${status}`))
+          }
+        })
+      })
 
-      expect(subscribed).toBe(true)
-      //
-    }, 10000)
+      await supabaseWithCustomJwt.removeAllChannels()
+    }, 15000)
   })
 })