fix: make realtime work with gotrue v2

Author: alaister

src/SupabaseClient.ts

@@ -167,13 +167,11 @@ export default class SupabaseClient {
    * Activated when vsndate query param is present in the WebSocket URL.
    */
   channel(name: string, opts: { selfBroadcast: boolean; [key: string]: any }): RealtimeChannel {
-    const userToken = this.auth.session()?.access_token ?? this.supabaseKey
-
     if (!this.realtime.isConnected()) {
       this.realtime.connect()
     }
 
-    return this.realtime.channel(name, { ...opts, user_token: userToken }) as RealtimeChannel
+    return this.realtime.channel(name, opts) as RealtimeChannel
   }
 
   /**

src/lib/SupabaseQueryBuilder.ts

@@ -6,7 +6,6 @@ import { Fetch, GenericObject, SupabaseEventTypes, SupabaseRealtimePayload } fro
 export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
   private _subscription: SupabaseRealtimeClient | null = null
   private _realtime: RealtimeClient
-  private _headers: GenericObject
   private _schema: string
   private _table: string
 
@@ -31,7 +30,6 @@ export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
     super(url, { headers, schema, fetch, shouldThrowOnError })
 
     this._realtime = realtime
-    this._headers = headers
     this._schema = schema
     this._table = table
   }
@@ -49,12 +47,7 @@ export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
       this._realtime.connect()
     }
     if (!this._subscription) {
-      this._subscription = new SupabaseRealtimeClient(
-        this._realtime,
-        this._headers,
-        this._schema,
-        this._table
-      )
+      this._subscription = new SupabaseRealtimeClient(this._realtime, this._schema, this._table)
     }
     return this._subscription.on(event, callback)
   }

src/lib/SupabaseRealtimeClient.ts

@@ -1,19 +1,15 @@
-import { RealtimeSubscription, RealtimeClient, Transformers } from '@supabase/realtime-js'
-import { GenericObject, SupabaseEventTypes, SupabaseRealtimePayload } from './types'
+import { RealtimeClient, RealtimeSubscription, Transformers } from '@supabase/realtime-js'
+import { SupabaseEventTypes, SupabaseRealtimePayload } from './types'
 
 export class SupabaseRealtimeClient {
+  socket: RealtimeClient
   subscription: RealtimeSubscription
 
-  constructor(socket: RealtimeClient, headers: GenericObject, schema: string, tableName: string) {
-    const chanParams: GenericObject = {}
+  constructor(socket: RealtimeClient, schema: string, tableName: string) {
     const topic = tableName === '*' ? `realtime:${schema}` : `realtime:${schema}:${tableName}`
-    const userToken = headers['Authorization'].split(' ')[1]
 
-    if (userToken) {
-      chanParams['user_token'] = userToken
-    }
-
-    this.subscription = socket.channel(topic, chanParams) as RealtimeSubscription
+    this.socket = socket
+    this.subscription = socket.channel(topic) as RealtimeSubscription
   }
 
   private getPayloadRecords(payload: any) {
@@ -62,13 +58,30 @@ export class SupabaseRealtimeClient {
    * Enables the subscription.
    */
   subscribe(callback: Function = () => {}) {
+    // if the socket already has a good accessToken
+    // we can just use it strait away∏
+    if (this.socket.accessToken) {
+      this.subscription.updateJoinPayload({
+        user_token: this.socket.accessToken,
+      })
+    }
+
     this.subscription.onError((e: Error) => callback('SUBSCRIPTION_ERROR', e))
     this.subscription.onClose(() => callback('CLOSED'))
     this.subscription
       .subscribe()
-      .receive('ok', () => callback('SUBSCRIBED'))
+      .receive('ok', () => {
+        callback('SUBSCRIBED')
+
+        // re-set the accessToken again in case it was set while
+        // the subscription was isJoining
+        if (this.socket.accessToken) {
+          this.socket.setAuth(this.socket.accessToken)
+        }
+      })
       .receive('error', (e: Error) => callback('SUBSCRIPTION_ERROR', e))
       .receive('timeout', () => callback('RETRYING_AFTER_TIMEOUT'))
+
     return this.subscription
   }
 }